今天来介绍一个日常用不到的js技术。虽然说是JS调用摄像头不如说是JS调用浏览器的API根据这个API浏览器去调用系统的摄像头。
官方API
demo例子
<!DOCTYPE html>
<html lang="en">
<head>
<title>JS调用摄像头</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>视频图像区</h2>
<input
type="button"
title="开启摄像头"
value="开启摄像头"
onclick="getMedia()"
/>
<video id="myVideo" autoplay="autoplay"></video>
</div>
<div class="canvasArea">
<h2>拍照成像区</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");
// 保证数据能正常获取
let promise = navigator.mediaDevices.getUserMedia(constraints);
promise.then(function(MediaStream) {
video.srcObject = MediaStream;
video.play();
});
}
constraints对象里面的video控制标签的宽高，audio控制的是麦克风权限
video 获取video标签的元素
promise 保证数据正常获取，至于到底是什么东西，有兴趣的同学可以打印一下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直接打印出来，是不是比较神奇（原理暂时没搞明白）。
结束
今天这篇就比较简单，主要就是用来讲解一下怎么用html调用video。平时也不是很常用，所以有个印象就好，但是用好了可能会有奇效哦～有问题请评论，看到会及时回复。
