这个功能主要就是从当前采集的视频中截取当前帧，然后将截取的图片绘制在一个canvas上。
首先通过nodejs搭建web服务器，搭建好后将服务启动。然后在public目录下新建一个snapshot目录，在snapshot目录下创建一个index.html文件，代码内容如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>webrtc从视频获取图片</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
</head>
<body>
<!-- playsinline表示直接在浏览器内播放 -->
<video autoplay playsinline id="player"></video>
<!-- 截图按钮 -->
<button id="snapshot">截图</button>
<!-- 展示截图的画布 -->
<div>
<canvas id="picture" width="640" height="480"></canvas>
</div>
<script type="text/javascript" src="js/client.js"></script>
</body>
</html>
然后在snapshot目录下新建一个js目录，在js目录下创建一个client.js文件，代码内容如下：
'use strict'
var player = $("#player")[0];
// 视频截图按钮
var snapshotBtn = $("#snapshot");
var picture = $("#picture")[0];
start();
// 视频截图按钮点击事件
snapshotBtn.click(function(){
// 截取player当前帧，从(0,0)点开始绘制，绘制宽高是画布的宽高
picture.getContext('2d').drawImage(player,0,0,picture.width,picture.height);
});
function start(){
if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
console.log('不支采集音视频数据！');
}else{
// 采集音视频数据
var constrants = {
video:true,
audio:true
};
navigator.mediaDevices.getUserMedia(constrants).then(gotMediaStream).catch(handleError);
}
}
// 采集音视频数据成功时调用的方法
function gotMediaStream(stream){
player.srcObject = stream;
}
// 采集音视频数据失败时调用的方法
function handleError(err){
console.log(err.name+':'+err.message);
}
然后打开浏览器在地址栏输入https://192.168.20.242:8081/snapshot/index.html，如果是第一次运行，会弹出摄像头和麦克风的授权弹框，允许就可以了。然后点击"截图"按钮就会截取视频当前帧的图片在下面的canvas上展现出来。
网友评论