Vue中调用摄像头详解

发布时间：2023-05-20

一、基于HTML5实现摄像头调用

WebRTC是html5提供的一种实现Web实时通信技术的一种方式，其中就包括了js的摄像头API。通过基于HTML5的WebRTC实现摄像头的调用，开发人员可以直接在浏览器中调用摄像头，不需要安装任何插件或软件。以下是基于HTML5实现调用摄像头的代码示例：

navigator.mediaDevices.getUserMedia({
    video: true,
    audio: true
})
.then(function(stream) {
    var video = document.querySelector('video');
    // 旧版浏览器可能没有srcObject
    if ("srcObject" in video) {
        video.srcObject = stream;
    } else {
        // 防止在新的浏览器里使用它，应为它已经不再支持了
        video.src = window.URL.createObjectURL(stream);
    }
    video.onloadedmetadata = function(e) {
        video.play();
    };
})
.catch(function(err) {
    console.log(err.name + ": " + err.message);
});

二、Vue插件vue-web-cam

vue-web-cam是一个Vue.js组件，它可以用于使用WebRTC API捕获照片/视频，同时为您提供了一个创建美丽而干净的相机视图的方法。以下是使用vue-web-cam实现调用摄像头的代码示例：

<template>
  <div>
    <webcam ref="webcam" :height="videoHeight" :width="videoWidth"></webcam>
  </div>
</template>
<script>
import Webcam from 'vue-web-cam';
export default {
  components: {
    Webcam
  },
  data() {
    return {
      videoHeight: 480,
      videoWidth: 640
    };
  },
  mounted() {
    this.$refs.webcam.start()
      .then(() => {
        console.log('webcam started');
      })
      .catch((err) => {
        console.log(err);
        this.$refs.webcam.stop();
      });
  },
  beforeDestroy() {
    this.$refs.webcam.stop();
  }
};
</script>

三、使用第三方插件Vue-Media-Capture

Vue-Media-Capture是一个基于Vue.js的插件，用于捕获照片和视频，包括限制拍摄时间、限制选择类型的功能。以下是使用Vue-Media-Capture实现调用摄像头的代码示例：

<template>
  <div>
    <vue-media-capture v-model="mediaStream" :captureOptions="captureOptions"></vue-media-capture>
  </div>
</template>
<script>
import VueMediaCapture from 'vue-media-capture';
export default {
  components: {
    VueMediaCapture
  },
  data() {
    return {
      mediaStream: null,
      captureOptions: {
        video: { width: 1280, height: 720 },
        audio: true
      }
    };
  }
};
</script>

四、总结

以上三种方法都可以通过Vue.js实现调用摄像头的功能。通过使用HTML5，开发人员可以使用原生js实现调用摄像头；使用Vue插件vue-web-cam能够简化开发；而使用第三方插件Vue-Media-Capture可以实现更多操作的控制。开发人员可以根据具体的需求选择合适的方式实现调用摄像头的功能。

推荐文章