vue摄像头冲突

今天做一个项目,一台设备7个摄像头和高拍仪
获取媒体流:navigator.mediaDevices.getUserMedia() 这个函数必须传入要获取的媒体类型约束,格式为{video:true,audio:true} 返回一个 MediaDtream的Promise对象。经过将媒体类型约束修改为{video: { deviceId: ele.deviceId }}来根据不一样的设备id来获取不一样的媒体流。而后将多个媒体流赋值给多个video标签来渲染就OKapp

<template>
  <div id="app">
    <div class="container"></div>
    <li v-for="(ele,index) in media_List" :key="index">{{ele.label}}</li>
  </div>
</template>

<script>

  export default {
    data() {
      return {
        media_List: []
      };
    },
    async mounted() {
      const audioinput = [], videoinput = [];
      let list = await navigator.mediaDevices.enumerateDevices({video: true, audio: true});
      this.media_List = list;
      const _this = this, container = document.querySelector(".container");
      list.map(async (ele) => {
        if (ele.kind === "audioinput") audioinput.push(ele);
        else if (ele.kind === "videoinput") {
          console.log(ele);
          let config = {
            video: {
              deviceId: ele.deviceId
            }
          };
          let stream = await navigator.mediaDevices.getUserMedia(config);
          let video_tag = document.createElement("video");
          video_tag.autoplay = "autoplay";
          video_tag.srcObject = stream;
          container.append(video_tag);
        }
      });
    }
  };
</script>
<style>
  video {
    width: 500px;
    height: 500px;
    border: 1px solid;
  }
</style>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端段

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值