Vue中調用攝像頭詳解

一、基於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可以實現更多操作的控制。開發人員可以根據具體的需求選擇合適的方式實現調用攝像頭的功能。