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调用摄像头内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！