无需Flash即可访问网络摄像头

Access webcam without Flash

本文关键字：网络 摄像头 访问 Flash 无需      更新时间：2023-09-26

我想使用HTML5元素和JavaScript创建一个视频聊天应用程序，我不想使用Flash访问用户的网络摄像头。

如何仅使用HTML和JavaScript实现这一点？

在撰写本文时，最好的解决方案是WebRTC。Chrome、Mozilla和Opera都支持它，但在Internet Explorer和Safari中仍然不可用。

极简主义演示。

Index.html

<!DOCTYPE html>
<head>
</head>
<body>
    <video></video>
    <script src="webcam.js"></script>
</body>

网络摄像头.js

(function () {
    navigator.getMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia);
    navigator.getMedia(
        // constraints
        {video:true, audio:false},
        // success callback
        function (mediaStream) {
            var video = document.getElementsByTagName('video')[0];
            video.src = window.URL.createObjectURL(mediaStream);
            video.play();
        },   
        //handle error
        function (error) {
            console.log(error);
        })   
})();

在这里或那里阅读更多

尽管所提供的示例很好，给了我灵感，但在编写这个答案时，Navigator.getUserMedia（）函数已经过时了。我已经使用video标记的srcObejct和promise方法重写了提供的示例。

<!DOCTYPE html>
<head>
</head>
<body>
    <video id="video-cam"></video>
    <script>
        navigator.mediaDevices.getUserMedia({ video: true, audio: true })
        .then(mediaStream => {
            const video = document.getElementById('video-cam');
            video.srcObject = mediaStream;
            video.onloadedmetadata = (e) => {
                video.play();
            };
        })
        .catch(error => {
            alert('You have to enable the mike and the camera');
        });
    </script>
</body>

相关文章：