详解HTML5 使用video标签实现选择摄像头功能


Posted in Javascript onOctober 25, 2017

详解HTML5 使用video标签实现选择摄像头功能

1. html

// jquery reference  
// <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> 
// 
 
 
  <input type="hidden" name="imgValue" id="imgValue" /> 
  <button id="btnOpen1" class="btn btn-default" type="button" >Open WebCam</button> 
  <select id="videoSource" ></select> 
 
 
  <div id="vdoOne" style="display:none"> 
    <video id="video" style="margin-top:15px;margin-bottom:15px;" width="300" autoplay></video> 
    <canvas id="canvasPreview" style="margin-top:15px;" width="300" height="224"></canvas> 
    <canvas id="canvasUpload" style="display:none;" width='300' height='224'></canvas> 
    <button id="snap" class="btn btn-default" type="button">Snap Photo</button> 
  </div>

2. javascript

<script> 
 
 
//// Elements for taking the snapshot 
    var canvasPreview = document.getElementById('canvasPreview'); 
    var canvasUpload = document.getElementById('canvasUpload'); 
    var contextPreview = canvasPreview.getContext('2d'); 
    var contextUpload = canvasUpload.getContext('2d'); 
 
 
 
 
    //#################### Video Source #######################3 
    var videoElement = document.querySelector('video'); 
    var videoSelect = document.querySelector('select#videoSource'); 
 
 
    navigator.mediaDevices.enumerateDevices() 
      .then(gotDevices).then(getStream).catch(handleError); 
 
 
    videoSelect.onchange = getStream; 
 
 
 
 
    function gotDevices(deviceInfos) { 
      for (var i = 0; i < deviceInfos.length; ++i) { 
        var deviceInfo = deviceInfos[i]; 
        var option = document.createElement('option'); 
        option.value = deviceInfo.deviceId; 
        if (deviceInfo.kind === 'videoinput') { 
          option.text = deviceInfo.label || 
            'camera ' + 
            (videoSelect.length + 1); 
          videoSelect.appendChild(option); 
        } else { 
          console.log('Found ome other kind of source/device: ', deviceInfo); 
        } 
      } 
    } 
 
 
    var _streamCopy = null; 
    function getStream() { 
      if (_streamCopy != null) { 
        try { 
          _streamCopy.stop(); // if this method doesn't exist, the catch will be executed. 
        } catch (e) { 
          _streamCopy.getVideoTracks()[0].stop(); // then stop the first video track of the stream 
        } 
      } 
       
      var constraints = { 
        audio:false, 
        video: { 
          optional: [ 
            { 
              sourceId: videoSelect.value 
            } 
          ] 
        } 
      }; 
       
      navigator.mediaDevices.getUserMedia(constraints).then(gotStream).catch(handleError); 
    } 
 
 
    function gotStream(stream) { 
      _streamCopy = stream; // make stream available to console 
      videoElement.srcObject = stream; 
    } 
 
 
    function handleError(error) { 
      alert(error.name + ": " + error.message); 
    } 
 
 
    //######################## End Video Source ################# 
 
 
 
 
    // Get access to the camera! 
    if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) { 
      navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) { 
        videoElement.src = window.URL.createObjectURL(stream); 
        videoElement.play(); 
 
 
      }); 
    } else { 
      document.getElementById("pnlVideo1").style.display = "none"; 
    } 
 
 
 
 
    //// Trigger photo take 
    document.getElementById("snap").addEventListener("click", 
      function() { 
        contextPreview.drawImage(videoElement, 0, 0, 300, 224); 
        contextUpload.drawImage(videoElement, 0, 0, 300, 224); 
        document.getElementById("video").style.display = "none"; 
        document.getElementById("snap").style.display = "none"; 
        document.getElementById("canvasPreview").style.display = "block"; 
 
 
        var image = document.getElementById("canvasUpload").toDataURL("image/jpeg"); 
        image = image.replace('data:image/jpeg;base64,', ''); 
        $("#imgValue").val(image); 
         
        alert("image value :" + image); 
      }); 
 
 
    //// Trigger photo take 
 
 
 
 
    document.getElementById("btnOpen1").addEventListener("click", 
      function() { 
        document.getElementById("vdoOne").style.display = "block"; 
        document.getElementById("video").style.display = "block"; 
        document.getElementById("snap").style.display = "block"; 
        document.getElementById("canvasPreview").style.display = "none"; 
      }); 
       
</script>

如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
几个高效,简洁的字符处理函数
Apr 12 Javascript
MooTools 1.2中的Drag.Move来实现拖放
Sep 15 Javascript
jquery 提交值不为空的元素示例代码
May 10 Javascript
js正则表达式的使用详解
Jul 09 Javascript
js实现商品抛物线加入购物车特效
Nov 18 Javascript
AngularJS国际化详解及示例代码
Aug 18 Javascript
使用JavaScript触发过渡效果的方法
Jan 19 Javascript
详解如何在Vue2中实现组件props双向绑定
Mar 29 Javascript
Node做中转服务器转发接口
Oct 18 Javascript
JS实现数组的增删改查操作示例
Aug 29 Javascript
vue-cli3 karma单元测试的实现
Jan 18 Javascript
解决js中的setInterval清空定时器不管用问题
Nov 17 Javascript
vue 数组和对象不能直接赋值情况和解决方法(推荐)
Oct 25 #Javascript
JS使用tofixed与round处理数据四舍五入的区别
Oct 25 #Javascript
javascript计算对象长度的方法
Oct 25 #Javascript
AngularJS实现的select二级联动下拉菜单功能示例
Oct 25 #Javascript
Angular4实现鼠标悬停3d倾斜效果
Oct 25 #Javascript
详解vue 组件之间使用eventbus传值
Oct 25 #Javascript
bootstrap时间控件daterangepicker使用方法及各种小bug修复
Oct 25 #Javascript
You might like
wordpress安装过程中遇到中文乱码的处理方法
2015/04/21 PHP
PHP使用MPDF类生成PDF的方法
2015/12/08 PHP
php 查找数组元素提高效率的方法详解
2017/05/05 PHP
浅谈Yii乐观锁的使用及原理
2017/07/25 PHP
PHP实现创建一个RPC服务操作示例
2020/02/23 PHP
GreyBox技术总结(转)
2010/11/23 Javascript
jquery.tmpl JQuery模板插件
2011/10/10 Javascript
JavaScript实现的in_array函数
2014/08/27 Javascript
jQuery插件datalist实现很好看的input下拉列表
2015/07/14 Javascript
js如何判断访问是来自搜索引擎(蜘蛛人)还是直接访问
2015/09/14 Javascript
浏览器兼容性问题大汇总
2015/12/17 Javascript
详解JavaScript时间格式化
2015/12/23 Javascript
[原创]Javascript 实现广告后加载 可加载百度谷歌联盟广告
2016/05/11 Javascript
Angular ng-repeat遍历渲染完页面后执行其他操作详细介绍
2016/12/13 Javascript
基于JS实现二维码图片固定在右下角某处并跟随滚动条滚动
2017/02/08 Javascript
node.js利用mongoose获取mongodb数据的格式化问题详解
2017/10/06 Javascript
vue 动态绑定背景图片的方法
2018/08/10 Javascript
JavaScript中如何对多维数组(矩阵)去重的实现
2019/12/04 Javascript
python中pylint使用方法(pylint代码检查)
2018/04/06 Python
win7下 python3.6 安装opencv 和 opencv-contrib-python解决 cv2.xfeatures2d.SIFT_create() 的问题
2019/10/24 Python
Python Lambda函数使用总结详解
2019/12/11 Python
Python阶乘求和的代码详解
2020/02/14 Python
Python实现壁纸下载与轮换
2020/10/19 Python
Python爬虫之Selenium实现关闭浏览器
2020/12/04 Python
用gpu训练好的神经网络,用tensorflow-cpu跑出错的原因及解决方案
2021/03/03 Python
Html5画布_动力节点Java学院整理
2017/07/13 HTML / CSS
澳大利亚墨尔本的在线时装店:LORETA
2018/09/14 全球购物
OLEDBConnection和SQLConnection有什么区别
2013/05/31 面试题
生日邀请函范文
2014/01/13 职场文书
即将毕业大学生自荐信
2014/01/24 职场文书
代理班主任的自我评价
2014/02/04 职场文书
优秀学生事迹材料
2014/02/08 职场文书
《闻一多先生的说和做》教学反思
2014/04/28 职场文书
保密工作整改情况汇报
2014/11/06 职场文书
建筑质检员岗位职责
2015/04/08 职场文书
基于Go语言构建RESTful API服务
2021/07/25 Golang