• 售前

  • 售后

热门帖子
入门百科

html5调用摄像头实例代码

[复制链接]
执着等待等wc 显示全部楼层 发表于 2021-8-14 15:10:13 |阅读模式 打印 上一主题 下一主题
最近在学习在做HTML5的项目,看了博客上html5调用摄像头照相的文章,但各有瑕疵。于是自己查阅册本写了一个demo,重要分三步,废话不多说上代码。
HTML代码部门:
  1. <!--video用于显示媒体设备的视频流,自动播放-->   
  2. <video  id="video" autoplay style="width: 480px;height: 320px"></video>
  3. <!--拍照按钮-->
  4. <div>
  5.     <button id="capture">拍照</button>
  6. </div>
  7. <!--描绘video截图-->
  8. <canvas id="canvas" width="480" height="320"></canvas>
复制代码
接下来是js代码部门:
  1. <script>  
  2.     var video = document.getElementById('video');
  3.     var canvas = document.getElementById('canvas');
  4.     var capture = document.getElementById('capture');
  5.     var context = canvas.getContext('2d');
  6.     function getUserMediaToPhoto(constraints,success,error) {
  7.         if(navigator.mediaDevices.getUserMedia){
  8.             //最新标准API
  9.             navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
  10.         }else if (navigator.webkitGetUserMedia) {
  11.             //webkit核心浏览器
  12.             navigator.webkitGetUserMedia(constraints,success,error);
  13.         }else if(navigator.mozGetUserMedia){
  14.             //firefox浏览器
  15.             navigator.mozGetUserMedia(constraints,success,error);
  16.         }else if(navigator.getUserMedia){
  17.             //旧版API
  18.             navigator.getUserMedia(constraints,success,error);
  19.         }
  20.     }
  21.     //成功回调函数
  22.     function success(stream){
  23.         //兼容webkit核心浏览器
  24.         var CompatibleURL = window.URL || window.webkitURL;
  25.         //将视频流转化为video的源
  26.         video.src = CompatibleURL.createObjectURL(stream);
  27.         video.play();//播放视频
  28.     }
  29.     function error(error) {
  30.         console.log('访问用户媒体失败:',error.name,error.message);
  31.     }
  32.     if(navigator.mediaDevices.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.getUserMedia){
  33.         getUserMediaToPhoto({video:{width:480,height:320}},success,error);
  34.     }else{
  35.         alert('你的浏览器不支持访问用户媒体设备');
  36.     }
  37.     capture.addEventListener('click',function() {
  38.         // 将video画面描绘在canvas画布上
  39.         context.drawImage(video,0,0,480,320);
  40.     })
  41. </script>
复制代码
值得留意的是:
使用的时间打开摄像头一定要上server上打开,否则没办法使用!由于打开的是属于网络的webcam,需要在server上打开。
目前好像chrome和opera还有大多数移动设备支持HTLM5打开摄像头,我这个是在chrome上测试成功的。
还有一点,如果没成功,很大概是你不警惕关闭了chrome打开摄像头的权限,你重新启用权限就可以啦!
到此这篇关于html5调用摄像头实例的文章就介绍到这了,更多相干html5调用摄像头内容请搜刮草根技术分享从前的文章或继续欣赏下面的相干文章,盼望各人以后多多支持草根技术分享!

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作