Vue 控制多个摄像头拍照

最新推荐文章于 2025-02-27 00:30:00 发布

原创

最新推荐文章于 2025-02-27 00:30:00 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js

这篇博客详细介绍了如何使用Vue.js来控制多个摄像头进行拍照。内容包括源码的JavaScript、HTML和CSS部分，同时强调了浏览器兼容性和部署时需要注意的问题，如Safari仅支持外接摄像头以及必须在HTTPS或localhost环境下运行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue 控制多个摄像头拍照

- 1. 文档目录
- 2. 源码
- - js
  - html
  - css
- 3. 注意点

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}`)
            })