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>
效果图
相关注释代码里有，可以参考，如有问题可以在评论区留言。