does anyone know a good tutorial for a WebRTC / getUserMedia API script that is possible to let two users connect to each other with a webcam?
A proper example should be Chatroulette, only it doesn't need to be that big. And it should be possible to create it on the localhost.
Hope anyone can help me out!
does anyone know a good tutorial for a WebRTC / getUserMedia API script that is possible to let two users connect to each other with a webcam?
A proper example should be Chatroulette, only it doesn't need to be that big. And it should be possible to create it on the localhost.
Hope anyone can help me out!
Share Improve this question asked Apr 16, 2014 at 7:53 08462770846277 733 silver badges11 bronze badges5 Answers
Reset to default 4Use SimpleWebRTC with Signalling server to achieve your goal. Find more at main site
You will need nodejs to run the signalling server or you can use simplewebrtc signalling server for testing purposes.
Screensharing works only on HTTPS though.
Working DEMO
<!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;
}
#localScreenContainer {
display: none;
}
</style>
<button id="screenShareButton"></button>
<p id="subTitle">(https required for screensaring to work)</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="localScreenContainer" class="videoContainer">
</div>
<div id="remotes"></div>
<script src="//ajax.googleapis./ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="latest.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('localScreenAdded', function (video) {
console.log('localScreenAdded', video);
video.onclick = function () {
video.style.width = video.videoWidth + 'px';
video.style.height = video.videoHeight + 'px';
};
document.getElementById('localScreenContainer').appendChild(video);
$('#localScreenContainer').show();
});
webrtc.on('localScreenRemoved', function (video) {
console.log('localScreenRemoved', video);
document.getElementById('localScreenContainer').removeChild(video);
$('#localScreenContainer').hide();
});
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('localScreenRemoved', 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>
I have written a longer WebRTC tutorial which guides you through all the neccessary steps to create your very own, simple Videoapplication, including signaling. Don`t be shocked by the length, I put a lot of code examples in it. Also, the site which @bwtrent already mentioned helped me alot.
You have a exampke of a Chatroulette here https://github./twelephone/rtcroulette
To use multiple cameras take a look at this one https://simpl.info/getusermedia/sources/
I don't know the whole webrtc but I know a awsome trick request access on 1 line:
var getUserMedia = navigator.mediaDevices.getUserMedia({video: true, audio:true})
Ant Media Server is an open source software which you can see the examples of webRTC pages in work. For webRTC sample pages see; https://github./ant-media/StreamApp/tree/master/src/main/webapp