Kennt jemand ein gutes Tutorial für ein WebRTC/getUserMedia API-Skript, das es möglich ist, zwei Benutzer mit einer Webcam verbinden zu lassen?Tutorial für WebRTC/getUserMedia API - mehrere Cams
Ein richtiges Beispiel sollte Chatroulette sein, nur muss es nicht so groß sein. Und es sollte möglich sein, es auf dem localhost zu erstellen.
Hoffe, dass mir jemand helfen kann!
Sie haben eine exampke eines Chat hier https://github.com/twelephone/rtcroulette
Um mehrere Kameras einen Blick auf diese https://simpl.info/getusermedia/sources/
Verwenden SimpleWebRTC mit Signalling server zu erreichen Ihr Ziel zu verwenden. Weitere Informationen finden Sie unter main site
Sie benötigen nodejs, um den Signalisierungsserver auszuführen, oder Sie können simplewebrtc signalling server zu Testzwecken verwenden.
Bildschirmsharing funktioniert jedoch nur auf HTTPS.
Arbeiten 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.com/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>
Ich habe a longer WebRTC tutorial geschrieben, die Sie durch alle notwendigen Schritte führt Ihre ganz eigene, einfache Videoapplication zu schaffen, einschließlich der Signalisierung. Ich bin nicht schockiert von der Länge, ich habe eine Menge Code-Beispiele darin eingefügt. Auch die Seite, die @bwtrent bereits erwähnt hat, hat mir sehr geholfen.
+1 das ist eine gute Antwort und funktionierte für mich – Muath