h5调取摄像头实时显示并点击按钮拍照

这是一个简单是实例版本,具体的功能可以根据以下代码进行增加功能,并且下面都有相对应的注释
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>摄像头拍照</title>
</head>

<body>
    <video id="video" width="480" height="320" controls>
    </video>
    <div>
        <button id="capture">拍照</button>
    </div>
    <canvas id="canvas" width="480" height="320"></canvas>
    <script>
        //访问用户媒体设备的兼容方法
        function getUserMedia(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) {
     
     
                //firfox浏览器
                navigator.mozGetUserMedia(constraints, success, error);
            } else if (navigator.getUserMedia) {
     
     
                //旧版API
                navigator.getUserMedia(constraints, success, error);
            }
        }

        let video = document.getElementById('video');
        let canvas = document.getElementById('canvas');
        let context = canvas.getContext('2d');

        function success(stream) {
     
     
            //兼容webkit核心浏览器
            let CompatibleURL = window.URL || window.webkitURL;
            //将视频流设置为video元素的源
            console.log(stream);

            //video.src = CompatibleURL.createObjectURL(stream);
            video.srcObject = 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调取摄像头实时显示并点击按钮拍照

猜你喜欢
