1.第一种
业务逻辑需要人脸验证，需要通过调用摄像头获取人脸来调用接口做对比，所以学习了一下js关于调用摄像头拍照。主要通过video调用摄像头和canvas截取画面。
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
<video width="500" height="500" autoplay class="video"></video>
<canvas width="500" height="500"></canvas>
<button onclick="openx()">调用摄像头</button>
<button onclick="pho()">拍照</button>
<button onclick="exit()">关闭摄像头</button>
</body>
</html>
<script>
let video = document.querySelector('.video');
let canvas = document.querySelector('canvas');
function openx() {
let constraints = {
video: { //这里是摄像头的信息
height: 500,
width: 500
},
// audio: true, //是否开启麦克风
}
let isok = navigator.mediaDevices.getUserMedia(constraints); //这里主要是用于请求用户打开摄像头的权限
isok.then(res => { //可以看出是使用promise封装的 那么我们就可以使用then和catch
video.srcObject = res; //用户允许时 将摄像头对象的画面转移到video上面
video.play(); //打开video的画面
}).catch((err) => {
console.log(err) //拒绝时打印错误信息
})
}
function pho() {
canvas.getContext("2d").drawImage(video, 0, 0, 300, 300); //第一个参数为要截取的dom对象，第二个和第三个为xy轴的偏移值 3-4为截取图像的大小
}
function exit() {
video.srcObject.getTracks()[0].stop(); //这里如果打开了麦克风、getTracks是一个数组，我们同样需要获取下标[1]来关闭摄像头 打开麦克风[0]就是麦克风
}
</script>
View Code
上述代码看起来并不多，包含了打开-截取图像-关闭 摄像头的功能，足以满足功能需求。
https://blog.csdn.net/m0_72436362/article/details/128321359
外接摄像头没错，笔记本的摄像头报错
$("img").css("src", canvas.toDataURL("image/png"));
2.第二种，笔记本的摄像头打开没报错
<!DOCTYPE html>
<html lang="ZH-CN">
<head>
<meta charset="utf-8">
<title>web RTC 测试</title>
<style>
.booth {
width:400px;
background:#ccc;
border: 10px solid #ddd;
margin: 0 auto;
}
</style>
</head>
<body>
<article>
<section>
<video id="video"></video>
</section>
<section>
<audio id="audio"></audio>
</section>
<button id="btn">拍照</button>
<section>
<canvas id="canvas"></canvas>
</section>
<section><img src="" alt="" id="img"></section>
</article>
<article>
<header>相关知识</header>
<h2>获取用户媒体:</h2>
<p>
<code>navigator.mediaDevices.getUserMedia({video: true, audio: true}) // 异步操作</code>
</p>
<h2>枚举媒体数:video,audio输入输出设备</h2>
<p><code>navigator.mediaDevices.enumerateDevices() // 异步操作</code></p>
</article>
<script>
let convas = document.querySelector("#canvas"); //
let video = document.querySelector("#video");
let audio = document.querySelector("audio");
let img = document.querySelector("#img");
let btn = document.querySelector("button");
let context = canvas.getContext('2d');
let width = 320; //视频和canvas的宽度
let height = 0; //
let streaming = false; // 是否开始捕获媒体
// 获取用户媒体,包含视频和音频
navigator.mediaDevices.getUserMedia({video: true, audio: true})
.then(stream => {
video.srcObject = stream; // 将捕获的视频流传递给video 放弃window.URL.createObjectURL(stream)的使用
video.play(); // 播放视频
audio.srcObject = stream;
audio.play();
});
function tackcapture() {
// 需要判断媒体流是否就绪
if(streaming){
context.drawImage(video, 0, 0, 350, 200);// 将视频画面捕捉后绘制到canvas里面
img.src = canvas.toDataURL('image/png');// 将canvas的数据传送到img里
}
}
btn.addEventListener('click',tackcapture,false); // 按钮点击事件
// 监听视频流就位事件,即视频可以播放了
video.addEventListener('canplay', function(ev){
if (!streaming) {
height = video.videoHeight / (video.videoWidth/width);
video.setAttribute('width', width);
video.setAttribute('height', height);
canvas.setAttribute('width', width);
canvas.setAttribute('height', height);
streaming = true;
}
}, false);
</script>
</body>
</html>
View Code
- 有些浏览器可能不支持此功能
- 必须通过服务器打开页面，通过files：//打开无效
- 如果通过远程服务器打开则必须是https协议， http协议也无法使用
转：https://www.cnblogs.com/scarecrowlxb/p/6804747.html
3.第三种
<script src="https://cdn.bootcss.com/zepto/1.2.0/zepto.min.js"></script>
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>使用js调用设备摄像头并实现拍照</title>
<script src="https://cdn.bootcss.com/zepto/1.2.0/zepto.min.js"></script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
video {
width: 200px;
}
button {
width: 100px;
height: 60px;
}
</style>
</head>
<body>
<div class="box">
<video src=""></video> <button class="shot">拍照</button>
<canvas id="canvas"></canvas> <img src="" />
</div>
<a href="https://codesandbox.io/s/811w1z2xwj">点击编辑</a>
<script type="text/javascript">
// 视频大小
var constraints = { audio: true, video: { width: 200, height: 250 } };
// 开启视频
navigator.mediaDevices
.getUserMedia(constraints)
.then(function(mediaStream) {
console.log("getUserMedia:", mediaStream);
var video = document.querySelector("video");
video.srcObject = mediaStream;
video.onloadedmetadata = function(e) {
video.play();
};
// 使用canvas进行拍照
var canvas = document.getElementById("canvas");
$("button").on("click", function() {
canvas.getContext("2d").drawImage(video, 0, 0, 200, 250);
$("img").css("src", canvas.toDataURL("image/png"));
});
})
.catch(function(err) {
console.log(err.name + ": " + err.message);
});
</script>
</body>
</html>
View Code
转：http://www.taodudu.cc/news/show-6195164.html?action=onClick
https://811w1z2xwj.codesandbox.io/
标签：拍照,canvas,js,width,let,video,height,摄像头 From： https://www.cnblogs.com/love201314/p/17631094.html