Node.js 通过https服务器利用js调用网络摄像头

前言

最近写了一个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