使用 Webcam

本來要整理 html 的資料，卻覺得這類型的資料太多也太容易取得，決定改變一下方向，只整理 html 相關比較進階實用的小技巧。 無意間看到一個令人懷念的東西，getUserMedia()，可以在網頁上使用 Webcam ，好幾年前遇到一個專案，需要利用相機功能實做一個類似 AR 的畫面，而那個專案用的是 cordova ，於是查了查資料，就用 getUserMedia 來取得相機畫面當背景，在前面放個箭頭指向目的地的方向，當實作完成後卻發現 Android 4.x 不支援，還好加上 webkit plugin 後就可以了，然而最麻煩的是 IOS 不支援...... 最後只好用 camera preview plugin 來重寫，而後續的又是另一個故事了。 那麼首先先來一個範例 ``` $mmcode(r1) ``` <div class="mmresult r1"> <button style="height:4ch;" id="b071801_idfront">前鏡頭</button> <button style="height:4ch;" id="b071801_idback">後鏡頭</button> <button style="height:4ch;" id="b071801_idstop">stop</button> <button style="height:4ch" id="b071801_idgetpic">抓圖</button> <br> <div id="b071801_ida"> 亮度<input id="b071801_idb" type="range" min="0" max="200" value="100"><br> 對比<input id="b071801_idc" type="range" min="0" max="200" value="100"><br> 飽和<input id="b071801_ids" type="range" min="0" max="400" value="100"><br> </div> <video controls id="b071801_video" playsinline autoplay muted loop>Video stream not available.</video> <br> <img id="b071801_idimg" src=""> <script> $(()=> { let b071801_video=$("#b071801_video")[0]; function stopcam() { try { b071801_video.srcObject.getTracks()[0].stop(); } catch(err){} } function docam(mode) { let fmode; stopcam(); if (!mode) { fmode="user";//前鏡頭 } else { fmode="environment";//後鏡頭 // fmode={ exact: "environment" };//後鏡頭 } navigator.mediaDevices.getUserMedia ( { audio: false, video: { width: { min: 320, ideal: 320, max: 1920 }, height: { min: 240, ideal: 240, max: 1080 }, facingMode: fmode } } ).then(function(stream) { b071801_video.srcObject = stream; b071801_video.play(); }).catch(function(err) { console.log("An error occurred: " + err); }); } $("#b071801_idfront").on("click",function() { docam(0); }) $("#b071801_idback").on("click",function() { docam(1); }) $("#b071801_idstop").on("click",function() { stopcam(); }) $("#b071801_idgetpic").on("click",function() { let ca=$("<canvas></canvas>")[0]; let ct = ca.getContext('2d'); let w=b071801_video.videoWidth; let h=b071801_video.videoHeight; ca.width = w; ca.height = h; ct.drawImage(b071801_video, 0, 0, w, h); let data = ca.toDataURL('image/jpeg'); $("#b071801_idimg").attr("src",data); }) $("#b071801_ida input").on("input",function() { let f="brightness("+$("#b071801_idb").val()+"%) " +"contrast("+$("#b071801_idc").val()+"%) " +"saturate("+$("#b071801_ids").val()+"%) "; $("#b071801_video").css("filter",f); $("#b071801_idimg").css("filter",f); }) }) </script> </div> 程式盡量簡化了，可以設定使用前鏡頭還是後鏡頭，也可以抓圖，而且支援 CSS 的 filter ，利用 CSS 來調整亮度對比飽和。 在 iphone 上，使用 chrome 或 firefox 都沒有問題，而 safari 似忽不支援， 在 MAC 上的 safari 完全正常，Android 上也是完全正常 可以用相機預覽，可以抓圖，基本上就是拍照功能了，也可以即時處理影像，例如辨識條碼或證件號碼之類的，光靠網頁就可以做到很多特別的功能 參考資料：https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia