1. 文档目录
.
├── app.js
├── css
│ └── index.css
├── index.html
└── scss
└── index.scss
2. 源码
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)
})
},
enableCamera (deviceId, video) {
this.getUserMedia(this.setConstraints(deviceId), (stream) => {
video.srcObject = stream;
video.onloadedmetadata = (e) => {
video.play()
}
}, error => {
console.log(`访问用户媒体设备失败${
error.name}, ${
error.message}`)
})
}<