js实现web调用摄像头 js截取视频画面


Posted in Javascript onApril 21, 2019

本文实例为大家分享了JS实现截取视频画面的具体代码,供大家参考,具体内容如下

Html

<p>
 <button onclick="openMedia()">打开</button>
 <button onclick="closeMedia()">关闭</button>
 <button onclick="drawMedia()">截取</button>
</p>
<video id="video" class="bg"></video>
<canvas id="qr-canvas"></canvas>

Javascript

<script type="text/javascript">
 var video = document.querySelector('video');
 var text = document.getElementById('text');
 var canvas1 = document.getElementById('qr-canvas');
 var context1 = canvas1.getContext('2d');
 var mediaStreamTrack;

 // 一堆兼容代码
 window.URL = (window.URL || window.webkitURL || window.mozURL || window.msURL);
 if (navigator.mediaDevices === undefined) {
 navigator.mediaDevices = {};
 }
 if (navigator.mediaDevices.getUserMedia === undefined) {
 navigator.mediaDevices.getUserMedia = function(constraints) {
  var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
  if (!getUserMedia) {
  return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
  }
  return new Promise(function(resolve, reject) {
  getUserMedia.call(navigator, constraints, resolve, reject);
  });
 }
 } 

 //摄像头调用配置
 var mediaOpts = {
 audio: false,
 video: true,
 video: { facingMode: "environment"} // 或者 "user"
 // video: { width: 1280, height: 720 }
 // video: { facingMode: { exact: "environment" } }// 或者 "user"
 }

 // 回调
 function successFunc(stream) {
 mediaStreamTrack = stream;
 video = document.querySelector('video');
 if ("srcObject" in video) {
  video.srcObject = stream
 } else {
  video.src = window.URL && window.URL.createObjectURL(stream) || stream
 }
 video.play();
 }
 function errorFunc(err) {
 alert(err.name);
 }

 // 正式启动摄像头
 function openMedia(){
 navigator.mediaDevices.getUserMedia(mediaOpts).then(successFunc).catch(errorFunc);
 }

 //关闭摄像头
 function closeMedia(){
 mediaStreamTrack.getVideoTracks().forEach(function (track) {
  track.stop();
  context1.clearRect(0, 0,context1.width, context1.height);//清除画布
 });
 }

 //截取视频
 function drawMedia(){
 canvas1.setAttribute("width", video.videoWidth);
 canvas1.setAttribute("height", video.videoHeight);
 context1.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
 }

</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 关闭IE6、IE7
Jun 01 Javascript
javascript 程序库的比较(一)之DOM功能
Apr 07 Javascript
node.js中的url.parse方法使用说明
Dec 10 Javascript
基于jquery实现鼠标滚轮驱动的图片切换效果
Oct 26 Javascript
javascript结合Flexbox简单实现滑动拼图游戏
Feb 18 Javascript
js简单实现调整网页字体大小的方法
Jul 23 Javascript
JavaScript实现图片本地预览功能【不用上传至服务器】
Sep 20 Javascript
JavaScript 保护变量不被随意修改的实现代码
Sep 27 Javascript
Easy UI动态树点击文字实现展开关闭功能
Sep 30 Javascript
layer弹出框确定前验证:弹出消息框的方法(弹出两个layer)
Sep 21 Javascript
VUE单页面切换动画代码(全网最好的切换效果)
Oct 31 Javascript
vue中jsonp插件的使用方法示例
Sep 10 Javascript
今天,小程序正式支持 SVG
Apr 20 #Javascript
详解Vue中组件的缓存
Apr 20 #Javascript
Node.js折腾记一:读指定文件夹,输出该文件夹的文件树详解
Apr 20 #Javascript
优雅地使用loading(推荐)
Apr 20 #Javascript
详解JavaScript的数据类型以及数据类型的转换
Apr 20 #Javascript
详解key在Vue列表渲染时究竟起到了什么作用
Apr 20 #Javascript
函数式编程入门实践(一)
Apr 20 #Javascript
You might like
ThinkPHP连接数据库的方式汇总
2014/12/05 PHP
Yii框架页面渲染操作实例详解
2019/07/19 PHP
js的event详解。
2006/09/06 Javascript
JavaScript-RegExp对象只能使用一次问题解决方法
2014/06/23 Javascript
JS实现弹出居中的模式窗口示例
2016/06/20 Javascript
轻松掌握JavaScript状态模式
2016/09/07 Javascript
详解nodejs微信公众号开发——3.封装消息响应模块
2017/04/10 NodeJs
JavaScript原型继承_动力节点Java学院整理
2017/06/30 Javascript
AngularJS中下拉框的基本用法示例
2017/10/11 Javascript
实例分析JS与Node.js中的事件循环
2017/12/12 Javascript
浅谈Javascript常用正则表达式应用
2019/03/08 Javascript
解决layer.msg 不居中 ifram中的问题
2019/09/05 Javascript
vue制作抓娃娃机的示例代码
2020/04/17 Javascript
微信小程序实现页面左右滑动
2020/11/16 Javascript
Python读取mp3中ID3信息的方法
2015/03/05 Python
python通过ftplib登录到ftp服务器的方法
2015/05/08 Python
使用Python &amp; Flask 实现RESTful Web API的实例
2017/09/19 Python
Python3生成手写体数字方法
2018/01/30 Python
解决pandas .to_excel不覆盖已有sheet的问题
2018/12/10 Python
python英语单词测试小程序代码实例
2019/09/09 Python
浅谈Python type的使用
2019/11/19 Python
Python实现企业微信机器人每天定时发消息实例
2020/02/25 Python
Python列表如何更新值
2020/05/27 Python
Python自动化xpath实现自动抢票抢货
2020/09/19 Python
一篇文章带你搞定Ubuntu中打开Pycharm总是卡顿崩溃
2020/11/02 Python
详解window.open被浏览器拦截的解决方案
2019/07/18 HTML / CSS
Under Armour美国官网:美国知名高端功能性运动品牌
2016/09/05 全球购物
印度最大的旅游网站:MakeMyTrip
2016/10/05 全球购物
关于打架的检讨书
2014/01/17 职场文书
事业单位辞职信范文
2014/01/19 职场文书
电子信息科学专业自荐信
2014/01/30 职场文书
工程类专业自荐信范文
2014/03/09 职场文书
个人廉洁自律承诺书
2014/03/27 职场文书
少先队辅导员事迹材料
2014/12/24 职场文书
2015年教师节慰问信
2015/03/23 职场文书
JVM钩子函数的使用场景详解
2021/08/23 Java/Android