详解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 相关文章推荐
jquery photoFrame 图片边框美化显示插件
Jun 28 Javascript
JS实现控制表格单元格垂直对齐的方法
Mar 30 Javascript
JavaScript实现网页加载进度条代码超简单
Sep 21 Javascript
基于PHP和Mysql相结合使用jqGrid读取数据并显示
Dec 02 Javascript
JavaScript实现url参数转成json形式
Sep 25 Javascript
Vue.js绑定HTML class数组语法错误的原因分析
Oct 19 Javascript
Javascript highcharts 饼图显示数量和百分比实例代码
Dec 06 Javascript
微信小程序 解决请求服务器手机预览请求不到数据的方法
Jan 04 Javascript
AngularJS中$http的交互问题
Mar 29 Javascript
AngularJS 最常用的八种功能(基础知识)
Jun 26 Javascript
解决Vue2.0自带浏览器里无法打开的原因(兼容处理)
Jul 28 Javascript
Three.js实现3D机房效果
Dec 30 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
Laravel框架表单验证详解
2014/09/04 PHP
php实现的验证码文件类实例
2015/06/18 PHP
php通过curl添加cookie伪造登陆抓取数据的方法
2016/04/02 PHP
PHP依赖注入(DI)和控制反转(IoC)详解
2017/06/12 PHP
Laravel框架实现多个视图共享相同数据的方法详解
2019/07/09 PHP
javascript优先加载笔记代码
2008/09/30 Javascript
根据一段代码浅谈Javascript闭包
2010/12/14 Javascript
jQuery无刷新分页完整实例代码
2015/10/27 Javascript
input点击后placeholder中的提示消息消失
2016/01/15 Javascript
[原创]Bootstrap 中下拉菜单修改成鼠标悬停直接显示
2016/04/14 Javascript
使用jQuery5分钟快速搞定双色表格的简单实例
2016/08/08 Javascript
AngulaJS路由 ui-router 传参实例
2017/04/28 Javascript
浅析JS中常用类型转换及运算符表达式
2017/07/23 Javascript
基于对象合并功能的实现示例
2017/10/10 Javascript
ng-alain表单使用方式详解
2018/07/10 Javascript
NodeJS模块与ES6模块系统语法及注意点详解
2019/01/04 NodeJs
在vue中使用console.log无效的解决
2020/08/09 Javascript
python获取从命令行输入数字的方法
2015/04/29 Python
介绍Python的Urllib库的一些高级用法
2015/04/30 Python
解读Python中degrees()方法的使用
2015/05/18 Python
在Django中限制已登录用户的访问的方法
2015/07/23 Python
Python发送邮件的实例代码讲解
2019/10/16 Python
Python学习工具jupyter notebook安装及用法解析
2020/10/23 Python
python爬取youtube视频的示例代码
2021/03/03 Python
HTML5 表单验证失败的提示语问题
2017/07/13 HTML / CSS
全球最大的在线橄榄球商店:Lovell Rugby
2018/05/20 全球购物
我有一个char * 型指针正巧指向一些int 型变量, 我想跳过它们。 为什么如下的代码((int *)p)++; 不行?
2013/05/09 面试题
.NET初级开发工程师面试题
2014/04/18 面试题
防灾减灾标语
2014/10/07 职场文书
派出所正风肃纪剖析材料
2014/10/10 职场文书
教师党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
因公司原因离职的辞职信范文
2015/05/12 职场文书
小学数学教师研修感悟
2015/11/18 职场文书
22句经典语录:送给优柔寡断和胡思乱想的朋友们
2019/12/13 职场文书
Spring Security使用单点登录的权限功能
2022/04/03 Java/Android
Win11 21h2可以升级22h2吗?看看你的电脑符不符合要求
2022/07/07 数码科技