WebRTC是一项实时通讯技术,它允许网络应用或者站点,在不借助中间媒介的情况下,建立浏览器之间点对点的连接,实现视频流和音频流或者其他任意数据的传输。WebRTC是浏览器支持,不需要引入任何其他的相关js组件,就可以直接使用。 今天这节讲解在浏览器中做webrtc的第一步,通过;浏览器的API调用摄像头和麦克风将内容显示在div中。将下面的代码复制到html文件中,双击打开,浏览器可能会提示是否允许开启摄像头和麦克风,点击允许,就OK了。下面直接上代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset ="utf-8" />
<title>WebRTC</title>
<style>
video,canvas{
border:1px solid gray;
width:480px;
height:320px
}
</style>
</head>
<body>
<video autoplay></video>
<script>
//判断当前浏览器是否支持webrtc
function hasUserMedia() {
return !!(navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia);
}
if (hasUserMedia()) {
//如果支持webrtc的话就获取到视频语音,并把流数据放到标签video中
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
navigator.getUserMedia({
video: true,//是否开启视频
audio: true //是否开启语音
}, function (stream) {
//将流数据添加到video标签中
var video = document.querySelector('video');
video.srcObject = stream;
}, function (err) {
});
}else{
alert("抱歉,你的浏览器不支持webrtc")
}
</script>
</body>
</html>
效果图 相关注释代码里有,可以参考,如有问题