javascript实现摄像头拍照预览


Posted in Javascript onSeptember 30, 2019

使用javascript实现电脑摄像头的打开和截图的功能,供大家参考,具体内容如下

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>摄像头调用实例</title>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript">
 var video, mediaStreamTrack, canvas;//声明全局变量
 //打开摄像头
 function dk() {
  video = document.getElementById("v1");
  var videoObj = {
   "video" : true
  };
  var errBack = function(error) {
   console.log("Video capture error: ", error.code);
  };
  //根据浏览器的不同选取不同的支持
  if (navigator.getUserMedia) { // Standarda
   navigator.getUserMedia(videoObj, function(stream) {
    mediaStreamTrack = typeof stream.stop === 'function' ? stream
      : stream.getTracks()[1];
    video.src = stream;//获取摄像头抓取的到字节流
    video.play();//实时播放摄像头
   }, errBack);
  } else if (navigator.webkitGetUserMedia) { // WebKit-prefixed
   navigator.webkitGetUserMedia(videoObj, function(stream) {
    mediaStreamTrack = typeof stream.stop === 'function' ? stream
      : stream.getTracks()[1];
    video.src = window.webkitURL.createObjectURL(stream);
    video.play();
   }, errBack);
  } else if (navigator.mozGetUserMedia) { // Firefox-prefixed
   navigator.mozGetUserMedia(videoObj, function(stream) {
    mediaStreamTrack = typeof stream.stop === 'function' ? stream
      : stream.getTracks()[1];
    video.src = window.URL.createObjectURL(stream);
    video.play();
   }, errBack);
  }
 }
 //截图
 function jq() {
  canvas = document.getElementById("c1");
  var context = canvas.getContext("2d");
  //将视频当前的页面转换为图片,显示到画板中
  context.drawImage(video, 0, 0, 200, 202);
  //把canvas图像转为img图片
  /* var src = canvas.toDataURL("image/jpeg");
  createImg(src); */
 }
 //关闭摄像头
 function gb() {
  mediaStreamTrack.stop();
 }
 //生成图片
 /* function createImg(src) {
  var dv = document.getElementById("dv1");
  var img = document.createElement("img");
  img.setAttribute("src", src);
  img.setAttribute("width", 205);
  img.setAttribute("height", 205);
  dv.appendChild(img);
 } */
 //上传
 /* function sc() {
  $.post('TestServlet', {
   "img" : canvas.toDataURL().substr(22)
  }, function(data, status) {
   alert(status != "success" ? "图片处理出错!" : data == "yes" ? "图片上传完成!"
     : data);
  });
 } */
</script>
<style type="text/css">
input[type="button"]{
border: 1px solid red;
}
</style>
</head>
<body>
 <div>
  <input type="button" value="打开" onclick="dk()"> 
  <input type="button" value="截取图像" onclick="jq()"> 
  <input type="button" value="关闭" onclick="gb()">
 </div>
 <div>
  <!--视频 -->
  <video width="200px" height="200px" id="v1"></video>
  <br />
  <!--画板 -->
  <canvas id="c1"></canvas>
  <br />
 </div>
 <!--记录每次截图的结果 -->
 <!-- <div id="dv1"></div> -->
</body>
</html>

但是谷歌浏览器可以打开摄像头,无法获取实时数据。火狐比较好用。

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

Javascript 相关文章推荐
javaScript NameSpace 简单说明介绍
Jul 18 Javascript
非html5实现js版弹球游戏示例代码
Sep 22 Javascript
JavaScript中访问节点对象的方法有哪些如何使用
Sep 24 Javascript
js中传递特殊字符(+,&amp;)的方法
Jan 16 Javascript
js操作css属性实现div层展开关闭效果的方法
May 11 Javascript
bootstrap table单元格新增行并编辑
May 19 Javascript
Angular6中使用Swiper的方法示例
Jul 09 Javascript
react 国际化的实现代码示例
Sep 14 Javascript
深入浅析Vue 中 ref 的使用
Apr 29 Javascript
Vue基础学习之项目整合及优化
Jun 02 Javascript
JS使用Chrome浏览器实现调试线上代码
Jul 23 Javascript
微信小程序APP的生命周期及页面的生命周期
Apr 19 Javascript
java和js实现的洗牌小程序
Sep 30 #Javascript
JS使用H5实现图片预览功能
Sep 30 #Javascript
在vue中使用jsx语法的使用方法
Sep 30 #Javascript
微信小程序自定义tabBar在uni-app的适配详解
Sep 30 #Javascript
详解小程序云开发攻略(解决最棘手的问题)
Sep 30 #Javascript
webpack3升级到webpack4遇到问题总结
Sep 30 #Javascript
uploadify插件实现多个图片上传并预览
Sep 30 #Javascript
You might like
PHPExcel内存泄漏问题解决方法
2015/01/23 PHP
php cli配置文件问题分析
2015/10/15 PHP
php中关于长度计算容易混淆的问题分析
2016/05/27 PHP
PHP给源代码加密的几种方法汇总(推荐)
2018/02/06 PHP
PHP设计模式之PHP迭代器模式讲解
2019/03/22 PHP
PHP数据对象映射模式实例分析
2019/03/29 PHP
javascript提取URL的搜索字符串中的参数(自定义函数实现)
2013/01/22 Javascript
jQuery 中$(this).index与$.each的使用指南
2014/11/20 Javascript
优化RequireJS项目的相关技巧总结
2015/07/01 Javascript
js验证真实姓名与身份证号是否匹配
2015/10/13 Javascript
快速使用Bootstrap搭建传送带
2016/05/06 Javascript
vuex实现简易计数器
2016/10/27 Javascript
基于Vue.js 2.0实现百度搜索框效果
2020/12/28 Javascript
JS实现快速比较两个字符串中包含有相同数字的方法
2017/09/11 Javascript
JS获取url参数,JS发送json格式的POST请求方法
2018/03/29 Javascript
详解如何在vue项目中使用eslint+prettier格式化代码
2018/11/10 Javascript
用VueJS写一个Chrome浏览器插件的实现方法
2019/02/27 Javascript
[01:08]DOTA2次级职业联赛 - Shield战队宣传片
2014/12/01 DOTA
Python中模块string.py详解
2017/03/12 Python
python PyTorch预训练示例
2018/02/11 Python
Python使用pip安装pySerial串口通讯模块
2018/04/20 Python
Python3删除排序数组中重复项的方法分析
2019/01/31 Python
python3实现zabbix告警推送钉钉的示例
2019/02/20 Python
python 函数中的内置函数及用法详解
2019/07/02 Python
Python -m参数原理及使用方法解析
2020/08/21 Python
使用jquery实现HTML5响应式导航菜单教程
2014/04/02 HTML / CSS
复古斯堪的纳维亚儿童服装:Baby go Retro
2017/09/09 全球购物
远程教育心得体会
2014/01/03 职场文书
电子信息科学专业自荐信
2014/01/30 职场文书
《落花生》教学反思
2014/02/25 职场文书
员工工作表现评语
2014/04/26 职场文书
最美家庭活动方案
2014/08/31 职场文书
2014年妇联工作总结
2014/11/21 职场文书
工作保证书怎么写
2015/02/28 职场文书
python实现简单反弹球游戏
2021/04/12 Python
python随机打印成绩排名表
2021/06/23 Python