h5调用摄像头

发布时间：2020-05-24 00:47:52 作者：Lee_吉
来源：网络阅读：2645
<!DOCTYPE html>
<html>
<head>
    <title>摄像头测试</title>
</head>
<body>
    <!--video用于显示媒体设备的视频流，自动播放-->
    <video id="video" autoplay ></video>
    <!--拍照按钮-->
    <div>
    <button id="capture">拍照</button>
    </div>
    <!--描绘video截图-->
    <canvas id="canvas" width="480" height="320"></canvas>
    <script type="text/javascript">
        //访问用户媒体设备的兼容方法
        function getUserMedia(constrains,success,error){
            if(navigator.mediaDevices.getUserMedia){
                //最新标准API
                navigator.mediaDevices.getUserMedia(constrains).then(success).catch(error);
            } else if (navigator.webkitGetUserMedia){
                //webkit内核浏览器
                navigator.webkitGetUserMedia(constrains).then(success).catch(error);
            } else if (navigator.mozGetUserMedia){
                //Firefox浏览器
                navagator.mozGetUserMedia(constrains).then(success).catch(error);
            } else if (navigator.getUserMedia){
                //旧版API
                navigator.getUserMedia(constrains).then(success).catch(error);
            }
        }

        var video = document.getElementById("video");
        var canvas = document.getElementById("canvas");
        var context = canvas.getContext("2d");

        //成功的回调函数
        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.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia){
            //调用用户媒体设备，访问摄像头
            getUserMedia({
                video:{width:480,height:320}
            },success,error);
        } else {
            alert("你的浏览器不支持访问用户媒体设备");
        }

        //注册拍照按钮的单击事件
        document.getElementById("capture").addEventListener("click",function(){
            //绘制画面
            context.drawImage(video,0,0,480,320);
        });
    </script>
</body>
</html>
h5调用摄像头

相关阅读
