ホームページ >ウェブフロントエンド >jsチュートリアル >jsでカメラを呼び出すにはどうすればいいですか?カメラを呼び出すjsメソッド(詳細コード説明)

jsでカメラを呼び出すにはどうすればいいですか?カメラを呼び出すjsメソッド(詳細コード説明)

青灯夜游
青灯夜游転載
2018-10-26 16:05:547503ブラウズ

この記事の内容はjsでカメラを呼び出す方法を紹介するというものですか?カメラを呼び出す js メソッド (詳細なコードの説明)。困っている友人は参考にしていただければ幸いです。

jsでカメラを呼び出すにはどうすればいいですか?カメラを呼び出すjsメソッド(詳細コード説明)

詳細については、https://github.com/ProsperLe

<div>
        <b>调用移动端摄像头</b><br>
        <label>照相机: <input type="file" id=&#39;image&#39; accept="image/*" capture=&#39;camera&#39;></label>
        <label>摄像机: <input type="file" id=&#39;video&#39; accept="video/*" capture=&#39;camcorder&#39;></label>
    </div>
    <hr>
    <div class="box1">
        <div>
            <button onclick="getMedia()">开启摄像头</button>
            <video id="video" width="600" height="400" autoplay="autoplay"></video>
        </div>
        <div>
            <button onclick="takePhoto()">拍照</button>
            <canvas id="canvas" width="600" height="400"></canvas>
        </div>
    </div>
    <script>
        function getMedia() {
            let constraints = {
                video: {
                    width: 600,
                    height: 400
                },
                audio: true
            };
            //获得video摄像头区域
            let video = document.getElementById("video");

            // 这里介绍新的方法,返回一个 Promise对象
            // 这个Promise对象返回成功后的回调函数带一个 MediaStream 对象作为其参数
            // then()是Promise对象里的方法
            // then()方法是异步执行,当then()前的方法执行完后再执行then()内部的程序

            // 避免数据没有获取到
            let promise = navigator.mediaDevices.getUserMedia(constraints);
            // 成功调用
            promise.then(function (MediaStream) {
                /* 使用这个MediaStream */
                video.srcObject = MediaStream;
                video.play();
                console.log(MediaStream); // 对象
            })
            // 失败调用
            promise.catch(function (err) {
                /* 处理error */
                console.log(err); // 拒签
            });
        }

        function takePhoto() {
            //获得Canvas对象
            let video = document.getElementById("video");
            let canvas = document.getElementById("canvas");
            let ctx = canvas.getContext(&#39;2d&#39;);
            ctx.drawImage(video, 0, 0, 600, 400);
        }
    </script>
を参照してください。

以上がjsでカメラを呼び出すにはどうすればいいですか?カメラを呼び出すjsメソッド(詳細コード説明)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事はcnblogs.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。