web呼叫攝像頭拍照
阿新 • • 發佈：2020-06-28
`<!doctype html>
<canvas id="canvas" style="display:none;"></canvas> <script> !(function () { function takePhotos() { if (videoPlaying) { let canvas = document.getElementById('canvas'); canvas.width = v.videoWidth; canvas.height = v.videoHeight; canvas.getContext('2d').drawImage(v, 0, 0); let data = canvas.toDataURL('image/webp'); //base64 //console.log(data); //儲存圖片 //document.getElementById('photo').setAttribute('src', data); document.getElementById('imgList').innerHTML += '<img data-pro="img" src="' + data + '" id="photo" alt="" style="width:70px;height:60px;">'; } } document.onkeydown = function (e) { // 回車提交表單 document.getElementById('take').blur();
// 相容FF和IE和Opera
var theEvent = window.event || e;
var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
if (code == 13) {
takePhotos();
}
}
` 參考了：https://blog.csdn.net/weixin_34100227/article/details/88016462// 老的瀏覽器可能根本沒有實現 mediaDevices，所以我們可以先設定一個空的物件 if (navigator.mediaDevices === undefined) { navigator.mediaDevices = {}; } if (navigator.mediaDevices.getUserMedia === undefined) { navigator.mediaDevices.getUserMedia = function (constraints) { // 首先，如果有getUserMedia的話，就獲得它 var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia; // 一些瀏覽器根本沒實現它 - 那麼就返回一個error到promise的reject來保持一個統一的介面 if (!getUserMedia) { return Promise.reject(new Error('getUserMedia is not implemented in this browser')); } // 否則，為老的navigator.getUserMedia方法包裹一個Promise return new Promise(function (resolve, reject) { getUserMedia.call(navigator, constraints, resolve, reject); }); } } const constraints = { video: true, audio: false }; let videoPlaying = false; let v = document.getElementById('v'); let promise = navigator.mediaDevices.getUserMedia(constraints); promise.then(stream => { // 舊的瀏覽器可能沒有srcObject if ("srcObject" in v) { v.srcObject = stream; } else { // 防止再新的瀏覽器裡使用它，應為它已經不再支援了 v.src = window.URL.createObjectURL(stream); } v.onloadedmetadata = function (e) { v.play(); videoPlaying = true; }; }).catch(err => { console.error(err.name + ": " + err.message); }) document.getElementById('take').addEventListener('click', takePhotos, false); })(); </script>