mirror of
https://github.com/ossrs/srs.git
synced 2025-03-09 15:49:59 +00:00
Tools: Add video room demo
This commit is contained in:
winlin
parent
b42bf496c7
commit
bfeca8e068
5 changed files with 257 additions and 16 deletions
10
trunk/3rdparty/signaling/main.go
vendored
10
trunk/3rdparty/signaling/main.go
vendored
|
|
@ -190,10 +190,16 @@ func main() {
|
|||
var self *Participant
|
||||
go func() {
|
||||
<-ctx.Done()
|
||||
if self != nil {
|
||||
if self == nil {
|
||||
return
|
||||
}
|
||||
|
||||
// Notify other peers that we're quiting.
|
||||
// @remark The ctx(of self) is done, so we must use a new context.
|
||||
go self.Room.Notify(context.Background(), self, "leave", "", "")
|
||||
|
||||
self.Room.Remove(self)
|
||||
logger.Tf(ctx, "Remove client %v", self)
|
||||
}
|
||||
}()
|
||||
|
||||
inMessages := make(chan []byte, 0)
|
||||
|
|
|
|||
16
trunk/3rdparty/signaling/www/demos/index.html
vendored
16
trunk/3rdparty/signaling/www/demos/index.html
vendored
|
|
@ -7,7 +7,19 @@
|
|||
<body>
|
||||
<h3><a href="https://github.com/ossrs/signaling">Signaling</a> works!</h3>
|
||||
<p>
|
||||
Run demo for <a href="one2one.html?autostart=true">WebRTC: One to One over SFU(SRS)</a><br/>
|
||||
点击进入<a href="one2one.html?autostart=true">SRS一对一通话演示</a>
|
||||
Run demo for <a class="srs_demo" href="one2one.html?autostart=true">WebRTC: One to One over SFU(SRS)</a><br/>
|
||||
点击进入<a class="srs_demo" href="one2one.html?autostart=true">SRS一对一通话演示</a>
|
||||
</p>
|
||||
<p>
|
||||
Run demo for <a class="srs_demo" href="room.html?autostart=true">WebRTC: Video Room over SFU(SRS)</a><br/>
|
||||
点击进入<a class="srs_demo" href="room.html?autostart=true">SRS多人通话演示</a>
|
||||
</p>
|
||||
<script>
|
||||
let roomName = new Date().getTime().toString(16).substr(3);
|
||||
let elems = document.getElementsByClassName('srs_demo');
|
||||
for (var i = 0; i < elems.length; i++) {
|
||||
let elem = elems.item(i);
|
||||
elem.setAttribute('href', elem.getAttribute('href') + '&room=' + roomName);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -114,6 +114,7 @@ function SrsRtcSignalingParse(location) {
|
|||
autostart = autostart && autostart.split('&')[0] === 'true';
|
||||
|
||||
// Remove data in query.
|
||||
let rawQuery = query;
|
||||
if (query) {
|
||||
query = query.replace('wss=' + wsSchema, '');
|
||||
query = query.replace('wsh=' + wsHost, '');
|
||||
|
|
@ -128,7 +129,7 @@ function SrsRtcSignalingParse(location) {
|
|||
query = query.replace('&&', '&');
|
||||
}
|
||||
query = query.replace('?&', '?');
|
||||
if (query.lastIndexOf('?') == query.length - 1) {
|
||||
if (query.lastIndexOf('?') === query.length - 1) {
|
||||
query = query.substr(0, query.length - 1);
|
||||
}
|
||||
}
|
||||
|
|
@ -137,7 +138,7 @@ function SrsRtcSignalingParse(location) {
|
|||
wsHost = wsPort? wsHost.split(':')[0] + ':' + wsPort : wsHost;
|
||||
|
||||
return {
|
||||
query: query, wsSchema: wsSchema, wsHost: wsHost, host: host,
|
||||
query: query, rawQuery: rawQuery, wsSchema: wsSchema, wsHost: wsHost, host: host,
|
||||
room: room, display: display, autostart: autostart,
|
||||
};
|
||||
}
|
||||
|
|
|
|||
28
trunk/3rdparty/signaling/www/demos/one2one.html
vendored
28
trunk/3rdparty/signaling/www/demos/one2one.html
vendored
|
|
@ -15,15 +15,16 @@
|
|||
<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'/>
|
||||
<img src='https://ossrs.net/gif/v1/sls.gif?site=ossrs.net&path=/player/one2one'/>
|
||||
<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">
|
||||
<ul class="nav srs_nav">
|
||||
<li class="active"><a href="#">一对一通话</a></li>
|
||||
<li>
|
||||
<li><a href="room.html">多人通话</a></li>
|
||||
<li class="srs_ignore">
|
||||
<a href="https://github.com/ossrs/signaling">
|
||||
<img alt="GitHub Repo stars" src="https://img.shields.io/github/stars/ossrs/signaling?style=social">
|
||||
</a>
|
||||
|
|
@ -64,6 +65,8 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<label></label>
|
||||
|
||||
<div class="accordion">
|
||||
<div class="accordion-group">
|
||||
<div class="accordion-heading">
|
||||
|
|
@ -109,15 +112,17 @@
|
|||
sig = new SrsRtcSignalingAsync();
|
||||
sig.onmessage = function (msg) {
|
||||
console.log('Notify: ', msg);
|
||||
|
||||
if (msg.event === 'publish') {
|
||||
msg.participants.forEach(function (participant) {
|
||||
if (participant.display === display || !participant.publishing) return;
|
||||
startPlay(host, room, participant.display);
|
||||
});
|
||||
} else if (msg.event === 'control') {
|
||||
if (msg.peer && msg.peer.publishing && msg.peer.display !== display) {
|
||||
startPlay(host, room, msg.peer.display);
|
||||
}
|
||||
}
|
||||
|
||||
if (msg.event === 'control') {
|
||||
if (msg.param === 'refresh') {
|
||||
setTimeout(function () {
|
||||
window.location.href = window.location.href;
|
||||
window.location.reload();
|
||||
}, 500);
|
||||
} else if (msg.param === 'alert') {
|
||||
alert('From ' + msg.peer.display + ': ' + msg.data);
|
||||
|
|
@ -227,6 +232,11 @@
|
|||
});
|
||||
$('#ff_preview').attr('href', 'http://ossrs.net/players/srs_player.html?app=' + $('#txt_room').val() + '&stream=merge.flv&server=' + conf.host + '&vhost=' + conf.host + '&autostart=true');
|
||||
|
||||
// Update href for all navs.
|
||||
$('ul.srs_nav').children('li').not('.srs_ignore').children('a').not("[href='#']").each(function (i, e) {
|
||||
$(e).attr('href', $(e).attr('href') + conf.rawQuery);
|
||||
});
|
||||
|
||||
$("#btn_start").click(startDemo);
|
||||
if (conf.autostart) {
|
||||
startDemo();
|
||||
|
|
|
|||
212
trunk/3rdparty/signaling/www/demos/room.html
vendored
Normal file
212
trunk/3rdparty/signaling/www/demos/room.html
vendored
Normal file
|
|
@ -0,0 +1,212 @@
|
|||
<!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/room'/>
|
||||
<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 srs_nav">
|
||||
<li><a href="one2one.html">一对一通话</a></li>
|
||||
<li class="active"><a href="#">多人通话</a></li>
|
||||
<li class="srs_ignore">
|
||||
<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 srs_players">
|
||||
<div class="span4 hide" id="publisher">
|
||||
<label></label>
|
||||
<video id="rtc_media_publisher" width="310" autoplay muted controls></video>
|
||||
|
||||
<label></label>
|
||||
<span id='self'></span>
|
||||
</div>
|
||||
<div class="span4 hide" id="player">
|
||||
<label></label>
|
||||
<video id="rtc_media_player" width="310" autoplay muted controls></video>
|
||||
|
||||
<label></label>
|
||||
<span id='peer'></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
var sig = null;
|
||||
var publisher = null;
|
||||
var players = {}; // Key is display, value is a player object.
|
||||
$(function(){
|
||||
console.log('?wss=x to specify the websocket schema, ws or wss');
|
||||
console.log('?wsh=x to specify the websocket server ip');
|
||||
console.log('?wsp=x to specify the websocket server port');
|
||||
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);
|
||||
|
||||
// Subscribe if new user start to publish.
|
||||
if (msg.event === 'publish') {
|
||||
if (msg.peer && msg.peer.publishing && msg.peer.display !== display) {
|
||||
startPlay(host, room, msg.peer.display);
|
||||
}
|
||||
}
|
||||
|
||||
// Remove dead players.
|
||||
if (msg.event === 'join' || msg.event === 'leave') {
|
||||
$.each(players, function(k, obj) {
|
||||
let stillAlive = false;
|
||||
msg.participants.forEach(function (participant) {
|
||||
if (participant.display === k) stillAlive = true;
|
||||
});
|
||||
|
||||
if (!stillAlive) {
|
||||
obj.player.close();
|
||||
obj.ui.remove();
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
await sig.connect(conf.wsSchema, conf.wsHost, room, display);
|
||||
|
||||
let r0 = await sig.send({action:'join', room:room, display:display});
|
||||
console.log('Signaling: join ok', r0);
|
||||
|
||||
// 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) {
|
||||
$(".ff_first").each(function(i,e) {
|
||||
$(e).text(display);
|
||||
});
|
||||
|
||||
var url = 'webrtc://' + host + '/' + room + '/' + display + conf.query;
|
||||
$('#rtc_media_publisher').show();
|
||||
$('#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: ' + url);
|
||||
}).catch(function (reason) {
|
||||
publisher.close();
|
||||
$('#rtc_media_publisher').hide();
|
||||
console.error(reason);
|
||||
});
|
||||
};
|
||||
|
||||
var startPlay = function (host, room, display) {
|
||||
$(".ff_second").each(function(i,e) {
|
||||
$(e).text(display);
|
||||
});
|
||||
|
||||
// Remove exists.
|
||||
if (players[display]) {
|
||||
players[display].ui.remove();
|
||||
players[display].player.close();
|
||||
}
|
||||
|
||||
// Clone a player from template.
|
||||
let ui = $('#player').clone().attr('id', 'player-' + display);
|
||||
let video = ui.children('#rtc_media_player');
|
||||
console.log(video.length);
|
||||
let player = new SrsRtcPlayerAsync();
|
||||
|
||||
players[display] = {ui:ui, video:video, player:player};
|
||||
$('.srs_players').append(ui);
|
||||
|
||||
// Start play for this user.
|
||||
var url = 'webrtc://' + host + '/' + room + '/' + display + conf.query;
|
||||
video.show();
|
||||
ui.show();
|
||||
|
||||
player.onaddstream = function (event) {
|
||||
console.log('Start play, event: ', event);
|
||||
video.prop('srcObject', event.stream);
|
||||
};
|
||||
|
||||
player.play(url).then(function(session){
|
||||
ui.children('#peer').text('Peer: ' + url);
|
||||
video.prop('muted', false);
|
||||
}).catch(function (reason) {
|
||||
player.close();
|
||||
video.hide();
|
||||
console.error(reason);
|
||||
});
|
||||
};
|
||||
|
||||
// Pass-by to SRS url.
|
||||
let conf = SrsRtcSignalingParse(window.location);
|
||||
$('#txt_host').val(conf.host);
|
||||
conf.room && $('#txt_room').val(conf.room);
|
||||
$('#txt_display').val(conf.display);
|
||||
|
||||
// Update href for all navs.
|
||||
$('ul.srs_nav').children('li').not('.srs_ignore').children('a').not("[href='#']").each(function (i, e) {
|
||||
$(e).attr('href', $(e).attr('href') + conf.rawQuery);
|
||||
});
|
||||
|
||||
$("#btn_start").click(startDemo);
|
||||
if (conf.autostart) {
|
||||
startDemo();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue