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 相关文章推荐
js资料toString 方法
Mar 13 Javascript
超级简单的jquery操作表格方法
Dec 15 Javascript
JQuery控制图片由中心点逐渐放大效果
Jun 26 Javascript
神级程序员JavaScript300行代码搞定汉字转拼音
May 20 Javascript
Vue全家桶实践项目总结(推荐)
Nov 04 Javascript
详解vue-cli 快速搭建单页应用之遇到的问题及解决办法
Mar 01 Javascript
基于vue 添加axios组件,解决post传参数为null的问题
Mar 05 Javascript
Angular 组件之间的交互的示例代码
Mar 24 Javascript
VsCode与Node.js知识点详解
Sep 05 Javascript
JavaScript实现简单随机点名器
Nov 21 Javascript
vue2实现provide inject传递响应式
May 21 Vue.js
JavaScript offset实现鼠标坐标获取和窗口内模块拖动
May 30 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
WordPress特定文章对搜索引擎隐藏或只允许搜索引擎查看
2015/12/31 PHP
PHP使用socket发送HTTP请求的方法
2016/02/14 PHP
你不知道的文件上传漏洞php代码分析
2016/09/29 PHP
PHP使用PDO操作sqlite数据库应用案例
2019/03/07 PHP
jquery鼠标滑过提示title具体实现代码
2013/08/06 Javascript
jquery 图片缩放拖动的简单实例
2014/01/08 Javascript
ANGULARJS中用NG-BIND指令实现单向绑定的例子
2014/12/08 Javascript
javascript 判断整数方法分享
2014/12/16 Javascript
JS动态改变表格边框宽度的方法
2015/03/31 Javascript
详解angularJS自定义指令间的相互交互
2017/07/05 Javascript
浅谈Koa服务限流方法实践
2017/10/23 Javascript
Angular实现的内置过滤器orderBy排序与模糊查询功能示例
2017/12/29 Javascript
使用async、enterproxy控制并发数量的方法详解
2018/01/02 Javascript
Angular6 正则表达式允许输入部分中文字符
2018/09/10 Javascript
跨域请求两种方法 jsonp和cors的实现
2018/11/11 Javascript
详解JavaScript的数据类型以及数据类型的转换
2019/04/20 Javascript
微信小程序实现左侧滑栏过程解析
2019/08/26 Javascript
微信小程序实现发微博功能的示例代码
2020/06/24 Javascript
vue data对象重新赋值无效(未更改)的解决方式
2020/07/24 Javascript
python中异常报错处理方法汇总
2016/11/20 Python
使用APScheduler3.0.1 实现定时任务的方法
2019/07/22 Python
Python PO设计模式的具体使用
2019/08/16 Python
pytorch 获取tensor维度信息示例
2020/01/03 Python
Pytorch 保存模型生成图片方式
2020/01/10 Python
Boom手表官网:瑞典手表品牌,设计你的手表
2019/03/11 全球购物
俄罗斯领先的移动和数字设备在线商店:Svyaznoy.ru
2020/12/21 全球购物
人力资源专员自我评价怎么写
2013/09/19 职场文书
优秀经理获奖感言
2014/03/04 职场文书
学生退学证明
2015/06/23 职场文书
迎新生晚会主持词
2015/06/30 职场文书
新学期开学标语2015
2015/07/16 职场文书
大学生活委员竞选稿
2015/11/21 职场文书
导游词之重庆钓鱼城
2019/09/19 职场文书
mybatis中sql语句CDATA标签的用法说明
2021/06/30 Java/Android
python​格式化字符串
2022/04/20 Python
MySQL下载安装配置详细教程 附下载资源
2022/09/23 MySQL