Vue 控制多个摄像头拍照

1. 文档目录

.
├── app.js
├── css
│   └── index.css
├── index.html
└── scss
    └── index.scss

2. 源码

js

// app.js
var app = new Vue({
   
    el: '#app',
    data: {
   
        cameraList: [],
        myCanvas: null,
        myContext: null
    },
    methods: {
   
        main () {
   
            this.myCanvas = document.getElementById('canvas')
            this.myContext = this.myCanvas.getContext('2d')
            this.cameraList.forEach((camera, index) => {
   
                let domId = `video${
     index}`
                let video = document.getElementById(domId)
                this.enableCamera(camera.id, video)
            })
        },

        /** @desc 摄像头使能封装 */
        enableCamera (deviceId, video) {
   
            this.getUserMedia(this.setConstraints(deviceId), (stream) => {
   
                video.srcObject = stream;
                video.onloadedmetadata = (e) => {
   
                    video.play()
                }
            }, error => {
   
                console.log(`访问用户媒体设备失败${
     error.name}, ${
     error.message}`)
            })
        }<