Aujourd'hui, je travaille sur un projet. Un appareil dispose de 7 caméras et d'une caméra haute définition
pour obtenir le flux média : navigator.mediaDevices.getUserMedia(). Cette fonction doit passer les contraintes de type média pour être obtenue. Le format est { video:true,audio:true}. Renvoie un objet Promise de MediaDtream. En modifiant la contrainte de type de média en {video : {deviceId : ele.deviceId }}, vous pouvez obtenir différents flux multimédias en fonction de différents ID d'appareil. Attribuez ensuite plusieurs flux multimédias à plusieurs balises vidéo pour afficher 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>