• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    html5调用摄像头实例代码

    最近在学习在做HTML5的项目,看了博客上html5调用摄像头拍照的文章,但各有瑕疵。于是自己查阅书籍写了一个demo,主要分三步,废话不多说上代码。

    HTML代码部分:

    <!--video用于显示媒体设备的视频流,自动播放-->   
    <video  id="video" autoplay style="width: 480px;height: 320px"></video>
    <!--拍照按钮-->
    <div>
        <button id="capture">拍照</button>
    </div>
    <!--描绘video截图-->
    <canvas id="canvas" width="480" height="320"></canvas>

    接下来是js代码部分:

    <script>  
        var video = document.getElementById('video');
        var canvas = document.getElementById('canvas');
        var capture = document.getElementById('capture');
        var context = canvas.getContext('2d');
        function getUserMediaToPhoto(constraints,success,error) {
            if(navigator.mediaDevices.getUserMedia){
                //最新标准API
                navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
            }else if (navigator.webkitGetUserMedia) {
                //webkit核心浏览器
                navigator.webkitGetUserMedia(constraints,success,error);
            }else if(navigator.mozGetUserMedia){
                //firefox浏览器
                navigator.mozGetUserMedia(constraints,success,error);
            }else if(navigator.getUserMedia){
                //旧版API
                navigator.getUserMedia(constraints,success,error);
            }
        }
        //成功回调函数
        function success(stream){
            //兼容webkit核心浏览器
            var CompatibleURL = window.URL || window.webkitURL;
            //将视频流转化为video的源
            video.src = CompatibleURL.createObjectURL(stream);
            video.play();//播放视频
        }
        function error(error) {
            console.log('访问用户媒体失败:',error.name,error.message);
        }
        if(navigator.mediaDevices.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.getUserMedia){
            getUserMediaToPhoto({video:{width:480,height:320}},success,error);
        }else{
            alert('你的浏览器不支持访问用户媒体设备');
        }
        capture.addEventListener('click',function() {
            // 将video画面描绘在canvas画布上
            context.drawImage(video,0,0,480,320);
        })
     </script>

    值得注意的是:

    使用的时候打开摄像头一定要上server上打开,否则没办法使用!因为打开的是属于网络的webcam,需要在server上打开。

    目前好像chrome和opera还有大多数移动设备支持HTLM5打开摄像头,我这个是在chrome上测试成功的。

    还有一点,如果没成功,很可能是你不小心关闭了chrome打开摄像头的权限,你重新启用权限就可以啦!

    到此这篇关于html5调用摄像头实例的文章就介绍到这了,更多相关html5调用摄像头内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!

    上一篇:HTML5页面音频自动播放的实现方式
    下一篇:html5表单的required属性使用
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    html5调用摄像头实例代码 html5,调用,摄像头,实例,