記一次webRTC本地多攝像頭數據流獲取

主要思路

根據 獲取到的devies列表中將視頻和音頻過濾出來 api: navigator.mediaDevices.enumerateDevices 獲取可枚舉的設備列表

返回值 ：{id:每一個設備的獨立ID,kind:不一樣類型的設備,}

獲取媒體流：navigator.mediaDevices.getUserMedia() 這個函數必須傳入要獲取的媒體類型約束，格式爲{video:true,audio:true} 返回一個 MediaDtream的Promise對象。經過將媒體類型約束脩改爲{video: { deviceId: ele.deviceId }}來根據不一樣的設備id來獲取不一樣的媒體流。而後將多個媒體流賦值給多個video標籤來渲染就OK

<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>

複製代碼