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 html5 canvas画布中删除一个块区域的方法
Jan 26 Javascript
原生js实现jquery函数animate()动画效果的简单实例
Aug 21 Javascript
javascript深拷贝(deepClone)详解
Aug 24 Javascript
Javascript中作用域的详细介绍
Oct 06 Javascript
js禁止浏览器页面后退功能的实例(推荐)
Sep 01 Javascript
React中上传图片到七牛的示例代码
Oct 10 Javascript
详细分析单线程JS执行问题
Nov 22 Javascript
解决angularjs中同步执行http请求的方法
Aug 13 Javascript
JavaScript数组方法的错误使用例子
Sep 13 Javascript
微信小程序new Date()方法失效问题解决方法
Jul 29 Javascript
vue实现打地鼠小游戏
Aug 21 Javascript
js实现简单商品筛选功能
Feb 02 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截取中文字符串函数实例
2015/02/23 PHP
基于jquery的一个OutlookBar类,动态创建导航条
2010/11/19 Javascript
js动态创建表格,删除行列的小例子
2013/07/20 Javascript
js判断ie版本号的简单实现代码
2014/03/05 Javascript
php的文件上传入门教程(实例讲解)
2014/04/10 Javascript
ECMAScript 5严格模式(Strict Mode)介绍
2015/03/02 Javascript
javascript实现图片跟随鼠标移动效果的方法
2015/05/13 Javascript
JavaScript高级教程5.6之基本包装类型(详细)
2015/11/23 Javascript
Ajax的概述与实现过程
2016/11/18 Javascript
Webpack中loader打包各种文件的方法实例
2019/09/03 Javascript
[00:50]2014DOTA2国际邀请赛 NEWBEE战队回顾
2014/08/01 DOTA
[01:51]开启你的城市传奇 完美世界城市挑战赛开始报名
2018/10/09 DOTA
在Django的模板中使用认证数据的方法
2015/07/23 Python
深入剖析Python的爬虫框架Scrapy的结构与运作流程
2016/01/20 Python
快速排序的算法思想及Python版快速排序的实现示例
2016/07/02 Python
Python中动态创建类实例的方法
2017/03/24 Python
利用python的socket发送http(s)请求方法示例
2018/05/07 Python
TensorFlow实现卷积神经网络
2018/05/24 Python
Python基于最小二乘法实现曲线拟合示例
2018/06/14 Python
python中多层嵌套列表的拆分方法
2018/07/02 Python
python Tkinter版学生管理系统
2019/02/20 Python
django配置连接数据库及原生sql语句的使用方法
2019/03/03 Python
python使用KNN算法识别手写数字
2019/04/25 Python
解决python tkinter界面卡死的问题
2019/07/17 Python
Python下opencv图像阈值处理的使用笔记
2019/08/04 Python
jenkins配置python脚本定时任务过程图解
2019/10/29 Python
解决TensorFlow模型恢复报错的问题
2020/02/06 Python
win10从零安装配置pytorch全过程图文详解
2020/05/08 Python
使用phonegap获取设备的一些信息方法
2017/03/31 HTML / CSS
外贸业务员工作职责
2014/01/06 职场文书
行政助理的岗位职责
2014/02/18 职场文书
父母寄语大全
2014/04/12 职场文书
财务工作个人总结
2015/02/27 职场文书
外贸采购员岗位职责
2015/04/03 职场文书
个人欠条范本
2015/07/03 职场文书
爱心捐赠活动简讯
2015/07/20 职场文书