酷站(www.ku0.com)-致力于为互联网从业者提供动力!

热门关键词:  企业  as  baidu  c4rp3nt3r  美女
酷站

js

旗下栏目: php js asp Flex Ajax jquery JSP asp.net C语言 java 正则表达式 微信小程序

javascript实现摄像头拍照预览的方法

来源:互联网搜集 作者:秩名 人气: 发布时间:2019-10-02
本篇文章主要介绍了javascript实现摄像头拍照预览的方法,对大家的学习或者工作具有一定的参考学习价值,感兴趣的小伙伴们可以参考一下,也感谢大家对酷站(ku0.com)的支持。
使用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>

但是谷歌浏览器可以打开摄像头,无法获取实时数据。火狐比较好用。
原文链接:https://blog.csdn.net/xingfei_work/article/details/76166391

最新更新