HTML5拍照與攝影機功能實戰詳解

最近在做一個chrome app的雲端相機應用，應用程式包括拍照、相機、儲存照片影片、上傳檔案等等核心功能，其中涉及到許多HTML5對媒體串流相關的API。寫這篇文章的目的，其一是總結梳理知識點，最重要是希望對有相關需求的讀者提供一些指導。

註：本篇文章以實戰為準，理論知識不做過多介紹。

HTML5的getUserMedia API為使用者提供存取硬體設備媒體（相機、視訊、音訊、地理位置等）的接口，基於該接口，開發者可以在不依賴任何瀏覽器插件的條件下存取硬體媒體設備。

瀏覽器相容性如下：

從上圖可以看到，主流瀏覽器Firefox、Chrome、Safari、Opera等等已經全面支援。

 <video id=video autoplay></video> --------------------------------------- ----------------------- const videoConstraints = { width: 1366, height: 768 }; const videoNode = document.querySelector('#video'); let stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: videoConstraints }); videoNode.srcObject = stream; videoNode.play();

 // enumerateDevices取得所有媒體裝置const mediaDevices = await navigator.mediaDevices.enumerateDevices(); // 透過裝置實例king屬性videoinput，過濾取得攝影機裝置const videoDevices = mediaDevices.filter(item => itvidem.kind== 'itvidin. ') || []; // 取得前置鏡頭const videoDeviceId = videoDevices[0].deviceId; const videoConstraints = { deviceId: { exact: videoDeviceId }, width: 1366, height: 768 }; let stream = await navigator.mediaDevices.getUservidia({ audiovidio: trueeo); / 取得後置相機const videoDeviceId = videoDevices[1].deviceId; const videoConstraints = { deviceId: { exact: videoDeviceId }, width: 1366, height: 768 }; let stream = await navigator.Devices.Uservidion ; //依序類推...

 // 透過canvas捕捉video串流，產生base64格式圖片const canvas = document.createElement('canvas'); const context = canvas.getContext('2d'); canvas.width = 1366; canvas.height = 768; context. drawImage(videoNode, 0, 0, canvas.width, canvas.height); download(canvas.toDataURL('image/jpeg')); // 下載圖片function download (src) { if (!src) return; const a = document.createElement('a'); a.setAttribute('download' , new Date()); a.href = src; a.click(); }

 let stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: videoConstraints }); // 3s後關閉攝影機setTimeout(function () { stream.getTracks().forEach(track => track.stop()) ; stream = null; }, 3000);

到此完成簡單的相機拍照功能

攝影基本流程，是錄製一段視訊串流並儲存為音訊視訊檔案。 HTML5 MediaRecorder物件提供了多媒體錄音和錄影功能。

瀏覽器相容性如下：

從上圖所示，瀏覽器對MediaRecorder相容性遠不如getUserMedia，目前只有Chrome、Firefox對MediaRecorder支援較好。

==注意：攝影預覽播放器video標籤要設定靜音muted（消除迴聲導致的刺耳噪音）==

 const videoConstraints = { width: 1366, height: 768 }; let stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: videoConstraints }); let mediaRecorder = new MediaRes( /記錄資料流mediaRecorder.ondataavailable = (e) => { mediaRecorderChunks.push(e.data); }; mediaRecorder.onstop = (e) => { // 透過Blob對象，建立檔案二進位資料實例。 let recorderFile = new Blob(mediaRecorderChunks, { 'type' : mediaRecorder.mimeType }); mediaRecorderChunks = []; const file = new File([this.recorderFile], (new Date).toISOString().replace(/:| /./g, '-') + '.mp4', { type: 'video/mp4' }); download(URL.createObjectURL(file)); // 下載影片function download (src) { if (!src) return; const a = document.createElement('a'); a.setAttribute('download', new Date( )); a.href = src; a.click(); } }; mediaRecorder.stop(); //停止錄製，觸發onstop事件

透過以上實戰，相信讀者已經掌握基礎相機功能，拍照、攝影、儲存檔案等。由於應用項目非個人項目，原始碼不公開，有興趣的朋友，不妨動手一試。