详解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 相关文章推荐
为你的网站增加亮点的9款jQuery插件推荐
May 03 Javascript
js 有框架页面跳转(target)三种情况下的应用
Apr 09 Javascript
JS判断网页广告是否被浏览器拦截过滤的代码
Apr 05 Javascript
解决angular的post请求后SpringMVC后台接收不到参数值问题的方法
Dec 10 Javascript
jQuery中attr()与prop()函数用法实例详解(附用法区别)
Dec 29 Javascript
JavaScript ES6中export、import与export default的用法和区别
Mar 14 Javascript
python爬取安居客二手房网站数据(实例讲解)
Oct 19 Javascript
Angular 4.x+Ionic3踩坑之Ionic3.x pop反向传值详解
Mar 13 Javascript
JavaScript动态加载重复绑定问题
Apr 01 Javascript
vue项目中vue-i18n和element-ui国际化开发实现过程
Apr 25 Javascript
谈谈IntersectionObserver懒加载的具体使用
Oct 15 Javascript
jquery轮播图插件使用方法详解
Jul 31 jQuery
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
smarty中先strip_tags过滤html标签后truncate截取文章运用
2010/10/25 PHP
PHP采用自定义函数实现遍历目录下所有文件的方法
2014/08/19 PHP
在WordPress中实现发送http请求的相关函数解析
2015/12/29 PHP
详解php与ethereum客户端交互
2018/04/28 PHP
PHP读取文件,解决中文乱码UTF-8的方法分析
2020/01/22 PHP
jQuery 选择表格(table)里的行和列及改变简单样式
2012/12/15 Javascript
Jquery+asp.net后台数据传到前台js进行解析的方法
2014/05/11 Javascript
Javascript window对象详解
2014/11/12 Javascript
js+div实现文字滚动和图片切换效果代码
2015/08/27 Javascript
Kindeditor在线文本编辑器如何过滤HTML
2016/04/14 Javascript
对于input 框限定输入值为浮点型的js代码
2017/09/25 Javascript
详解webpack多页面配置记录
2018/01/22 Javascript
微信小程序实现顶部导航特效
2019/01/28 Javascript
webpack-mvc 传统多页面组件化开发详解
2019/05/07 Javascript
Vue中的组件及路由使用实例代码详解
2019/05/22 Javascript
在layui中select更改后生效的方法
2019/09/05 Javascript
如何解决vue在ios微信&quot;复制链接&quot;功能问题
2020/03/26 Javascript
vue3.0搭配.net core实现文件上传组件
2020/10/29 Javascript
[01:03:18]DOTA2-DPC中国联赛 正赛 RNG vs Dynasty BO3 第一场 1月29日
2021/03/11 DOTA
利用打码兔和超人打码自封装的打码类分享
2014/03/16 Python
浅谈python对象数据的读写权限
2016/09/12 Python
解决PyCharm中光标变粗的问题
2017/08/05 Python
Python 查找list中的某个元素的所有的下标方法
2018/06/27 Python
Python实现对特定列表进行从小到大排序操作示例
2019/02/11 Python
Python 虚拟环境工作原理解析
2020/12/24 Python
CSS3中媒体查询结合rem布局适配手机屏幕
2019/06/10 HTML / CSS
HTML5拍照和摄像机功能实战详解
2019/01/24 HTML / CSS
印度在线内衣和时尚目的地:Zivame
2017/09/28 全球购物
全球游戏Keys和卡片市场:GamesDeal
2018/03/28 全球购物
环境科学专业个人求职的自我评价
2013/11/28 职场文书
高中教师评语大全
2014/04/25 职场文书
元宵节寄语大全
2015/02/27 职场文书
2016大学生暑期三下乡心得体会
2016/01/23 职场文书
你会写请假条吗?
2019/06/26 职场文书
2019年最新感恩节祝福语(28句)
2019/11/27 职场文书
PostgreSQL聚合函数介绍以及分组和排序
2022/04/12 PostgreSQL