详解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 相关文章推荐
firefox和IE系列的相关区别整理 以备后用
Dec 28 Javascript
利用百度地图JSAPI生成h7n9禽流感分布图实现代码
Apr 15 Javascript
JavaScript中使用ActiveXObject操作本地文件夹的方法
Mar 28 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(二)
Dec 10 Javascript
Angular中$compile源码分析
Jan 28 Javascript
jQuery遍历json的方法分析
Apr 16 Javascript
jQuery实现radio第一次点击选中第二次点击取消功能
May 15 jQuery
zTree树形菜单交互选项卡效果的实现方法
Dec 25 Javascript
vue读取本地的excel文件并显示在网页上方法示例
May 29 Javascript
深入了解JavaScript 的 WebAssembly
Jun 15 Javascript
vue-cli2与vue-cli3在一台电脑共存的实现方法
Sep 25 Javascript
JS PHP字符串截取函数实现原理解析
Aug 29 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
一个程序下载的管理程序(四)
2006/10/09 PHP
php的控制语句
2006/10/09 PHP
用Simple Excel导出xls实现方法
2012/12/06 PHP
PHP中使用FFMPEG获取视频缩略图和视频总时长实例
2014/05/04 PHP
Yii全局函数用法示例
2017/01/22 PHP
laravel中短信发送验证码的实现方法
2018/04/25 PHP
PHP预定义超全局数组变量小结
2018/08/20 PHP
15款优秀的jQuery导航菜单插件分享
2011/07/19 Javascript
jQuery通过扩展实现抖动效果的方法
2015/03/11 Javascript
IE10中flexigrid无法显示数据的解决方法
2015/07/26 Javascript
从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别
2016/06/12 Javascript
微信小程序学习(4)-系统配置app.json详解
2017/01/12 Javascript
AngularJS的Filter的示例详解
2017/03/07 Javascript
Vue通过input筛选数据
2020/10/26 Javascript
详解使用Next.js构建服务端渲染应用
2018/07/10 Javascript
Vue实现自定义下拉菜单功能
2018/07/16 Javascript
Vue 路由 过渡动效 数据获取方法
2018/07/31 Javascript
javascript创建元素和删除元素实例小结
2019/06/19 Javascript
Node在Controller层进行数据校验的过程详解
2020/08/28 Javascript
使用python 获取进程pid号的方法
2014/03/10 Python
Python实现简单字典树的方法
2016/04/29 Python
python实现FTP服务器服务的方法
2017/04/11 Python
Python实现比较扑克牌大小程序代码示例
2017/12/06 Python
python 将字符串转换成字典dict的各种方式总结
2018/03/23 Python
Flask框架请求钩子与request请求对象用法实例分析
2019/11/07 Python
简单了解Python3 bytes和str类型的区别和联系
2019/12/19 Python
keras实现VGG16方式(预测一张图片)
2020/07/07 Python
Python 如何定义匿名或内联函数
2020/08/01 Python
python-jwt用户认证食用教学的实现方法
2021/01/19 Python
详解Sticky Footer 绝对底部的两种套路
2017/11/03 HTML / CSS
大学军训感言400字
2014/03/11 职场文书
区域销售主管岗位职责
2014/06/15 职场文书
2014年基建工作总结
2014/12/12 职场文书
观看《筑梦中国》纪录片心得体会
2016/01/18 职场文书
python中的3种定义类方法
2021/11/27 Python
WCG2010 星际争霸决赛 Flash vs Goojila 1 星际经典比赛回顾
2022/04/01 星际争霸