前言
最近写了一个js调用摄像头的代码,整体实现是非常简单,但是放到服务器上,通过外网访问后就会出现一个警告
我们需要通过js调用摄像头,但在此之前我们需要创建一个https服务器。所以,这篇博文就是帮助大家如何通过js 调用PC端的摄像头。
如何通过js调用摄像头
先看一下js调用摄像头的具体实现。
整个实现是基于Google提供的webRTC技术,它主要用来让浏览器实时获取和交换视频、音频和数据。
WebRTC共分三个API。
MediaStream(又称getUserMedia)
RTCPeerConnection
RTCDataChannel
getUserMedia主要用于获取视频和音频信息,后两个API用于浏览器之间的数据交换。
而我们主要了解MediaStream
下面我们直接看代码:
//获取用户设备媒体对象
navigator.getUserMedia({audio:true,video:true},stream => {},err => {});
我们直接通过navigator.getUserMedia方法就可以获取到用户的媒体对象,这个方法有三个参数。
①第一个参数为一个JSON对象,主要为了设置是否获取音频或视频流对象
②获取成功的回调函数,这个回调函数有一个stream参数为获取到的流对象
③出现错误的回调函数,这个回调函数有一个err错误对象
但是现在想让我们的摄像头拍摄到的画面显示出来,我们可以直接通过h5提供的video标签进行加载播放
于是我们可以直接在开头加上video标签,并给它一个id 为rtVideo
<video id="etVideo"></video>
我们不添加它的src属性,而是根据js进行动态赋值。
现在我们开始写获取媒体流成功的回调函数
let onSuccess = stream => {
//获取video的dom对象
let rtVideo = document.getElementById("rtVideo");
//为媒体流创建一个url指向
if(window.URL){
webcam.src = window.URL.createObjectURL(stream);
}
rtVideo.autoplay = true;
}
在上述代码中,由于getUserMedia是异步的,因此,通过getUserMedia获取到的媒体流对象后由事件循环取出,将媒体流对象放入获取成功的回调函数的参数,所以上述的stream参数实质就是我们通过getUserMedia获取到的媒体流对象。
然后我们通过getElementById();获取到了video的dom对象
let rtVideo = document.ge