【譯】如何使用Vue捕獲網絡攝像頭視頻

時間 2019-12-10

原文原文鏈接

幾個月前，我一直關注着比特幣的爆發而且在GDAX網站上註冊帳號。在註冊驗證的過程當中，網站提示要經過計算機的網絡攝像頭提交我本身的一張照片做爲照片ID。這是一個很酷的作法，讓我思考一個問題：在網絡瀏覽器上集成網絡攝像頭使用須要怎麼作？vue

事實上，有一些HTML5的API可用於經過JavaScript與網絡攝像頭進行交互。webpack

下面，咱們來看下如何建立一個VueJS的Web應用，在Web瀏覽器上經過網絡攝像頭直接捕獲。git

使用Vue CLI建立Vue項目

爲了使項目更易於的理解，咱們將從頭開始搭建項目。爲方便起見，咱們使用Vue CLI腳手架來構建項目。（安裝Vue CLI 詳見官網）github

安裝好CLI以後，執行如下命令：web

vue init webpack camera-project

在腳手架處理的過程當中會提示一些問題。對於這個特別的項目，若是你選擇了包含編譯器和運行時或只有運行時，都無關重要。咱們不會建立多個組件，因此路由對於這個項目不是必要的。vue-cli

此時，咱們能夠開始開發應用了。數據庫

爲圖像捕獲編寫應用邏輯和接口

對於這個特定的項目，咱們有一些目標。咱們但願可以把網絡攝像頭流傳輸到UI而且按需捕獲幀。下面是一張咱們所但願實現的功能的截圖。
canvas

每次咱們捕獲一張圖片，將會加到下面小的列表中。若是有須要，咱們能夠經過HTTP API將捕獲圖片發送到數據庫。
因此，咱們要怎麼實現這些項目的目標？數組

打開項目的src/App.vue文件，加入如下內容開始：瀏覽器

<template>
    <div id="app">
    </div>
</template>

<script>
    export default {
        name: 'app',
        data() {
            return {
                video: {},
                canvas: {},
                captures: []
            }
        },
        mounted() { },
        methods: { }
    }
</script>

<style>
    body: {
        background-color: #F0F0F0;
    }
    #app {
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
    }
    #video {
        background-color: #000000;
    }
    #canvas {
        display: none;
    }
    li {
        display: inline;
        padding: 5px;
    }
</style>

該template塊暫時先保留爲空。相反，咱們先看看script標籤部分的內容。
咱們須要初始化一些用於UI的變量，這能夠經過data方法完成。video變量將綁定到一個video元素，canvas變量將綁定到一個canvas元素，而captures數組則用於存儲已捕獲的圖像列表。

mouted方法將會在應用加載完使觸發調用。此方法內容以下：

mounted() {
    this.video = this.$refs.video;
    if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
        navigator.mediaDevices.getUserMedia({ video: true }).then(stream => {
            this.video.src = window.URL.createObjectURL(stream);
            this.video.play();
        });
    }
},

咱們須要和UI中的HTML元素進行交互，可使用Vue.js的refs，而不是試圖直接訪問DOM。你將會很快看到，但HTML元素將會有ref屬性，值爲video。

一旦咱們獲取了元素的引用，就能夠檢測來確保該值是否支持媒體捕獲。若是支持媒體捕獲，咱們將能夠從網絡攝像頭獲取流並把流加載到HTML Video元素中。

事實上，以上代碼的靈感來自David Walsh的教程，使用HTML5控制攝像頭和視頻，我只是用refs和Vue改寫了。

下面來到咱們的methods中，將會有一個capture方法，代碼以下：

methods: {
    capture() {
        this.canvas = this.$refs.canvas;
        var context = this.canvas.getContext("2d").drawImage(this.video, 0, 0, 640, 480);
        this.captures.push(canvas.toDataURL("image/png"));
    }
}

一樣地，咱們將refs用於HTML元素，一旦咱們得到了canvas元素的引用，就能夠得到Video元素的圖像，將其轉換成一張圖片，而且放到captures數組中。

那麼，與JavaScript邏輯對應的HTML是怎麼樣的？
在項目的src/App.vue文件中，咱們來看下template塊的內容：

<template>
    <div id="app">
        <div><video ref="video" id="video" width="640" height="480" autoplay></video></div>
        <div><button id="snap" v-on:click="capture()">Snap Photo</button></div>
        <canvas ref="canvas" id="canvas" width="640" height="480"></canvas>
        <ul>
            <li v-for="c in captures">
                <img v-bind:src="c" height="50" />
            </li>
        </ul>
    </div>
</template>

還記得以前提到過的refs嗎？這就是分配的地方

<div>
    <video ref="video" id="video" width="640" height="480" autoplay></video>
</div>

video標籤有ref="video"，一樣canvas標籤也相似。

當按鈕按下時，該capture方法會調用。captures變量循環遍歷，每張圖片渲染到屏幕上。
還能夠，對吧？

結論

剛剛瞭解瞭如何使用Vue.js Web應用程序中的Web瀏覽器從Web攝像頭捕獲圖像。大多數繁重的工做都是經過HTML5 JavaScript API完成的，但Vue.js使得事情變得很是簡單。
在這篇特定的文章中使用了一些重要的Vue.js概念。refHTML元素的屬性容許咱們從JavaScript訪問它們。經過v-bind:src在標籤上使用，咱們可以顯示咱們捕獲的圖像。