js調用攝像頭的方法是什么

小編給大家分享一下js調用攝像頭的方法是什么，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

代碼如下：

<div>
        <b>調用移動端攝像頭</b><br>
        <label>照相機： <input type="file" id='image' accept="image/*" capture='camera'></label>
        <label>攝像機： <input type="file" id='video' accept="video/*" capture='camcorder'></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攝像頭區(qū)域
            let video = document.getElementById("video");

            // 這里介紹新的方法，返回一個 Promise對象
            // 這個Promise對象返回成功后的回調函數帶一個 MediaStream 對象作為其參數
            // then()是Promise對象里的方法
            // then()方法是異步執(zhí)行，當then()前的方法執(zhí)行完后再執(zhí)行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('2d');
            ctx.drawImage(video, 0, 0, 600, 400);
        }
    </script>

看完了這篇文章，相信你對js調用攝像頭的方法是什么有了一定的了解，想了解更多相關知識，歡迎關注億速云行業(yè)資訊頻道，感謝各位的閱讀！