external/srs
1
0
Fork 0
mirror of https://github.com/ossrs/srs.git synced 2025-03-09 15:49:59 +00:00
Code Issues Releases Wiki Activity

RTC2RTMP: Fix screen sharing stutter caused by packet loss. v5.0.216 v6.0.157 v7.0.18 (#4160)

Browse source 
## How to reproduce?

1. Refer this commit, which contains the web demo to capture screen as
video stream through RTC.
2. Copy the `trunk/research/players/whip.html` and
`trunk/research/players/js/srs.sdk.js` to replace the `develop` branch
source code.
3. `./configure && make`
4. `./objs/srs -c conf/rtc2rtmp.conf`
5. open `http://localhost:8080/players/whip.html?schema=http`
6. check `Screen` radio option.
7. click `publish`, then check the screen to share.
8. play the rtmp live stream: `rtmp://localhost/live/livestream`
9. check the video stuttering.

## Cause
When capture screen by the chrome web browser, which send RTP packet
with empty payload frequently, then all the cached RTP packets are
dropped before next key frame arrive in this case.

The OBS screen stream and camera stream do not have such problem.

## Add screen stream to WHIP demo

><img width="581" alt="Screenshot 2024-08-28 at 2 49 46 PM"
src="https://github.com/user-attachments/assets/9557dbd2-c799-4dfd-b336-5bbf2e4f8fb8">

---------

Co-authored-by: winlin <winlinvip@gmail.com>
This commit is contained in:
Jacob Su 2024-10-15 19:00:07 +08:00 • committed by GitHub
parent e7d78462fe
commit 101382afd0
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 67 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

46
trunk/research/players/js/srs.sdk.js
View file

@ -527,36 +527,56 @@ function SrsRtcWhipWhepAsync() {
// @url The WebRTC url to publish with, for example:
// http://localhost:1985/rtc/v1/whip/?app=live&stream=livestream
// @options The options to control playing, supports:
// videoOnly: boolean, whether only play video, default to false.
// audioOnly: boolean, whether only play audio, default to false.
// camera: boolean, whether capture video from camera, default to true.
// screen: boolean, whether capture video from screen, default to false.
// audio: boolean, whether play audio, default to true.
self.publish = async function (url, options) {
if (url.indexOf('/whip/') === -1) throw new Error(`invalid WHIP url ${url}`);
if (options?.videoOnly && options?.audioOnly) throw new Error(`The videoOnly and audioOnly in options can't be true at the same time`);
const hasAudio = options?.audio ?? true;
const useCamera = options?.camera ?? true;
const useScreen = options?.screen ?? false;
if (!options?.videoOnly) {
if (!hasAudio && !useCamera && !useScreen) throw new Error(`The camera, screen and audio can't be false at the same time`);
if (hasAudio) {
self.pc.addTransceiver("audio", {direction: "sendonly"});
} else {
self.constraints.audio = false;
}
if (!options?.audioOnly) {
if (useCamera || useScreen) {
self.pc.addTransceiver("video", {direction: "sendonly"});
} else {
}
if (!useCamera) {
self.constraints.video = false;
}
if (!navigator.mediaDevices && window.location.protocol === 'http:' && window.location.hostname !== 'localhost') {
throw new SrsError('HttpsRequiredError', `Please use HTTPS or localhost to publish, read https://github.com/ossrs/srs/issues/2762#issuecomment-983147576`);
}
var stream = await navigator.mediaDevices.getUserMedia(self.constraints);
// @see https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/addStream#Migrating_to_addTrack
stream.getTracks().forEach(function (track) {
self.pc.addTrack(track);
if (useScreen) {
const displayStream = await navigator.mediaDevices.getDisplayMedia({
video: true
});
// @see https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/addStream#Migrating_to_addTrack
displayStream.getTracks().forEach(function (track) {
self.pc.addTrack(track);
// Notify about local track when stream is ok.
self.ontrack && self.ontrack({track: track});
});
}
// Notify about local track when stream is ok.
self.ontrack && self.ontrack({track: track});
});
if (useCamera || hasAudio) {
const userStream = await navigator.mediaDevices.getUserMedia(self.constraints);
userStream.getTracks().forEach(function (track) {
self.pc.addTrack(track);
// Notify about local track when stream is ok.
self.ontrack && self.ontrack({track: track});
});
}
var offer = await self.pc.createOffer();
await self.pc.setLocalDescription(offer);