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
  • 2
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值