知识点:
H5调用摄像头
获取每帧图像
本课内容:
大家好,欢迎来到谷雨课堂,
前面各节的课程,
我们了解了很多、很杂的知识,
那么将现实中的数据导入到现有系统中,
是非常必要的,
其中视频数据,
可能是重中之重,
那么本节我们就用H5,
也就是网页,
来实现获取摄像头的视频,
本节的程序不需要引用其它任何库或代码,
使用Chrome或Edge本身,
就可以实现这些功能,
首先,
我们要判断一下浏览器是不是支持
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
然后可以就可以愉快的打开摄像头了
navigator.mediaDevices.getUserMedia(constraints)
.then(function(mediaStream) {
//这里的mediaStream就是视频流了
});
然后,
我们在页面里放一个video标签
<video id="video" width="640" height="480" controls autoplay>
最后,把video的视频源设置一下就可以了
var video = document.querySelector('video');
// 赋值 video 并开始播放
video.srcObject = mediaStream;
video.onloadedmetadata = function(e) {
video.play();
};
到现在为止,
已经可以进行视频的实时预览了
下一步,
如何获取视频的每帧的图片呢
我们只需要创建一个canvas标签
<canvas id="canvas" style="width:320px;height:240px;"></canvas>
这个标签非常重要,
无论是Unity还是Three.js在最后,
其实使用的都是canvas,
也是H5的标准之一
到此,
我们已经可以获取到视频的某帧图像了,
下一步如果需要与后台交互,
我们可以用一条语句把图像转为base64的表现形式
const imgsrc = canvas.toDataURL('image/png')
就是这句了
话不多说,
以下是全部代码,
存成HTML直接就可以运行了
<html>
<head>
<title></title>
<meta charset="utf-8">
<script type="text/javascript">
//谷雨课堂
//No.15 在H5调用摄像头并获取视频的每帧图像
// 判断浏览器, 获得用户设备的兼容方法
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
var constraints = { audio: false, video: { width: 1280, height: 720 } };
//调用摄像头
navigator.mediaDevices.getUserMedia(constraints)
.then(function(mediaStream) {
_mediaStream = mediaStream;
console.log("# 初始化 摄像头");
// 成功后获取视频流:mediaStream
var video = document.querySelector('video');
// 赋值 video 并开始播放
video.srcObject = mediaStream;
video.onloadedmetadata = function(e) {
video.play();
};
});
function handleClip () {
const video = document.querySelector('video')
const canvas = document.getElementById('canvas')
canvas.height = video.clientHeight
canvas.width = video.clientWidth
console.log(video.videoHeight, video.videoWidth)
const ctx = canvas.getContext('2d')
ctx.drawImage(video, 0, 0, 640, 480)
const imgsrc = canvas.toDataURL('image/png')
document.querySelector('img').src = imgsrc
document.getElementById('div1').innerHTML=imgsrc;
}
</script>
</head>
<body>
<h2>No.15 在H5调用摄像头并获取视频的每帧图像</h2>
<button onclick="handleClip()">截图</button>
<hr>
<video id="video" width="640" height="480" controls autoplay>
您的浏览器不支持 video 标签。
</video>
<canvas id="canvas" style="width:320px;height:240px;"></canvas>
<img src="" alt="" srcset="" style="width:320px;height:240px;">
<div id="div1" style="width:500px;height:500px;word-wrap: break-word;"></div>
</body>
</html>
完整的源代码可以登录【华纳网】下载。
https://www.worldwarner.com/
免责声明:本文仅代表作者个人观点,与华纳网无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。