webRTC是一个无插件就可以在浏览器上视频聊天的技术,是p2p连接。详细的理论可以谷歌一些,自己找一下;
下面就用js的api来调用摄像头本地回显,简单的几句代码,就可以实现,很简单,在谷歌浏览器测试;
必须是支持webrtc的浏览器,还有支持webrtc不同的浏览器可能有些不一样,这里就不多写了,只是命名不同而已
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<div id="container">
<video id="vid1" autoplay width=400></video>
<script>
function gotStream(stream){
vid1.src = webkitURL.createObjectURL(stream);
}
navigator.webkitGetUserMedia({audio:true, video:true},
gotStream, function() {});
</script>
</div>
</body>
</html>
上面我写了一个video标签来显示视频。
执行navigator的webkitGetUserMedia方法,这个方法有3个参数
{audio:true, video:true}是定义获取流,audio表示音频,video表示视频,他们都为true,表示都获取出来
gotStream是回调函数,当获取视频流和音频流成功就执行这个函数,在这个函数中,传递了一个stream对象,用createObjectURL显示在网页上
最后一个也是一个回调函数,当获取流失败的时候自动调用这个。
点击允许使用摄像头
本地显示成功