详解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 相关文章推荐
深入探密Javascript数组方法
Jan 08 Javascript
jQuery中on()方法用法实例详解
Feb 06 Javascript
Ionic默认的Tabs模板使用实例
Aug 29 Javascript
快速实现JS图片懒加载(可视区域加载)示例代码
Jan 04 Javascript
JS使用cookie实现只出现一次的广告代码效果
Apr 22 Javascript
JS库之Highlight.js的用法详解
Sep 13 Javascript
JavaScript获取移动设备型号的实现代码(JS获取手机型号和系统)
Mar 10 Javascript
React中使用async validator进行表单验证的实例代码
Aug 17 Javascript
详解vue-cli3多环境打包配置
Mar 28 Javascript
vue中uni-app 实现小程序登录注册功能
Oct 12 Javascript
小程序如何写动态标签的实现方法
Feb 05 Javascript
原生js实现下拉框选择组件
Jan 20 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
CodeIgniter控制器之业务逻辑实例分析
2016/01/20 PHP
Yii2中DropDownList简单用法示例
2016/07/18 PHP
php json_encode与json_decode详解及实例
2016/12/13 PHP
PHP CURL与java http使用方法详解
2018/01/26 PHP
js css样式操作代码(批量操作)
2009/10/09 Javascript
JavaScript调用Activex控件的事件的实现方法
2010/04/11 Javascript
jquery的live使用注意事项
2014/02/18 Javascript
transport.js和jquery冲突问题的解决方法
2015/02/10 Javascript
JavaScript实现把rgb颜色转换成16进制颜色的方法
2015/06/01 Javascript
JS实现仿FLASH效果的竖排导航代码
2015/09/15 Javascript
Javascript 事件冒泡机制详细介绍
2016/10/10 Javascript
JavaScript动态数量的文件上传控件
2016/11/18 Javascript
8 行 Node.js 代码实现代理服务器
2016/12/05 Javascript
jQuery手指滑动轮播效果
2016/12/22 Javascript
javascript内存分配原理实例分析
2017/04/10 Javascript
JS简单获取并修改input文本框内容的方法示例
2018/04/08 Javascript
vue组件实践之可搜索下拉框功能
2018/11/25 Javascript
详解如何在Vue项目中导出Excel
2019/04/19 Javascript
微信小程序进入广告实现代码实例
2019/09/19 Javascript
微信小程序批量上传图片到七牛(推荐)
2019/12/19 Javascript
Python中Collection的使用小技巧
2014/08/18 Python
Python的另外几种语言实现
2015/01/29 Python
python使用socket向客户端发送数据的方法
2015/04/29 Python
python实现提取str字符串/json中多级目录下的某个值
2020/02/27 Python
浅谈python 中的 type(), dtype(), astype()的区别
2020/04/09 Python
在Pytorch中使用Mask R-CNN进行实例分割操作
2020/06/24 Python
Python实现JS解密并爬取某音漫客网站
2020/10/23 Python
使用HTML5的链接预取功能(link prefetching)给网站提速
2012/12/13 HTML / CSS
HTML5中的autofocus(自动聚焦)属性介绍
2014/04/23 HTML / CSS
西安当代医院管理研究院笔试题
2015/12/11 面试题
机械专业个人求职自荐信格式
2013/09/21 职场文书
《我不是最弱小的》教学反思
2014/02/23 职场文书
给校长的一封建议书
2014/03/12 职场文书
2014年领班工作总结
2014/11/25 职场文书
乔迁之喜答谢词
2015/01/05 职场文书
JavaScript选择器函数querySelector和querySelectorAll
2021/11/27 Javascript