解决web页面嵌入多摄像头显示问题

问题描述

  • 当电脑连接有多个摄像头,如果在一个web页面中要同时嵌入显示,该如何实现?

解决方案

  • javascript中有关于媒体的函数 navigator.mediaDevices.enumerateDevices(),使用该函数可以遍历所有连接的可用设备。根据设备名称自行选择,然后将获取的设备在前端页面显示。
  • 下面通过代码具体解释:
 // 获取页面视频元素
    // var videoElement = new Array(2)
    var videoElement = document.getElementById('video');
    var videoElement1 = document.getElementById('video1');
    navigator.mediaDevices.enumerateDevices()
      .then(gotDevices).catch(handleError);

    // 遍历所有的设备,包括视频和音频设备。 找出 RGB相机设备
    function gotDevices(deviceInfos) {
        var constraints = new Array(2);
        var id = 0;
        for (var i = 0; i !== deviceInfos.length; ++i) {
        var deviceInfo = deviceInfos[i];
        if (deviceInfo.kind === 'videoinput') {
            if (deviceInfo.label.search("RGB")
©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页
实付 9.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值