JavaScript 如何打开网络摄像头

在本文中，我们将看到如何使用JavaScript打开摄像头并显示实时视频。为此，我们将使用Navigator Media Devices。

Navigator Media Devices： 它是一个只读属性，返回一个Media Devices对象，帮助我们访问连接的媒体输入设备，如摄像头和麦克风。

语法：

var mediaDevices = navigator.mediaDevices;

返回值: MediaDevices单例对象。该对象的成员通常直接使用，例如通过执行navigator.mediaDevices.getUserMedia()。

示例: 在此示例中，我们将使用navigator.mediaDevices打开网络摄像头。

<script>
    document.addEventListener("DOMContentLoaded", () => {
        let but = document.getElementById("but");
        let video = document.getElementById("vid");
        let mediaDevices = navigator.mediaDevices;
        vid.muted = true;
        but.addEventListener("click", () => {
 
            // Accessing the user camera and video.
            mediaDevices
                .getUserMedia({
                    video: true,
                    audio: true,
                })
                .then((stream) => {
 
                    // Changing the source of video to current stream.
                    video.srcObject = stream;
                    video.addEventListener("loadedmetadata", () => {
                        video.play();
                    });
                })
                .catch(alert);
        });
    });
</script>
<style>
    div {
        width: 500px;
        height: 400px;
        border: 2px solid black;
        position: relative;
    }
 
    video {
        width: 500px;
        height: 400px;
        object-fit: cover;
    }
</style>
<div>
    <video id="vid"></video>
</div>
<br />
<button id="but" autoplay>
    Open WebCam
</button>

输出：