【发布时间】：2014-04-16 07:53:44
【问题描述】：
有没有人知道一个很好的 WebRTC / getUserMedia API 脚本教程，可以让两个用户通过网络摄像头相互连接？
一个合适的例子应该是Chatroulette，只是它不需要那么大。并且应该可以在 localhost 上创建它。
希望有人能帮帮我！
【问题讨论】：
标签： javascript webrtc getusermedia
【发布时间】：2014-04-16 07:53:44
【问题描述】：
使用SimpleWebRTC 和Signalling server 来实现您的目标。更多信息请访问main site
您将需要 nodejs 来运行信号服务器，或者您可以使用 simplewebrtc signalling server 进行测试。
但屏幕共享仅适用于 HTTPS。
工作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>
【讨论】：
我写了a longer WebRTC tutorial，它指导您完成所有必要的步骤来创建您自己的简单视频应用程序，包括信号。不要被篇幅吓到，我在里面放了很多代码示例。另外，@bwtrent 已经提到的网站对我帮助很大。
【讨论】：
你有一个聊天的例子https://github.com/twelephone/rtcroulette
要使用多个摄像头，请查看这个https://simpl.info/getusermedia/sources/
【讨论】：
我不了解整个 webrtc，但我知道 1 行上的一个可怕的技巧请求访问：
var getUserMedia = navigator.mediaDevices.getUserMedia({video: true, audio:true})
【讨论】：
Ant Media Server 是一个开源软件，您可以在其中查看 webRTC 页面的示例。对于 webRTC 示例页面，请参阅； https://github.com/ant-media/StreamApp/tree/master/src/main/webapp
【讨论】：