Question

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

如何仅使用HTML和JavaScript实现此目的？

Answer 1

在撰写本文时，最佳解决方案是WebRTC。它是supported in Chrome, Mozilla and Opera，但在Internet Explorer和Safari中仍然无法访问。

简约演示。

<强>的index.html

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

<强> webcam.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);
        })   
})();

了解更多here或there

Answer 2

尽管所提供的示例很棒并且启发了我，但在编写此答案时，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>

访问没有Flash的网络摄像头

2 个答案: