mirror of
https://github.com/ossrs/srs.git
synced 2025-03-09 15:49:59 +00:00
364bec264e
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. 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. ><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>
167 lines
7.1 KiB
HTML
167 lines
7.1 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<title>SRS</title>
|
||
<meta charset="utf-8">
|
||
<style>
|
||
body{
|
||
padding-top: 30px;
|
||
}
|
||
</style>
|
||
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
|
||
<script type="text/javascript" src="js/jquery-1.12.2.min.js"></script>
|
||
<script type="text/javascript" src="js/adapter-7.4.0.min.js"></script>
|
||
<script type="text/javascript" src="js/srs.sdk.js"></script>
|
||
<script type="text/javascript" src="js/winlin.utility.js"></script>
|
||
<script type="text/javascript" src="js/srs.page.js"></script>
|
||
</head>
|
||
<body>
|
||
<img style="width: 0px; height: 0px;" src='//ossrs.net/gif/v1/sls.gif?site=ossrs.net&path=/player/rtcpublisher'/>
|
||
<div class="navbar navbar-fixed-top">
|
||
<div class="navbar-inner">
|
||
<div class="container">
|
||
<a class="brand" href="https://github.com/ossrs/srs" target="_blank">SRS</a>
|
||
<div class="nav-collapse collapse">
|
||
<ul class="nav">
|
||
<li><a id="nav_srs_player" href="srs_player.html">LivePlayer</a></li>
|
||
<!--<li><a id="nav_rtc_player" href="rtc_player.html">RTC播放器</a></li>-->
|
||
<!--<li><a id="nav_rtc_publisher" href="rtc_publisher.html">RTC推流</a></li>-->
|
||
<li class="active"><a id="nav_whip" href="whip.html">WHIP</a></li>
|
||
<li><a id="nav_whep" href="whip.html">WHEP</a></li>
|
||
<li><a href="http://ossrs.net/srs.release/releases/app.html">iOS/Andriod</a></li>
|
||
<!--<li><a id="nav_srs_publisher" href="srs_publisher.html">SRS编码器</a></li>-->
|
||
<!--<li><a id="nav_srs_chat" href="srs_chat.html">SRS会议</a></li>-->
|
||
<!--<li><a id="nav_srs_bwt" href="srs_bwt.html">SRS测网速</a></li>-->
|
||
<!--<li><a id="nav_vlc" href="vlc.html">VLC播放器</a></li>-->
|
||
<!--<li><a id="nav_gb28181" href="srs_gb28181.html">GB28181</a></li>-->
|
||
<!--<li>
|
||
<a href="https://github.com/ossrs/srs">
|
||
<img alt="GitHub Repo stars" src="https://img.shields.io/github/stars/ossrs/srs?style=social">
|
||
</a>
|
||
</li>-->
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="container">
|
||
<div id="main_info" class="alert alert-info fade in">
|
||
<button type="button" class="close" data-dismiss="alert">×</button>
|
||
<strong><span>Usage:</span></strong> <span>Enter the WebRTC WHIP URL and click "Publish" to start publishing.</span>
|
||
</div>
|
||
<div class="form-inline">
|
||
URL:
|
||
<input type="text" id="txt_url" class="input-xxlarge" value="">
|
||
<button class="btn btn-primary" id="btn_publish">Publish</button>
|
||
</div>
|
||
|
||
<p></p>
|
||
<video id="rtc_media_player" width="320" autoplay muted></video>
|
||
|
||
<p></p>
|
||
<div class="form-inline">
|
||
Controls:
|
||
<label>
|
||
<input type="radio" id="ra_camera" name="video" value="Camera" checked style="margin-bottom: 8px"> Camera
|
||
</label>
|
||
<label>
|
||
<input type="radio" id="ra_screen" name="video" value="Screen" style="margin-bottom: 8px"> Screen
|
||
</label>
|
||
<label>
|
||
<input type="radio" id="ra_none" name="video" value="None" style="margin-bottom: 8px"> No Video
|
||
</label>
|
||
<label>
|
||
<input type="checkbox" id="ch_audio" checked style="margin-bottom: 8px"> Audio
|
||
</label>
|
||
</div>
|
||
|
||
<p></p>
|
||
SessionID: <span id='sessionid'></span>
|
||
|
||
<p></p>
|
||
Audio: <span id='acodecs'></span><br/>
|
||
Video: <span id='vcodecs'></span>
|
||
|
||
<p></p>
|
||
Simulator: <a href='#' id='simulator-drop'>Drop</a>
|
||
|
||
<footer>
|
||
<p></p>
|
||
<p><a href="https://github.com/ossrs/srs">SRS Team © 2020</a></p>
|
||
</footer>
|
||
</div>
|
||
<script type="text/javascript">
|
||
$(function(){
|
||
var sdk = null; // Global handler to do cleanup when republishing.
|
||
var startPublish = function() {
|
||
$('#rtc_media_player').show();
|
||
|
||
// Close PC when user replay.
|
||
if (sdk) {
|
||
sdk.close();
|
||
}
|
||
sdk = new SrsRtcWhipWhepAsync();
|
||
|
||
// User should set the stream when publish is done, @see https://webrtc.org/getting-started/media-devices
|
||
// However SRS SDK provides a consist API like https://webrtc.org/getting-started/remote-streams
|
||
$('#rtc_media_player').prop('srcObject', sdk.stream);
|
||
// Optional callback, SDK will add track to stream.
|
||
// sdk.ontrack = function (event) { console.log('Got track', event); sdk.stream.addTrack(event.track); };
|
||
|
||
// https://developer.mozilla.org/en-US/docs/Web/Media/Formats/WebRTC_codecs#getting_the_supported_codecs
|
||
sdk.pc.onicegatheringstatechange = function (event) {
|
||
if (sdk.pc.iceGatheringState === "complete") {
|
||
$('#acodecs').html(SrsRtcFormatSenders(sdk.pc.getSenders(), "audio"));
|
||
$('#vcodecs').html(SrsRtcFormatSenders(sdk.pc.getSenders(), "video"));
|
||
}
|
||
};
|
||
|
||
// For example: webrtc://r.ossrs.net/live/livestream
|
||
var url = $("#txt_url").val();
|
||
sdk.publish(url, {
|
||
camera: $('#ra_camera').prop('checked'),
|
||
screen: $('#ra_screen').prop('checked'),
|
||
audio: $('#ch_audio').prop('checked')
|
||
}).then(function(session){
|
||
$('#sessionid').html(session.sessionid);
|
||
$('#simulator-drop').attr('href', session.simulator + '?drop=1&username=' + session.sessionid);
|
||
}).catch(function (reason) {
|
||
// Throw by sdk.
|
||
if (reason instanceof SrsError) {
|
||
if (reason.name === 'HttpsRequiredError') {
|
||
alert(`WebRTC推流必须是HTTPS或者localhost：${reason.name} ${reason.message}`);
|
||
} else {
|
||
alert(`${reason.name} ${reason.message}`);
|
||
}
|
||
}
|
||
// See https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia#exceptions
|
||
if (reason instanceof DOMException) {
|
||
if (reason.name === 'NotFoundError') {
|
||
alert(`找不到麦克风和摄像头设备：getUserMedia ${reason.name} ${reason.message}`);
|
||
} else if (reason.name === 'NotAllowedError') {
|
||
alert(`你禁止了网页访问摄像头和麦克风：getUserMedia ${reason.name} ${reason.message}`);
|
||
} else if (['AbortError', 'NotAllowedError', 'NotFoundError', 'NotReadableError', 'OverconstrainedError', 'SecurityError', 'TypeError'].includes(reason.name)) {
|
||
alert(`getUserMedia ${reason.name} ${reason.message}`);
|
||
}
|
||
}
|
||
|
||
sdk.close();
|
||
$('#rtc_media_player').hide();
|
||
console.error(reason);
|
||
});
|
||
};
|
||
|
||
$('#rtc_media_player').hide();
|
||
var query = parse_query_string();
|
||
srs_init_whip("#txt_url", query);
|
||
|
||
$("#btn_publish").click(startPublish);
|
||
// Never play util windows loaded @see https://github.com/ossrs/srs/issues/2732
|
||
if (query.autostart === 'true') {
|
||
window.addEventListener("load", function(){ startPublish(); });
|
||
}
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|
||
|