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 相关文章推荐
基于jquery的仿百度的鼠标移入图片抖动效果
Sep 17 Javascript
JS+ACTIVEX实现网页选择本地目录路径对话框
Mar 18 Javascript
artDialog双击会关闭对话框的修改过程分享
Aug 05 Javascript
file控件选择上传文件确定后触发的js事件是哪个
Mar 17 Javascript
JQuery的常用选择器、过滤器、方法全面介绍
May 25 Javascript
JS实现动态增加和删除li标签行的实例代码
Oct 16 Javascript
详解Weex基于Vue2.0开发模板搭建
Mar 20 Javascript
微信小程序之数据缓存的实例详解
Sep 29 Javascript
解决使用layui对select append元素无效或者未及时更新的问题
Sep 18 Javascript
Vue实现图片与文字混输效果
Dec 04 Javascript
vue实现列表滚动的过渡动画
Jun 29 Javascript
React实现阿里云OSS上传文件的示例
Aug 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
php Sql Server连接失败问题及解决办法
2009/08/07 PHP
PHP教程 变量定义
2009/10/23 PHP
详解PHP中strlen和mb_strlen函数的区别
2014/03/07 PHP
PHP使用Memcache时模拟命名空间及缓存失效问题的解决
2016/02/27 PHP
全面了解PHP中的全局变量
2016/06/17 PHP
ThinkPHP删除栏目(实现批量删除栏目)
2017/06/21 PHP
对laravel in 查询的使用方法详解
2019/10/09 PHP
JS 参数传递的实际应用代码分析
2009/09/13 Javascript
jQuery插件-jRating评分插件源码分析及使用方法
2012/12/28 Javascript
setInterval()和setTimeout()的用法和区别示例介绍
2013/11/17 Javascript
JavaScript中双叹号(!!)作用示例介绍
2014/04/10 Javascript
浅谈Javascript Base64 加密解密
2014/12/28 Javascript
Jquery异步提交表单代码分享
2015/03/26 Javascript
jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法
2015/07/27 Javascript
jquery-tips悬浮提示插件分享
2015/07/31 Javascript
高效利用Angular中内置服务$http、$location等
2016/03/22 Javascript
BootStrap select2 动态改变值的方法
2017/02/10 Javascript
jquery ztree实现右键收藏功能
2017/11/20 jQuery
深入浅析Node.js 事件循环、定时器和process.nextTick()
2018/10/22 Javascript
Vue 动态组件components和v-once指令的实现
2019/08/30 Javascript
vue 全局封装loading加载教程(全局监听)
2020/11/05 Javascript
Vue router传递参数并解决刷新页面参数丢失问题
2020/12/02 Vue.js
TensorFlow实现MLP多层感知机模型
2018/03/09 Python
Python使用post及get方式提交数据的实例
2019/01/24 Python
在VS2017中用C#调用python脚本的实现
2019/07/31 Python
python读取多层嵌套文件夹中的文件实例
2020/02/27 Python
Python如何在循环内使用list.remove()
2020/06/01 Python
keras 回调函数Callbacks 断点ModelCheckpoint教程
2020/06/18 Python
shell程序中如何注释
2012/01/28 面试题
Linux如何压缩可执行文件
2014/03/27 面试题
ruby如何进行集成操作?Ruby能进行多重继承吗?
2013/10/16 面试题
应届毕业生的个人自我鉴定
2013/10/24 职场文书
大学生工作推荐信范文
2013/12/02 职场文书
档案保密承诺书
2014/06/03 职场文书
2014年文艺部工作总结
2014/11/17 职场文书
干部外出学习心得体会
2016/01/18 职场文书