You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
167 lines
6.2 KiB
167 lines
6.2 KiB
9 years ago
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>SimpleWebRTC Demo</title>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h1 id="title">Start a room</h1>
|
||
|
|
<style>
|
||
|
|
.videoContainer {
|
||
|
|
position: relative;
|
||
|
|
width: 200px;
|
||
|
|
height: 150px;
|
||
|
|
}
|
||
|
|
.videoContainer video {
|
||
|
|
position: absolute;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
.volume_bar {
|
||
|
|
position: absolute;
|
||
|
|
width: 5px;
|
||
|
|
height: 0px;
|
||
|
|
right: 0px;
|
||
|
|
bottom: 0px;
|
||
|
|
background-color: #12acef;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<button id="screenShareButton"></button>
|
||
|
|
<p id="subTitle"></p>
|
||
|
|
<form id="createRoom">
|
||
|
|
<input id="sessionInput"/>
|
||
|
|
<button type="submit">Create it!</button>
|
||
|
|
</form>
|
||
|
|
<div class="videoContainer">
|
||
|
|
<video id="localVideo" style="height: 150px;" oncontextmenu="return false;"></video>
|
||
|
|
<div id="localVolume" class="volume_bar"></div>
|
||
|
|
</div>
|
||
|
|
<div id="remotes"></div>
|
||
|
|
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
|
||
|
|
<script src="simplewebrtc.bundle.js"></script>
|
||
|
|
<script>
|
||
|
|
// grab the room from the URL
|
||
|
|
var room = location.search && location.search.split('?')[1];
|
||
|
|
|
||
|
|
// create our webrtc connection
|
||
|
|
var webrtc = new SimpleWebRTC({
|
||
|
|
// the id/element dom element that will hold "our" video
|
||
|
|
localVideoEl: 'localVideo',
|
||
|
|
// the id/element dom element that will hold remote videos
|
||
|
|
remoteVideosEl: '',
|
||
|
|
// immediately ask for camera access
|
||
|
|
autoRequestMedia: true,
|
||
|
|
debug: false,
|
||
|
|
detectSpeakingEvents: true,
|
||
|
|
autoAdjustMic: false
|
||
|
|
});
|
||
|
|
|
||
|
|
// when it's ready, join if we got a room from the URL
|
||
|
|
webrtc.on('readyToCall', function () {
|
||
|
|
// you can name it anything
|
||
|
|
if (room) webrtc.joinRoom(room);
|
||
|
|
});
|
||
|
|
|
||
|
|
function showVolume(el, volume) {
|
||
|
|
if (!el) return;
|
||
|
|
if (volume < -45) { // vary between -45 and -20
|
||
|
|
el.style.height = '0px';
|
||
|
|
} else if (volume > -20) {
|
||
|
|
el.style.height = '100%';
|
||
|
|
} else {
|
||
|
|
el.style.height = '' + Math.floor((volume + 100) * 100 / 25 - 220) + '%';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
webrtc.on('channelMessage', function (peer, label, data) {
|
||
|
|
if (data.type == 'volume') {
|
||
|
|
showVolume(document.getElementById('volume_' + peer.id), data.volume);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
webrtc.on('videoAdded', function (video, peer) {
|
||
|
|
console.log('video added', peer);
|
||
|
|
var remotes = document.getElementById('remotes');
|
||
|
|
if (remotes) {
|
||
|
|
var d = document.createElement('div');
|
||
|
|
d.className = 'videoContainer';
|
||
|
|
d.id = 'container_' + webrtc.getDomId(peer);
|
||
|
|
d.appendChild(video);
|
||
|
|
var vol = document.createElement('div');
|
||
|
|
vol.id = 'volume_' + peer.id;
|
||
|
|
vol.className = 'volume_bar';
|
||
|
|
video.onclick = function () {
|
||
|
|
video.style.width = video.videoWidth + 'px';
|
||
|
|
video.style.height = video.videoHeight + 'px';
|
||
|
|
};
|
||
|
|
d.appendChild(vol);
|
||
|
|
remotes.appendChild(d);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
webrtc.on('videoRemoved', function (video, peer) {
|
||
|
|
console.log('video removed ', peer);
|
||
|
|
var remotes = document.getElementById('remotes');
|
||
|
|
var el = document.getElementById('container_' + webrtc.getDomId(peer));
|
||
|
|
if (remotes && el) {
|
||
|
|
remotes.removeChild(el);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
webrtc.on('volumeChange', function (volume, treshold) {
|
||
|
|
//console.log('own volume', volume);
|
||
|
|
showVolume(document.getElementById('localVolume'), volume);
|
||
|
|
});
|
||
|
|
|
||
|
|
// Since we use this twice we put it here
|
||
|
|
function setRoom(name) {
|
||
|
|
$('form').remove();
|
||
|
|
$('h1').text(name);
|
||
|
|
$('#subTitle').text('Link to join: ' + location.href);
|
||
|
|
$('body').addClass('active');
|
||
|
|
}
|
||
|
|
|
||
|
|
if (room) {
|
||
|
|
setRoom(room);
|
||
|
|
} else {
|
||
|
|
$('form').submit(function () {
|
||
|
|
var val = $('#sessionInput').val().toLowerCase().replace(/\s/g, '-').replace(/[^A-Za-z0-9_\-]/g, '');
|
||
|
|
webrtc.createRoom(val, function (err, name) {
|
||
|
|
console.log(' create room cb', arguments);
|
||
|
|
|
||
|
|
var newUrl = location.pathname + '?' + name;
|
||
|
|
if (!err) {
|
||
|
|
history.replaceState({foo: 'bar'}, null, newUrl);
|
||
|
|
setRoom(name);
|
||
|
|
} else {
|
||
|
|
console.log(err);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
return false;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
var button = $('#screenShareButton'),
|
||
|
|
setButton = function (bool) {
|
||
|
|
button.text(bool ? 'share screen' : 'stop sharing');
|
||
|
|
};
|
||
|
|
webrtc.on('localScreenStopped', function () {
|
||
|
|
setButton(true);
|
||
|
|
});
|
||
|
|
|
||
|
|
setButton(true);
|
||
|
|
|
||
|
|
button.click(function () {
|
||
|
|
if (webrtc.getLocalScreen()) {
|
||
|
|
webrtc.stopScreenShare();
|
||
|
|
setButton(true);
|
||
|
|
} else {
|
||
|
|
webrtc.shareScreen(function (err) {
|
||
|
|
if (err) {
|
||
|
|
setButton(true);
|
||
|
|
} else {
|
||
|
|
setButton(false);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
}
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|