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 相关文章推荐
Prototype 学习 Prototype对象
Jul 12 Javascript
javascript string字符串优化问题
Jul 31 Javascript
JavaScript栏目列表隐藏/显示简单实现
Apr 03 Javascript
用Jquery实现滚动新闻
Feb 12 Javascript
jquery判断至少有一个checkbox被选中的方法
Jun 05 Javascript
jQuery实现带延时功能的水平多级菜单效果【附demo源码下载】
Sep 21 Javascript
详解用node-images 打造简易图片服务器
May 08 Javascript
JS对象与JSON互转换、New Function()、 forEach()、DOM事件流等js开发基础小结
Aug 10 Javascript
vuejs实现本地数据的筛选分页功能思路详解
Nov 15 Javascript
开发Vue树形组件的示例代码
Dec 21 Javascript
vue单页缓存方案分析及实现
Sep 25 Javascript
Vue2.0 $set()的正确使用详解
Jul 28 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
建立动态的WML站点(二)
2006/10/09 PHP
解析php框架codeigniter中如何使用框架的session
2013/06/24 PHP
分享下php5类中三种数据类型的区别
2015/01/26 PHP
PHP多维数组遍历方法(2种实现方法)
2015/12/10 PHP
Yii2简单实现多语言配置的方法
2016/07/23 PHP
可兼容php5与php7的cURL文件上传功能实例分析
2018/05/11 PHP
angularjs基础教程
2014/12/25 Javascript
JavaScript中Function详解
2015/02/27 Javascript
Jquery日期选择datepicker插件用法实例分析
2015/06/08 Javascript
用NODE.JS中的流编写工具是要注意的事项
2016/03/01 Javascript
onmouseover事件和onmouseout事件全面理解
2016/08/15 Javascript
jQuery.ajax实现根据不同的Content-Type做出不同的响应
2016/11/03 Javascript
jQuery实现Select下拉列表进行状态选择功能
2017/03/30 jQuery
JS中的数组转变成JSON格式字符串的方法
2017/05/09 Javascript
零基础之Node.js搭建API服务器的详解
2019/03/08 Javascript
Vue2.0+Vux搭建一个完整的移动webApp项目的示例
2019/03/19 Javascript
微信小程序scroll-view的滚动条设置实现
2020/03/02 Javascript
Python中使用pprint函数进行格式化输出的教程
2015/04/07 Python
Python内建数据结构详解
2016/02/03 Python
python3编码问题汇总
2016/09/06 Python
python3实现UDP协议的服务器和客户端
2017/06/14 Python
Flask-Mail用法实例分析
2018/07/21 Python
win10 64bit下python NLTK安装教程
2018/09/19 Python
在django中实现页面倒数几秒后自动跳转的例子
2019/08/16 Python
Python中关于logging模块的学习笔记
2020/06/03 Python
python怎么调用自己的函数
2020/07/01 Python
Python单元测试及unittest框架用法实例解析
2020/07/09 Python
H5新属性audio音频和video视频的控制详解(推荐)
2016/12/09 HTML / CSS
Agoda.com官方网站:便宜预订全球酒店,高达80%的折扣
2018/04/04 全球购物
LN-CC中国:高端男装和女装的奢侈时尚目的地
2019/09/14 全球购物
下面关于"联合"的题目的输出是什么
2013/08/06 面试题
《从现在开始》教学反思
2014/04/15 职场文书
写自招自荐信的绝招!
2019/04/19 职场文书
Flutter集成高德地图并添加自定义Maker的实践
2022/04/07 Java/Android
Java GUI编程菜单组件实例详解
2022/04/07 Java/Android
以MySQL5.7为例了解一下执行计划
2022/04/13 MySQL