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 相关文章推荐
在线游戏大家来找茬II
Sep 30 Javascript
js汉字排序问题 支持中英文混排,兼容各浏览器,包括CHROME
Dec 20 Javascript
使用jquery的ajax需要注意的地方dataType的设置
Aug 12 Javascript
IE8下String的Trim()方法失效的解决方法
Nov 08 Javascript
js菜单点击显示或隐藏效果的简单实例
Jan 13 Javascript
javascript动态控制服务器控件实例
Sep 05 Javascript
JavaScript中的比较操作符&gt;、=、
Dec 31 Javascript
纯javascript实现的小游戏《Flappy Pig》实例
Jul 27 Javascript
JS+CSS实现分类动态选择及移动功能效果代码
Oct 19 Javascript
JavaScript学习笔记之数组随机排序
Mar 23 Javascript
微信小程序 开发之全局配置
May 05 Javascript
vue中各选项及钩子函数执行顺序详解
Aug 25 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
PHP设计模式之责任链模式的深入解析
2013/06/13 PHP
PHP写日志的实现方法
2014/11/05 PHP
PHP入门教程之表单与验证实例详解
2016/09/11 PHP
windows环境下使用Composer安装ThinkPHP5
2018/05/18 PHP
JavaScript脚本性能优化注意事项
2008/11/18 Javascript
原生javaScript实现图片延时加载的方法
2014/12/22 Javascript
Bootstrap下拉菜单效果实例代码分享
2016/06/30 Javascript
解决URL地址中的中文乱码问题的办法
2017/02/10 Javascript
webpack开发跨域问题解决办法
2017/08/03 Javascript
OkHttp踩坑随笔为何 response.body().string() 只能调用一次
2018/01/08 Javascript
解决node修改后需频繁手动重启的问题
2018/05/13 Javascript
对vue中v-if的常见使用方法详解
2018/09/28 Javascript
d3绘制基本的柱形图的实现代码
2018/12/12 Javascript
Vue 3.0 前瞻Vue Function API新特性体验
2019/08/12 Javascript
vue如何在项目中调用腾讯云的滑动验证码
2020/07/15 Javascript
使用优化器来提升Python程序的执行效率的教程
2015/04/02 Python
深入解析Python设计模式编程中建造者模式的使用
2016/03/02 Python
Python的Django REST框架中的序列化及请求和返回
2016/04/11 Python
python中闭包Closure函数作为返回值的方法示例
2017/12/17 Python
ubuntu安装sublime3并配置python3环境的方法
2018/03/15 Python
详谈Pandas中iloc和loc以及ix的区别
2018/06/08 Python
python实现京东秒杀功能
2018/07/30 Python
pandas读取CSV文件时查看修改各列的数据类型格式
2019/07/07 Python
python中return的返回和执行实例
2019/12/24 Python
python中round函数如何使用
2020/06/19 Python
基于Python的一个自动录入表格的小程序
2020/08/05 Python
Python Serial串口基本操作(收发数据)
2020/11/06 Python
Python爬虫开发与项目实战
2020/12/16 Python
华为消费者德国官方网站:HUAWEI德国
2020/11/03 全球购物
农村结婚典礼司仪主持词
2014/03/14 职场文书
2014年社区计生工作总结
2014/11/18 职场文书
上课睡觉万能检讨书
2015/02/17 职场文书
小学中队长竞选稿
2015/11/20 职场文书
python urllib库的使用详解
2021/04/13 Python
Python中22个万用公式的小结
2021/07/21 Python