【原文】https://blog.csdn.net/qq_45021180/article/details/111561634
一、播放本地視頻+截圖
案例一代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo01</title>
</head>
<body>
<video id="myVideo" src="madashuai.mp4" loop="loop" autoplay="autoplay" controls="controls"></video><br>
<button id="snapScreen">截屏</button>
<canvas id="mycanvas" width="400" height="240"></canvas>
</body>
<script>
let mycanvas = document.getElementById('mycanvas').getContext('2d');
let video = document.getElementById('myVideo');
let snapScreen = document.getElementById('snapScreen');
snapScreen.onclick = function () { // 按鈕點擊事件，將
mycanvas.drawImage(video, 0, 0, 400, 240);
}
</script>
</html>
二、電腦攝像頭的調用
實時顯示畫面
案例二代碼：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>攝像頭調用2</title>
</head>
<body>
<video id="v"></video>
</body>
<script>
!(function () {
// 老的瀏覽器可能根本沒有實現 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 promise = navigator.mediaDevices.getUserMedia(constraints);
promise.then(stream => {
let v = document.getElementById('v');
// 舊的瀏覽器可能沒有srcObject
if ("srcObject" in v) {
v.srcObject = stream;
} else {
// 防止再新的瀏覽器里使用它，應為它已經不再支持了
v.src = window.URL.createObjectURL(stream);
}
v.onloadedmetadata = function (e) {
v.play();
};
}).catch(err => {
console.error(err.name + ": " + err.message);
})
})();
</script>
</html>
三、實時視頻+拍照
初始畫面：
拍照：
案例三代碼：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拍照2</title>
</head>
<body>
<button id="button_take">拍照</button><br />
<div style="float: left;width:50%"><video id="v"></video></div>
<canvas id="canvas" style="display:none;"></canvas><br />
<img src="http://placehold.it/640&text=Your%20image%20here%20..." id="photo" alt="photo" style="float: left;">
</body>
<script>
!(function () {
// 老的瀏覽器可能根本沒有實現 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('button_take').addEventListener('click', function () {
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');
document.getElementById('photo').setAttribute('src', data);
// canvas.getContext("2d").drawImage(Img,0,0,width,height); //將圖片繪制到canvas中
}
}, false);
})();
</script>
</html>
————————————————
版權聲明：本文為CSDN博主「戰 勝」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/qq_45021180/article/details/111561634