Record a webRTC local multi-camera data stream acquisition

The main idea

According to obtain a list of the devies in video and audio filter out API: the navigator. MediaDevices. EnumerateDevices access list of devices can be enumerated

Return values: {id: unique ID of each device,kind: different type of device,}

For media streams: the navigator. MediaDevices. GetUserMedia () this function must be introduced into to get the media type constraints, format for {video: true, audio: true} returns a MediaDtream Promise object. Modify the media type constraint to {video: {deviceId: ele. DeviceId}} to obtain different media streams based on different device ids. Then assign multiple media streams to multiple video tags to render

<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>Copy the code