今天來介紹一個日常用不到的js技術(shù)。雖然說是JS調(diào)用攝像頭不如說是JS調(diào)用瀏覽器的API根據(jù)這個API瀏覽器去調(diào)用系統(tǒng)的攝像頭陆馁。
官方API
demo例子
<!DOCTYPE html>
<html lang="en">
<head>
<title>JS調(diào)用攝像頭</title>
<meta charset="utf-8"/>
<style>
.videoArea {
width: 500px;
height: 500px;
border: 1px solid #ccc;
}
.videoArea > video {
height: 300px;
width: 300px;
}
.canvasArea {
width: 500px;
height: 500px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="videoArea">
<h2>視頻圖像區(qū)</h2>
<input
type="button"
title="開啟攝像頭"
value="開啟攝像頭"
onclick="getMedia()"
/>
<video id="myVideo" autoplay="autoplay"></video>
</div>
<div class="canvasArea">
<h2>拍照成像區(qū)</h2>
<button id="snap" onclick="takePhoto()">拍照</button>
<canvas id="canvas" width="500px" height="500px"></canvas>
</div>
<script>
function getMedia() {
let constraints = {
video: { width: 500, height: 500 },
audio: false
};
let video = document.getElementById("myVideo");
console.log(navigator);
let promise = navigator.mediaDevices.getUserMedia(constraints);
promise.then(function(MediaStream) {
video.srcObject = MediaStream;
video.play();
});
}
function takePhoto() {
//獲得Canvas對象
let video = document.getElementById("myVideo");
let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");
ctx.drawImage(video, 0, 0, 500, 500);
}
</script>
</body>
</html>
注意事項：
- 注意瀏覽器兼容性取刃，我用的chrome( 72.0.3626.121)
- Safari瀏覽器無效（暫時沒有查明原因）
主要代碼代碼講解：
獲取視頻
// 獲得圖像
function getMedia() {
let constraints = {
video: { width: 500, height: 500 },
audio: false
};
// 獲得video元素
let video = document.getElementById("myVideo");
// 保證數(shù)據(jù)能正常獲取
let promise = navigator.mediaDevices.getUserMedia(constraints);
promise.then(function(MediaStream) {
video.srcObject = MediaStream;
video.play();
});
}
constraints對象里面的video控制標簽的寬高，audio控制的是麥克風權(quán)限
video 獲取video標簽的元素
promise 保證數(shù)據(jù)正常獲取，至于到底是什么東西，有興趣的同學可以打印一下MediaStream
打印圖片
function takePhoto() {
//獲得Canvas對象
let video = document.getElementById("myVideo");
let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");
ctx.drawImage(video, 0, 0, 500, 500);
}
ctx.drawImage其實這是canvas打印圖片的api波附，用在這里，可以把video直接打印出來不恭，是不是比較神奇（原理暫時沒搞明白）叶雹。
結(jié)束
今天這篇就比較簡單财饥，主要就是用來講解一下怎么用html調(diào)用video换吧。平時也不是很常用，所以有個印象就好钥星，但是用好了可能會有奇效哦～有問題請評論沾瓦，看到會及時回復。
