js调⽤摄像头实现拍照
调⽤摄像头
核⼼⽅法UserMedia()
Window.navigator会返回⼀个 Navigator 对象的引⽤，可以⽤于请求运⾏当前代码的应⽤程序的相关信息。
getUserMedia(constraints)会提⽰⽤户给予使⽤媒体输⼊的许可，媒体输⼊会产⽣⼀个MediaStream，⾥⾯包含了请求的媒体类型的轨道。此流可以包含⼀个视频轨道、⼀个⾳频轨道，也可能是其它轨道类型。
navigator详细说明
mediaDevices详细说明
getUserMedia详细说明
navigator标签constraints视频轨道的配置说明
let constraints={
audio: false, //⾳频轨道
video: true  //视频轨道
}
let mediaPromise = UserMedia(constraints);
/* 使⽤这个stream stream */
})
.catch(function(err) {
/* 处理error */
});
界⾯展⽰摄像头录制的信息，界⾯中需要添加video标签，将获取到的stream赋值到video中；
let constraints={
audio: true, //⾳频轨道
video: true  //视频轨道
};
let srcVideo=document.querySelector('video.src-video');
let mediaPromise = UserMedia(constraints);
/* 使⽤这个stream stream */
srcVideo.srcObject=stream;
srcVideo.play();
})
.catch(function(err) {
/* 处理error */
});
拍照
拍照实现逻辑
1. 获取srcVideo元素，获取需要拍照的数据；
2. 获取canvas元素，根据srcVideo中的数据进⾏图⽚绘制ctx.drawImage()；
3. 将canvas绘制的图⽚信息，展⽰在img标签中；
// 获取 `srcVideo`元素，获取需要拍照的数据；
let srcVideo=document.querySelector('video.src-video');
let canvas = ElementById('canvas');
//获取 `canvas`元素，根据`srcVideo`中的数据进⾏图⽚绘制 `ctx.drawImage()`；
let ctx = Context('2d');
ctx.drawImage(srcVideo, 0, 0, 500, 500);
//将 `canvas`绘制的图⽚信息，展⽰在 `img`标签中；
let photo=document.querySelector('img.photo');
photo.DataURL();
拍照完整代码
<!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 class="src-video" width="500px" height="500px" autoplay="autoplay"></video>    <canvas id="canvas" width="500px" height="500px" ></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 = UserMedia(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 = Context('2d');
ctx.drawImage(srcVideo, 0, 0, 500, 500);
//将 `canvas`绘制的图⽚信息，展⽰在 `img`标签中；
photo.DataURL();
closeMedia();
};
// 关闭摄像头
let closeMedia=function(){
track.stop();
});
srcVideo.style.display='none';
}
</script>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。