【WebRTC】第三篇：获取视频中的图片
上一篇【WebRTC】第二篇：采集音视频数据实现了通过调用本地摄像头和麦克风获取音视频数据，这一篇内容，是在这个基础上实现从采集的视频流中获取图片，就类似于照相机一样。
获取视频中的图片需要用到html5中的一个绘制图形的标签<canvas>。
<canvas>标签只是图形容器必须使用脚本来绘制图形。
目前IE 9、Firefox、Opera、Chrome 和 Safari等浏览器均支持 <canvas> 标签。
说明一点，我不是专门做前端的，然后可能界面什么的也比较丑，大家就请多担待
下面直接进入正题，上代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>WebRTC学习</title> </head> <body> <!-- autoplay属性表示视频流字节处理完后会自动播放 --> <video autoplay playsinline></video> <div> <button id="capture">拍照</button> </div> <div> <canvas id="canvas"></canvas> </div> </body> <script type="text/javascript"> var video = document.querySelector('video'); if(!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia()){ console.log("您的浏览器不支持getUserMedia") }else { var constraints = { audio: false, video: true } navigator.mediaDevices.getUserMedia(constraints) .then(function(stream){ video.srcObject = stream; }) .catch(function(err) { console.log(err.name + ": " + err.message); }); } var capture = document.getElementById('capture'); var canvas = document.getElementById('canvas'); canvas.width = 320; canvas.height = 240; capture.onclick = function() { canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height); } </script> </html>
运行效果
上面那个是从本机摄像头采集到的视频，底下就是获取到的一张图片。
然后到这，其实还可以自己加一些滤镜
代码如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>WebRTC学习</title> <!--<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>--> <style type="text/css"> .none { -webkit-filter: none; } .blur { -webkit-filter: blur(3px); } .grayscale { -webkit-filter: grayscale(1) } .invert { -webkit-filter: invert(1) } .sepia { -webkit-filter: sepia(1) } </style> </head> <body> <!-- autoplay属性表示视频流字节处理完后会自动播放 --> <video autoplay playsinline></video> <div> <label>fliter：</label> <select id="fliter"> <option id="none">none</option> <option id="blur">blur</option> <option id="grayscale">grayscale</option> <option id="invert">invert</option> <option id="sepia">sepia</option> </select> <button id="capture">拍照</button> </div> <div> <canvas id="canvas"></canvas> </div> </body> <script type="text/javascript"> var video = document.querySelector('video'); if(!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia()){ console.log("您的浏览器不支持getUserMedia") }else { var constraints = { audio: false, video: true } navigator.mediaDevices.getUserMedia(constraints) .then(function(stream){ video.srcObject = stream; }) .catch(function(err) { console.log(err.name + ": " + err.message); }); } var filters = document.getElementById('fliter'); filters.onchange = function(){ video.className = filters.value; } var capture = document.getElementById('capture'); var canvas = document.getElementById('canvas'); canvas.width = 320; canvas.height = 240; capture.onclick = function() { canvas.className = filters.value; canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height); } </script> </html>
运行效果
今天的内容就到这里啦
最后欢迎大家关注我的公众号，一起学习
