请选择 进入手机版 | 继续访问电脑版
游客您好
第三方账号登陆
我爱我卿 新手上路
未知星球 | 未知职业
  • 关注0
  • 粉丝0
  • 帖子2
Ta的其他帖子
热议话题
zblog php mip主题开发官方指南
2020-07-08 0
由于百度对MIP的支持使得MIP网页大受欢迎,众多站长纷纷把网页改造成MIP。作为国内主
精选帖子

[HTML5] html5调用摄像头实例代码

[复制链接]
我爱我卿 发表于 2021-7-24 09:34:22 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题

最近在学习在做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打开摄像头的权限,你重新启用权限就可以啦!



回复

使用道具 举报

懒得打字嘛,点击右侧快捷回复
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

推荐阅读

© 2001-2020 懒人建站 ( 辽ICP备18012687号-3 )

辽公网安备 21032102000036号