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

Add one to one demo. 4.0.96

Browse source
This commit is contained in:
winlin 2021-05-02 19:35:03 +08:00
parent f7473c90bc
commit 5a611e0c4b
41 changed files with 9083 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

185
trunk/3rdparty/signaling/www/demos/one2one.html vendored Normal file
View file

@ -0,0 +1,185 @@
<!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/srs.sdk.js"></script>
<script type="text/javascript" src="js/srs.sig.js"></script>
</head>
<body>
<img src='https://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">SRS</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active"><a href="#">一对一通话</a></li>
<li>
<a href="https://github.com/ossrs/signaling">
<img alt="GitHub Repo stars" src="https://img.shields.io/github/stars/ossrs/signaling?style=social">
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div class="form-inline">
SRS:
<input type="text" id="txt_host" class="input-medium" value="">
Room:
<input type="text" id="txt_room" class="input-small" value="live">
Display:
<input type="text" id="txt_display" class="input-small" value="">
<button class="btn btn-primary" id="btn_start">开始通话</button>
</div>
<div class="row">
<div class="span5">
<label></label>
<video id="rtc_media_publisher" width="320" autoplay muted controls></video>
<label></label>
<span id='self'></span>
</div>
<div class="span6">
<label></label>
<video id="rtc_media_player" width="320" autoplay muted controls></video>
<label></label>
<span id='peer'></span>
</div>
</div>
</div>
<script type="text/javascript">
var sig = null;
var publisher = null;
var player = null;
$(function(){
console.log('?host=x to specify the SRS server');
console.log('?room=x to specify the room to join');
console.log('?display=x to specify your nick name');
var startDemo = async function () {
var host = $('#txt_host').val();
var room = $('#txt_room').val();
var display = $('#txt_display').val();
// Connect to signaling first.
if (sig) {
sig.close();
}
sig = new SrsRtcSignalingAsync();
sig.onmessage = function (msg) {
console.log('Notify: ', msg);
msg.participants.forEach(function (participant) {
if (participant.display === display || !participant.publishing) return;
startPlay(host, room, participant.display);
});
};
await sig.connect('ws', window.location.host, room, display);
let r0 = await sig.send({action:'join', room:room, display:display});
console.log('Signaling: join ok', r0);
// For one to one demo, alert and ignore when room is full.
if (r0.participants.length > 2) {
alert('Room is full, already ' + (r0.participants.length - 1) + ' participants');
sig.close();
return;
}
// Start publish media if signaling is ok.
await startPublish(host, room, display);
let r1 = await sig.send({action:'publish', room:room, display:display});
console.log('Signaling: publish ok', r1);
// Play the stream already in room.
r0.participants.forEach(function(participant) {
if (participant.display === display || !participant.publishing) return;
startPlay(host, room, participant.display);
});
};
var startPublish = function (host, room, display) {
var url = 'webrtc://' + host + '/' + room + '/' + display + query;
$('#rtc_media_publisher').show();
if (publisher) {
publisher.close();
}
publisher = new SrsRtcPublisherAsync();
publisher.onaddstream = function (event) {
console.log('Start publish, event: ', event);
$('#rtc_media_publisher').prop('srcObject', event.stream);
};
return publisher.publish(url).then(function(session){
$('#self').text('Self: ' + display);
}).catch(function (reason) {
publisher.close();
$('#rtc_media_publisher').hide();
console.error(reason);
});
};
var startPlay = function (host, room, display) {
var url = 'webrtc://' + host + '/' + room + '/' + display + query;
$('#rtc_media_player').show();
if (player) {
player.close();
}
player = new SrsRtcPlayerAsync();
player.onaddstream = function (event) {
console.log('Start play, event: ', event);
$('#rtc_media_player').prop('srcObject', event.stream);
};
player.play(url).then(function(session){
$('#peer').text('Peer: ' + display);
$('#rtc_media_player').prop('muted', false);
}).catch(function (reason) {
player.close();
$('#rtc_media_player').hide();
console.error(reason);
});
};
$('#rtc_media_publisher').hide();
$('#rtc_media_player').hide();
$("#btn_start").click(startDemo);
// Pass-by to SRS url.
let query = window.location.href.split('?')[1];
query = query? '?' + query : null;
let host = window.location.href.split('host=')[1];
$('#txt_host').val(host? host.split('&')[0] : window.location.hostname);
let room = window.location.href.split('room=')[1];
room && $('#txt_room').val(room.split('&')[0]);
let display = window.location.href.split('display=')[1];
$('#txt_display').val(display? display.split('&')[0] : new Date().getTime().toString(16).substr(3));
let autostart = window.location.href.split('autostart=')[1];
if (autostart && autostart.split('&')[0] === 'true') {
startDemo();
}
});
</script>
</body>
</html>