1
0
Fork 0
mirror of https://github.com/ossrs/srs.git synced 2025-02-13 11:51:57 +00:00

For #1638, #307, use webrtc adapter.js for demo.

This commit is contained in:
winlin 2020-03-14 21:14:17 +08:00
parent a42cf3ae8d
commit 12e99f1897
7 changed files with 5707 additions and 95 deletions

File diff suppressed because it is too large Load diff

File diff suppressed because one or more lines are too long

View file

@ -29,6 +29,7 @@ function srs_get_srs_http_server_port() { return 8080; }
function update_nav() {
$("#srs_index").attr("href", "index.html" + window.location.search);
$("#nav_srs_player").attr("href", "srs_player.html" + window.location.search);
$("#nav_rtc_player").attr("href", "rtc_player.html" + window.location.search);
$("#nav_srs_publisher").attr("href", "srs_publisher.html" + window.location.search);
$("#nav_srs_chat").attr("href", "srs_chat.html" + window.location.search);
$("#nav_srs_bwt").attr("href", "srs_bwt.html" + window.location.search);
@ -53,11 +54,11 @@ function user_extra_params(query, params) {
}
for (var key in query.user_query) {
if (key == 'app' || key == 'autostart' || key == 'dir'
|| key == 'filename' || key == 'host' || key == 'hostname'
|| key == 'http_port' || key == 'pathname' || key == 'port'
|| key == 'server' || key == 'stream' || key == 'buffer'
|| key == 'schema' || key == 'vhost'
if (key === 'app' || key === 'autostart' || key === 'dir'
|| key === 'filename' || key === 'host' || key === 'hostname'
|| key === 'http_port' || key === 'pathname' || key === 'port'
|| key === 'server' || key === 'stream' || key === 'buffer'
|| key === 'schema' || key === 'vhost' || key === 'api_port'
) {
continue;
}
@ -205,6 +206,37 @@ function build_default_hls_url() {
return "http://" + server + ":" + port + "/" + app + "/" + stream + ".m3u8";
}
function build_default_rtc_url(query) {
var schema = (!query.schema)? "http":query.schema;
var server = (!query.server)? window.location.hostname:query.server;
var port = (!query.api_port)? 1985:query.api_port;
var vhost = (!query.vhost)? window.location.hostname:query.vhost;
var app = (!query.app)? "live":query.app;
var stream = (!query.stream)? "livestream":query.stream;
// Note that ossrs.net provides only web service,
// that is migrating to r.ossrs.net
if (vhost == "ossrs.net") {
vhost = "r.ossrs.net";
}
if (server == "ossrs.net") {
server = "r.ossrs.net";
}
var queries = [];
if (server != vhost && vhost != "__defaultVhost__") {
queries.push("vhost=" + vhost);
}
queries = user_extra_params(query, queries);
var uri = schema + "://" + server + ":" + port + "/api/v1/sdp/?app=" + app + "&stream=" + stream + "&" + queries.join('&');
while (uri.lastIndexOf("&") == uri.length - 1) {
uri = uri.substr(0, uri.length - 1);
}
return uri;
};
/**
* initialize the page.
* @param rtmp_url the div id contains the rtmp stream url to play
@ -217,6 +249,10 @@ function srs_init_rtmp(rtmp_url, modal_player) {
function srs_init_hls(hls_url, modal_player) {
srs_init(null, hls_url, modal_player);
}
function srs_init_rtc(id, query) {
update_nav();
$(id).val(build_default_rtc_url(query));
}
function srs_init(rtmp_url, hls_url, modal_player) {
update_nav();

View file

@ -1,90 +0,0 @@
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8">
</head>
<body>
rtc_media_player: <br>
<video id = "rtc_media_player" autoplay controls></video>
</body>
<script>
var PeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection;
var SessionDescription = window.RTCSessionDescription || window.mozRTCSessionDescription || window.webkitRTCSessionDescription;
var url = document.location.protocol + "//" + document.location.hostname + ":1985/api/v1/sdp/";
var method = "POST";
var shouldBeAsync = true;
var request = new XMLHttpRequest();
request.open(method, url, shouldBeAsync);
request.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
var pc = new PeerConnection(null);
var constraints = {
mandatory: {
OfferToReceiveAudio: true,
OfferToReceiveVideo: true
}
};
var sendViewerOfferFn = function(desc) {
console.log('sendViewerOfferFn:', desc);
pc.setLocalDescription(desc);
var sdp_json = {"sdp":desc.sdp, "app":"live", "stream":"livestream"};
request.send(JSON.stringify(sdp_json));
};
pc.createOffer(sendViewerOfferFn,
function(error) {
console.log('sendViewerOfferFn error:' + error);
},
constraints
);
pc.onaddstream = function(event) {
console.log('onaddstream');
document.getElementById('rtc_media_player').srcObject = event.stream;
rtc_media_player.load();
};
pc.onicecandidate = function(event) {
console.log('onicecandidate');
};
pc.onconnectionstatechange = function(event) {
console.log('onconnectionstatechange');
};
pc.onicegatheringstatechange = function(event) {
console.log('onicegatheringstatechange');
};
pc.onsignalingstatechange = function(event) {
console.log('onsignalingstatechange');
};
request.onerror = function(event) {
console.log('http error');
};
request.onload = function () {
console.log('onload,' , request.responseText);
var json = JSON.parse(request.responseText);
console.log('onmessage viewerResponse:', json.sdp);
pc.setRemoteDescription(new SessionDescription({type:'answer', sdp:json.sdp}));
}
</script>
</html>

View file

@ -0,0 +1,110 @@
<!DOCTYPE html>
<html>
<head>
<title>SRS</title>
<meta charset="utf-8">
<style>
body{
padding-top: 55px;
}
</style>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/adapter-7.4.0.min.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='https://ossrs.net:8443/gif/v1/sls.gif?site=ossrs.net&path=/player/srsplayer'/>
-->
<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 class="active"><a id="nav_rtc_player" href="rtc_player.html">RTC播放器</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_jwplayer6" href="jwplayer6.html">JWPlayer6播放器</a></li>-->
<!--<li><a id="nav_osmf" href="osmf.html">AdobeOSMF播放器</a></li>-->
<li><a id="nav_vlc" href="vlc.html">VLC播放器</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">播放视频</button>
</div>
<label></label>
<video id="rtc_media_player" autoplay controls></video>
<footer>
<p></p>
<p><a href="https://github.com/ossrs/srs">SRS Team &copy; 2020</a></p>
</footer>
</div>
<script type="text/javascript">
$(function(){
$('#rtc_media_player').hide();
var query = parse_query_string();
srs_init_rtc("#txt_url", query);
$("#btn_play").click(function(){
$('#rtc_media_player').show();
var urlObject = parse_rtmp_url($("#txt_url").val());
var pc = new RTCPeerConnection(null);
pc.onaddstream = function (event) {
var player = document.getElementById('rtc_media_player');
player.srcObject = event.stream;
};
new Promise(function(resolve, reject) {
pc.createOffer(function(offer){
resolve(offer);
},function(reason){
reject(reason);
},{
mandatory: {
OfferToReceiveAudio: true,
OfferToReceiveVideo: true
}
});
}).then(function(offer) {
return pc.setLocalDescription(offer).then(function(){ return offer; });
}).then(function(offer) {
return new Promise(function(resolve, reject) {
var data = {
"url": urlObject.url, "app": urlObject.app, "stream": urlObject.stream,
"sdp": offer.sdp
};
console.log("offer: " + JSON.stringify(data));
$.ajax({
type: "POST", url: urlObject.url, data: JSON.stringify(data),
contentType:'application/json', dataType: 'json'
}).done(function(data) {
console.log("answer: " + JSON.stringify(data));
resolve(data.sdp);
}).fail(function(reason){
reject(reason);
});
});
}).then(function(answer) {
pc.setRemoteDescription(new RTCSessionDescription({type: 'answer', sdp: answer}));
}).catch(function(reason) {
throw reason;
});
});
});
</script>
</body>
</html>

View file

@ -550,6 +550,9 @@
if (query.buffer) {
url += "&buffer=" + query.buffer;
}
if (query.api_port) {
url += "&api_port=" + query.api_port;
}
var queries = user_extra_params(query);
if (queries && queries.length) {

View file

@ -791,6 +791,7 @@ SrsGoApiSdp::~SrsGoApiSdp()
{
}
// TODO: FIXME: Support query string http://localhost:1985/api/v1/sdp?app=live&stream=livestream
srs_error_t SrsGoApiSdp::serve_http(ISrsHttpResponseWriter* w, ISrsHttpMessage* r)
{
srs_error_t err = srs_success;