js 呼叫攝像頭實現拍照
阿新 • • 發佈：2021-09-19
mediaDevices getUserMedia
呼叫攝像頭
核心方法
Window.navigator.mediaDevices.getUserMedia()
Window.navigator 會返回一個 Navigator 物件的引用，可以用於請求運行當前程式碼的應用程式的相關資訊。
navigator.mediaDevices該物件提供訪問連線媒體輸入的裝置，如照相機和麥克風，以及螢幕共享等。它可以使你取得任何硬體資源的媒體資料。
getUserMedia(constraints) 會提示使用者給予使用媒體輸入的許可，媒體輸入會產生一個MediaStream，裡面包含了請求的媒體型別的軌道。此流可以包含一個視訊軌道、一個音訊軌道，也可能是其它軌道型別。
navigator
mediaDevices 詳細說明 MDN-mediaDevicesgetUserMedia 詳細說明MDN-getUserMedia
let constraints={ audio: false, //音訊軌道 video: true //視訊軌道 } let mediaPromise = navigator.mediaDevices.getUserMedia(constraints); mediaPromise..then(function(stream) { /* 使用這個stream stream */ }) .catch(function(err) { /* 處理error */ });
介面展示攝像頭錄製的資訊，介面中需要新增 video標籤，將獲取到的 stream 賦值到 video 中；
let constraints={ audio: true, //音訊軌道 video: true //視訊軌道 }; let srcVideo=document.querySelector('video.src-video'); let mediaPromise = navigator.mediaDevices.getUserMedia(constraints); mediaPromise..then(function(stream) { /* 使用這個stream stream */ srcVideo.srcObject=stream; srcVideo.play(); }) .catch(function(err) { /* 處理error */ });
拍照
拍照實現邏輯
- 獲取
srcVideo元素，獲取需要拍照的資料；- 獲取
canvas元素，根據srcVideo中的資料進行圖片繪製ctx.drawImage()；- 將
canvas繪製的圖片資訊，展示在img標籤中；
// 獲取 `srcVideo`元素，獲取需要拍照的資料；
let srcVideo=document.querySelector('video.src-video');
let canvas = document.getElementById('canvas');
//獲取 `canvas`元素，根據`srcVideo`中的資料進行圖片繪製 `ctx.drawImage()`；
let ctx = canvas.getContext('2d');
ctx.drawImage(srcVideo, 0, 0, 500, 500);
//將 `canvas`繪製的圖片資訊，展示在 `img`標籤中；
let photo=document.querySelector('img.photo');
photo.src=canvas.toDataURL();
拍照完整程式碼
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>拍照</title>
</head>
<body>
<button onclick="openMedia()" >開啟攝像頭</button>
<button onclick="takePhoto()" >拍照</button><br/><br/>
<video style="display: none;" class="src-video" width="500px" height="500px" autoplay="autoplay"></video>
<canvas id="canvas" width="500px" height="500px" style="display: none;"></canvas>
<img src="" alt="" class="photo">
</body>
<script>
let srcVideo = document.querySelector('video.src-video');
let mediaStream;
let photo=document.querySelector('img.photo');
// 開啟攝像頭
let openMedia = function () {
photo.src='';
srcVideo.style.display='block';
let constraints = {
audio: false, //音訊軌道
video: {width:500,height:500} //視訊軌道
}
let mediaPromise = navigator.mediaDevices.getUserMedia(constraints);
mediaPromise.then(function (stream) {
/* 使用這個stream stream */
mediaStream=stream;
srcVideo.srcObject = stream;
srcVideo.play();
}).catch(function (err) {
/* 處理error */
alert(err);
});
};
// 拍照
let takePhoto=function(){
let canvas = document.querySelector('#canvas');
//獲取 `canvas`元素，根據`srcVideo`中的資料進行圖片繪製 `ctx.drawImage()`；
let ctx = canvas.getContext('2d');
ctx.drawImage(srcVideo, 0, 0, 500, 500);
//將 `canvas`繪製的圖片資訊，展示在 `img`標籤中；
photo.src=canvas.toDataURL();
closeMedia();
};
// 關閉攝像頭
let closeMedia=function(){
mediaStream.getTracks().forEach(track => {
track.stop();
});
srcVideo.style.display='none';
}
</script>
</html>