純JavaScript實現的呼叫裝置攝像頭並拍照的功能

這篇文章本來不在Jerry計劃內的，我們們SAP中國研究院今天已經正式上班了，Jerry也回到工作崗位開始搬磚了。

今天一位同事問我關於本文標題描述的功能如何實現，Jerry在網上隨便搜了一下，類似的例子非常多，這裡隨便找了一個例子做了精簡，方便Jerry以後重用。

其實之前Jerry的文章  只要200行JavaScript程式碼，就能把特斯拉汽車帶到您身邊，裡面使用到的React-Native加上ViroReact的組合，也能實現用JavaScript呼叫手機攝像頭並拍照的功能，不過那個應用是通過React-Native打包生成的原生應用，和本文介紹的例子稍有不同。這篇文章給出的例子是一個執行在瀏覽器裡的純web應用。

先看效果。我已經把這個web應用通過github gh-pages的方式託管到了我在github的個人部落格上，通過以下連結訪問： https://jerrywang-sap.cn/FioriODataTestTool2014/WebContent/099_camera.html

我首先通過膝上型電腦訪問，瀏覽器會彈出視窗詢問使用者是否允許該應用訪問裝置上的攝像頭：

點選允許之後，應用下方區域就會實時顯示我的攝像頭正對著的區域的影象：

點選“拍照”按鈕後，攝像頭顯示的影象就會被固化在該按鈕下方，並且以圖片的方式自動儲存到本地。

在我的三星手機上訪問該連結，首先一樣要授權該應用使用攝像頭：

對準我公司工位上吳脊老師送我的這個吉祥物，一隻種類為哨兵的異形，點選拍照按鈕：

自動生成一張圖片並儲存到手機上：

我的原始碼位置(注意是gh-pages分支)： https://github.com/i042416/FioriODataTestTool2014/tree/gh-pages/WebContent/camera

幾個關鍵的程式碼點

(1) JavaScript之所以通過瀏覽器能夠識別到裝置可用攝像頭(包括可用的音訊輸入和輸出裝置)，是因為現代瀏覽器支援的一組名為WebRTC(Web Real Time Communication，網頁即時通訊)的API. 這個API能幫助Web應用開發人員通過簡單的JavaScript程式設計就能實現功能豐富的實時多媒體應用，而無需學習多媒體的數字訊號處理知識。Web應用的使用者也無需下載額外的外掛。

具體到Jerry例子裡的程式碼，用JavaScript進行裝置可用多媒體裝置的檢測，一行程式碼呼叫就能搞定：

navigator.mediaDevices.enumerateDevices().then(gotDevices).catch(handleError);

這句程式碼前半段navigator.mediaDevices.enumerateDevices()是瀏覽器支援的原生API，這是一個非同步呼叫，返回一個promise物件：

等到該非同步呼叫的結果可供應用程式使用之後，我們通過鏈式呼叫then傳入的回撥函式gotDevices被觸發，輸入的引數就是navigator.mediaDevices.enumerateDevices()呼叫的返回值。在偵錯程式裡看看這個返回值的明細：

從偵錯程式裡得知enumerateDevices這個函式返回了我膝上型電腦上一系列可用的音視訊裝置，這些資訊和我通過作業系統裡看到的裝置資訊一致：

(2) 我的html頁面裡定義了一個HTML5原生支援的video標籤, 用於顯示通過裝置攝像頭觀察到的影象。

但是我們還需要把裝置攝像頭同這個video標籤關聯起來。方式是給這個標籤的dom物件的srcObject屬性賦一個MediaStream(媒體資料流)物件。

這個MediaStream物件從哪裡來？同理，通過鏈式呼叫navigator.mediaDevices.getUserMedia(constraints)得到：

(3) 點選拍照按鈕後，自動生成圖片並下載到本地的功能在按鈕的click事件響應函式裡實現。首先呼叫canvas標籤對應Context的API drawImage將顯示攝像頭內容的video標籤當前顯示的內容繪製到canvas標籤頁上，然後用此內容生成格式為jpeg的圖片，下載到本地。

明天Jerry會繼續分享SAP雲平臺相關的內容，敬請期待。

要獲取更多Jerry的原創文章，請關注公眾號"汪子熙":

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/24475491/viewspace-2659673/，如需轉載，請註明出處，否則將追究法律責任。