Skip to content

Commit

Permalink
Use WHIP and WHEP for RTC. v5.10.18
Browse files Browse the repository at this point in the history
  • Loading branch information
winlinvip committed Oct 27, 2023
1 parent ea408db commit e68b35d
Show file tree
Hide file tree
Showing 8 changed files with 267 additions and 11 deletions.
4 changes: 2 additions & 2 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -111,9 +111,9 @@ tmp.json
platform/containers/etc/letsencrypt/*
platform/containers/var/lib/letsencrypt/*
platform/containers/var/log/letsencrypt/*
platform/containers/objs/nginx/html/*
platform/containers/objs/nginx/html/live/*
platform/containers/data/*
platform/containers/www/*
platform/containers/www/live/*
platform/containers/ssl/*
platform/containers/bin/*
platform/containers/conf/conf.d/nginx.vhost.conf
Expand Down
4 changes: 2 additions & 2 deletions platform/containers/www/console/en_index.html
Original file line number Diff line number Diff line change
Expand Up @@ -34,8 +34,8 @@
<li class="{{'/configs'| sc_filter_nav_active}}"><a href="javascript:void(0)" ng-click="gogogo('/configs')">Config</a></li>
<li><a href="javascript:void(0)" ng-click="redirect('en_index.html', 'ng_index.html')">Chinese</a></li>
<li>
<a href="https://github.com/ossrs/srs-console">
<img alt="GitHub Repo stars" src="https://img.shields.io/github/stars/ossrs/srs-console?style=social">
<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>
Expand Down
4 changes: 2 additions & 2 deletions platform/containers/www/console/ng_index.html
Original file line number Diff line number Diff line change
Expand Up @@ -34,8 +34,8 @@
<li class="{{'/configs'| sc_filter_nav_active}}"><a href="javascript:void(0)" ng-click="gogogo('/configs')">配置</a></li>
<li><a href="javascript:void(0)" ng-click="redirect('ng_index.html', 'en_index.html')">English</a></li>
<li>
<a href="https://github.com/ossrs/srs-console">
<img alt="GitHub Repo stars" src="https://img.shields.io/github/stars/ossrs/srs-console?style=social">
<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>
Expand Down
2 changes: 1 addition & 1 deletion platform/containers/www/players/js/srs.page.js
Original file line number Diff line number Diff line change
Expand Up @@ -179,5 +179,5 @@ function srs_init_whip(id, query) {
}
function srs_init_whep(id, query) {
update_nav();
$(id).val(build_default_whip_whep_url(query, '/rtc/v1/whip-play/'));
$(id).val(build_default_whip_whep_url(query, '/rtc/v1/whep/'));
}
2 changes: 1 addition & 1 deletion platform/containers/www/players/js/srs.sdk.js
Original file line number Diff line number Diff line change
Expand Up @@ -571,7 +571,7 @@ function SrsRtcWhipWhepAsync() {

// See https://datatracker.ietf.org/doc/draft-ietf-wish-whip/
// @url The WebRTC url to play with, for example:
// http://localhost:1985/rtc/v1/whip-play/?app=live&stream=livestream
// http://localhost:1985/rtc/v1/whep/?app=live&stream=livestream
self.play = async function(url) {
if (url.indexOf('/whip-play/') === -1 && url.indexOf('/whep/') === -1) throw new Error(`invalid WHEP url ${url}`);

Expand Down
114 changes: 114 additions & 0 deletions platform/containers/www/players/whep.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,114 @@
<!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 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 id="srs_index" class="brand" href="https://github.com/ossrs/srs">SRS</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li><a id="nav_srs_player" href="srs_player.html">SRS播放器</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><a id="nav_whip" href="whip.html">WHIP</a></li>
<li class="active"><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 class="form-inline">
URL:
<input type="text" id="txt_url" class="input-xxlarge" value="">
<button class="btn btn-primary" id="btn_play">Play</button>
</div>

<label></label>
<video id="rtc_media_player" controls autoplay></video>

<label></label>
SessionID: <span id='sessionid'></span>

<label></label>
Simulator: <a href='#' id='simulator-drop'>Drop</a>

<footer>
<p></p>
<p><a href="https://github.com/ossrs/srs">SRS Team &copy; 2020</a></p>
</footer>
</div>
<script type="text/javascript">
$(function(){
var sdk = null; // Global handler to do cleanup when republishing.
var startPlay = 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); };

// For example: webrtc://r.ossrs.net/live/livestream
var url = $("#txt_url").val();
sdk.play(url).then(function(session){
$('#sessionid').html(session.sessionid);
$('#simulator-drop').attr('href', session.simulator + '?drop=1&username=' + session.sessionid);
}).catch(function (reason) {
sdk.close();
$('#rtc_media_player').hide();
console.error(reason);
});
};

$('#rtc_media_player').hide();
var query = parse_query_string();
srs_init_whep("#txt_url", query);

$("#btn_play").click(startPlay);
// Never play util windows loaded @see https://github.com/ossrs/srs/issues/2732
if (query.autostart === 'true') {
$('#rtc_media_player').prop('muted', true);
console.warn('For autostart, we should mute it, see https://www.jianshu.com/p/c3c6944eed5a ' +
'or https://developers.google.com/web/updates/2017/09/autoplay-policy-changes#audiovideo_elements');
window.addEventListener("load", function(){ startPlay(); });
}
});
</script>
</body>
</html>

142 changes: 142 additions & 0 deletions platform/containers/www/players/whip.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,142 @@
<!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 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 id="srs_index" class="brand" href="https://github.com/ossrs/srs">SRS</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li><a id="nav_srs_player" href="srs_player.html">SRS播放器</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 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>

<label></label>
<video id="rtc_media_player" width="320" autoplay muted></video>

<label></label>
SessionID: <span id='sessionid'></span>

<label></label>
Audio: <span id='acodecs'></span><br/>
Video: <span id='vcodecs'></span>

<label></label>
Simulator: <a href='#' id='simulator-drop'>Drop</a>

<footer>
<p></p>
<p><a href="https://github.com/ossrs/srs">SRS Team &copy; 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).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>

6 changes: 3 additions & 3 deletions ui/src/components/UrlGenerator.js
Original file line number Diff line number Diff line change
Expand Up @@ -63,18 +63,18 @@ export function buildUrls(defaultUrl, secret) {
// /tools/player.html?url=http://localhost:3000/live/livestream.m3u8
urls.flvPlayer = `/tools/player.html?url=${schema}://${defaultHost}/${defaultApp}/${defaultStream}.flv`;
urls.hlsPlayer = `/tools/player.html?url=${schema}://${defaultHost}/${defaultApp}/${defaultStream}.m3u8`;
urls.rtcPlayer = `/players/rtc_player.html?schema=${schema}&port=${httpPort}&api=${httpPort}&autostart=true&stream=${defaultStream}`;
urls.rtcPlayer = `/players/whep.html?schema=${schema}&port=${httpPort}&api=${httpPort}&autostart=true&stream=${defaultStream}`;
}

// For WebRTC url.
if (true) {
const secretQuery = secret ? `&&secret=${secret.publish}` : '';
urls.flvUrl2 = `https://${defaultHostname}/${defaultApp}/${defaultStream}.flv`;
urls.m3u8Url2 = `https://${defaultHostname}/${defaultApp}/${defaultStream}.m3u8`;
urls.rtcPublisher = `/players/rtc_publisher.html?schema=https&port=443&api=443&autostart=true&stream=${defaultStream}${secretQuery}`;
urls.rtcPublisher = `/players/whip.html?schema=https&port=443&api=443&autostart=true&stream=${defaultStream}${secretQuery}`;
urls.flvPlayer2 = `/players/srs_player.html?schema=https&port=443&api=443&autostart=true&stream=${defaultStream}.flv`;
urls.hlsPlayer2 = `/players/srs_player.html?schema=https&port=443&api=443&autostart=true&stream=${defaultStream}.m3u8`;
urls.rtcPlayer2 = `/players/rtc_player.html?schema=https&port=443&api=443&autostart=true&stream=${defaultStream}`;
urls.rtcPlayer2 = `/players/whep.html?schema=https&port=443&api=443&autostart=true&stream=${defaultStream}`;
}

// For transcode stream and urls.
Expand Down

0 comments on commit e68b35d

Please sign in to comment.