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

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

【云小站】新老客都返现+现金红包+瓜分60万奖池
酷站

js

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

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>

但是谷歌浏览器可以打开摄像头,无法获取实时数据。火狐比较好用。
版权声明:本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 959677720#qq.cn(#换@) 举报,一经查实,本站将立刻删除。
原文链接:https://blog.csdn.net/xingfei_work/article/details/76166391

相关文章

  • js表达式与运算符简单操作教程

    js表达式与运算符简单操作教程

    代码如下: /*** Created by Administrator on 2017/12/14.* 表达式与运算符*///1.基本表达式 加减乘除var a = 4;a = 7/6;var b = (a + 4)/2;console.log(a);console.log(b);console.log(==========);//end//2.比较运算符 == != = =conso......
    02-15
  • JS实现简易计算器代码

    JS实现简易计算器代码

    用JS实现简易计算器,供大家参考,具体内容如下: 首先创建结构和样式 !DOCTYPE htmlhtml lang=enhead meta charset=UTF-8 meta name=viewport content=width=device-width, initial-scale=1.0 titleDocument/title style body{ margin:0......
    02-14
  • JavaScript实现拖拽的代码

    JavaScript实现拖拽的代码

    盒子拖拽运用到的有onmousedown事件,onmousemove事件以及onmouseup事件 1、当鼠标点击下去的时候我们需要获取鼠标所在位置的横纵坐标,然后获取盒子的离页面的横纵方向的距离 2、计算出鼠标相对盒子的距离 3、当鼠标移动的时候,获取鼠......
    02-12
  • JavaScript canvas仿流瀑布效果

    JavaScript canvas仿流瀑布效果

    效果图如下: 在js部分写canvas代码,有详细注释 html部分: 一个canvas元素: canvas id=canvas /canvas css部分: style *{ padding: 0; margin: 0; } canvas{ background-color: #111; } body{ overflow: hidden; }/style script var ......
    02-10
  • JavaScript canvas动画实现时钟的代码

    JavaScript canvas动画实现时钟的代码

    效果图如下: 代码如下: !DOCTYPE htmlhtml lang=enhead meta charset=UTF-8 meta name=viewport content=width=device-width, initial-scale=1.0 meta http-equiv=X-UA-Compatible content=ie=edge title时钟特效/title/headbody canva......
    02-10
  • 微信小程序canvas开发水果老虎机的思路

    微信小程序canvas开发水果老虎机的思路

    效果图: 使用结构还是canvas? 使用模板结构(view)生成水果盘的好处一是用户可自定义产出 n x n 的定制化老虎机,二是容易通过算法样式生成布局,三是通过 wx.selectQueryAll 的方法能够很方便的抓到定位数据。但,问题是动画性能过于孱......
    02-09
  • JavaScript canvas实现雪花随机动态飘落效果

    JavaScript canvas实现雪花随机动态飘落效果

    效果图如下: 代码如下: !DOCTYPE htmlhtml lang=enhead meta charset=UTF-8 meta name=viewport content=width=device-width, initial-scale=1.0 titleDocument/title/headstyle body{ margin: 0; padding: 0; } canvas{ background: #......
    02-08
  • js实现踩五彩块游戏代码

    js实现踩五彩块游戏代码

    代码如下: !DOCTYPE htmlhtml lang=enhead meta charset=UTF-8 meta name=viewport content=width=device-width, initial-scale=1.0 meta http-equiv=X-UA-Compatible content=ie=edge titleDocument/title link rel=stylesheet href=de......
    02-08
  • js实现聊天对话框的代码

    js实现聊天对话框的代码

    代码如下: !DOCTYPE htmlhtml head meta charset=utf-8 title/title style type=text/css .box{ width:300px; height:400px; border:1px solid blue; margin:0 auto; } .inTer{ width:280px; height:280px; border:1px solid deeppink; ......
    02-08
  • JavaScript this的使用方法介绍

    JavaScript this的使用方法介绍

    本文我们介绍下js中this的用法。 由上图可得,默认this指向window,而在node.js中this默认指向global。 由上图可得: 1.原型链为o-MyClass.prototype。 2.函数如果没有明确返回值默认返回this。 由上图可得:call和apply功能相同,不同之......
    02-04

最新更新