百分百源码网-让建站变得如此简单! 登录 注册 签到领金币!

主页 | 如何升级VIP | TAG标签

当前位置: 主页>网站教程>html5教程> h5页面怎样调取摄像头代码分享-
分享文章到:

h5页面怎样调取摄像头代码分享-

发布时间:08/01 来源:未知 浏览: 关键词:
<inputtype"button"value"OpenVideo"id"btnOpenVideo"><inputtype"button"value"TakePicture"id"btnTakePicture"><inputtype"button"value"CloseVideo
<input type="button" value="OpenVideo" id="btnOpenVideo" /><input type="button" value="TakePicture" id="btnTakePicture" /><input type="button" value="CloseVideo" id="btnCloseVideo" /><br /><video style="width:500px;height:500px;border:1px solid #000000;" id="videoTest">video><canvas style="width:500px;height:500px;border:1px solid #000000;" id="canvasTest">canvas><script type="text/javascript">  window.onload = function () {
    let btnOpenVideo = document.getElementById('btnOpenVideo');
    let btnTakePicture = document.getElementById('btnTakePicture');
    let btnCloseVideo = document.getElementById('btnCloseVideo');
    let video = document.getElementById('videoTest');
    let canvas = document.getElementById('canvasTest').getContext('2d');
    btnOpenVideo.onclick = function () {
      window.navigator.getUserMedia({
        video: true/*视频/摄像头*/
        /*audio:true*//*音频/麦克风*/
      }, function (param) {         video.src = window.URL.createObjectURL(param);/*设定video控件途径,实时显示摄像头的图像*/        btnCloseVideo.onclick = function () {/*关闭摄像头*/          if (param.getTracks())/*Chrome*/            param.getTracks()[0].stop();           else            param.stop();         };         btnTakePicture.onclick = function () {/*照相*/          canvas.drawImage(document.getElementById('videoTest'), 0, 0, 500, 500);/*将拍摄的相片画到canvas中*/        };       }, function (err) {         alert(err);       });     };   };script>

以上就是h5页面怎样调取摄像头代码分享的细致内容,更多请关注 百分百源码网 其它相干文章!

打赏

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

百分百源码网 建议打赏1~10元,土豪随意,感谢您的阅读!

共有150人阅读,期待你的评论!发表评论
昵称: 网址: 验证码: 点击我更换图片
最新评论

本文标签

广告赞助

能出一分力是一分吧!

订阅获得更多模板

本文标签

广告赞助

订阅获得更多模板