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 相关文章推荐
在视频前插入广告
Nov 20 Javascript
jQuery)扩展jQuery系列之一 模拟alert,confirm(一)
Dec 04 Javascript
js iframe跨域访问(同主域/非同主域)分别深入介绍
Jan 24 Javascript
jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架
Apr 08 Javascript
jQuery提交多个表单的小例子
Jun 30 Javascript
深入理解JSON数据源格式
Jan 10 Javascript
jquery预览图片实现鼠标放上去显示实际大小
Jan 16 Javascript
js实现大转盘抽奖游戏实例
Jun 24 Javascript
基于jquery实现简单的分页控件
Mar 17 Javascript
Vue组件之极简的地址选择器的实现
May 31 Javascript
原生JS实现简单的无缝自动轮播效果
Sep 26 Javascript
Vue + iView实现Excel上传功能的完整代码
Jun 22 Vue.js
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图片验证码代码
2008/03/27 PHP
php面向对象全攻略 (十六) 对象的串行化
2009/09/30 PHP
PHP 长文章分页函数 带使用方法,不会分割段落,翻页在底部
2009/10/22 PHP
json的键名为数字时的调用方式(示例代码)
2013/11/15 PHP
PHP pthreads v3下worker和pool的使用方法示例
2020/02/21 PHP
TP5框架实现的数据库备份功能示例
2020/04/05 PHP
用JavaScript获取网页中的js、css、Flash等文件
2006/12/20 Javascript
javascript 面向对象编程基础:继承
2009/08/21 Javascript
关于jQuery中.attr()和.prop()的问题探讨
2013/09/06 Javascript
获取下拉列表框的值是数组,split,$.inArray示例
2013/11/13 Javascript
asp.net中oracle 存储过程(图文)
2015/08/12 Javascript
Javascript生成全局唯一标识符(GUID,UUID)的方法
2016/02/27 Javascript
Vue组件的使用教程详解
2018/01/05 Javascript
vue.extend实现alert模态框弹窗组件
2018/04/28 Javascript
[00:48]完美“圣”典2016风云人物:xiao8宣传片
2016/11/30 DOTA
Python学习笔记整理3之输入输出、python eval函数
2015/12/14 Python
Pythont特殊语法filter,map,reduce,apply使用方法
2016/02/27 Python
python实现树的深度优先遍历与广度优先遍历详解
2019/10/26 Python
使用Python对Dicom文件进行读取与写入的实现
2020/04/20 Python
Python脚本破解压缩文件口令实例教程(zipfile)
2020/06/14 Python
详解Python中第三方库Faker
2020/09/25 Python
如何用python写个模板引擎
2021/01/14 Python
CSS3与动画有关的属性transition、animation、transform对比(史上最全版)
2017/08/18 HTML / CSS
使用SVG实现提示框功能的示例代码
2020/06/05 HTML / CSS
英国领先的在线高尔夫商店:Scottsdale Golf
2019/08/26 全球购物
兰蔻法国官方网站:Lancôme法国
2020/02/22 全球购物
传播学专业毕业生自荐信
2013/11/04 职场文书
商务英语求职自荐信范文
2013/12/24 职场文书
数控技术专科生自我评价
2014/01/08 职场文书
社区安全检查制度
2014/02/03 职场文书
党的群众路线教育实践活动心得体会
2014/03/03 职场文书
房展策划方案
2014/06/07 职场文书
中学生教师节演讲稿
2014/09/03 职场文书
公务员年度考核个人总结
2015/02/12 职场文书
党员年终个人总结
2015/02/14 职场文书
Java面试题冲刺第十八天--Spring框架3
2021/08/07 面试题