我如何检查用户是否没有网络摄像头？答案

【问题标题】：How would i check if a user does not have a webcam?我如何检查用户是否没有网络摄像头？
【发布时间】：2021-01-27 23:34:42
【问题描述】：

我正在尝试制作一个视频聊天平台，但我不知道如何检测用户是否没有可用的网络摄像头，如果没有，它将视频源设置为静态图像或名称和个人资料图片。

这是我目前获取网络摄像头的方式：

navigator.mediaDevices.getUserMedia(with_video).then((stream) => {
    addVideoStream(myVideo, stream);

    myPeer.on('call', (call) => {
        call.answer(stream);
        const video = document.createElement('video');
        call.on('stream', (userVideoStream) => {
            addVideoStream(video, userVideoStream);
        });
    });

    socket.on('user-connect', (userId) => {
        connectToNewUser(userId, stream);
        join.play();
    });
});

添加视频流：

function addVideoStream(video, stream) {
    video.srcObject = stream;
    video.addEventListener('loadedmetadata', () => {
        video.play();
    });
    videoGrid.append(video);
}

【问题讨论】：

标签： javascript node.js socket.io

【解决方案1】：

你需要 navigator.getUserMedia，

试试这个功能。

function hasUserMedia() { 
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia 
|| navigator.mozGetUserMedia || navigator.msGetUserMedia; 
return !!navigator.getUserMedia; 
}

应该被称为

if (hasUserMedia()) { 
    navigator.mediaDevices.getUserMedia(callConstraints)
    .then(gotStream)
    .catch(function(e) {
        alert('getUserMedia() error: ' + e.name);
    });
}
else{
    alert('hasUserMedia() error: ');
}

此外，如果 Cam 可用但用户未授予权限，您可能需要检查权限。为此，您可以使用以下功能。

checkForVideoAudioAccess = async () => {
try {
    const cameraResult = await navigator.permissions.query({ name: 'camera' });
    isCameraAccessGranted = cameraResult.state !== 'denied';
    const microphoneResult = await navigator.permissions.query({ name: 'microphone' });
    isMicrophoneAccessGranted = microphoneResult.state !== 'denied';
} 
catch(e) {
    console.error('An error occurred while checking the permissions', e);
}
return true;

}

【讨论】：

我现在正在使用它，我当前的问题是试图让图像加载到视频所在的位置。当我不使用视频作为提要时，PeerJS 出现故障

【解决方案2】：

我希望这个javascript库DetectRTC能解决你的问题。

if (DetectRTC.hasWebcam === false) {
    alert('Please install an external webcam device.');
}

您也可以查看现场演示here。

【讨论】：

我打算尝试使用 vanilla js。有没有办法在香草中做到这一点？

【解决方案3】：

只需将.catch() 块添加到您的getUserMedia() 调用中。这样，如果没有设备，或者用户不允许媒体捕获，您就可以处理错误。

【讨论】：

那么我如何将提要设置为图像？媒体也使用麦克风
@ExiteGalacTix 设置视频元素的海报图片。 developer.mozilla.org/en-US/docs/Web/HTML/Element/video
peerjs 不喜欢我将视频或图像作为我的视频源。 error code
@ExiteGalacTix 这是一个字符串，而不是一个流。您真的不想将静态图像作为流发送。如果出于某种原因需要这样做，则必须将图像绘制到画布上并使用捕获流。但是，这有严重的限制，更不用说带宽的大量浪费了。我说的是使用<video> 元素的poster 属性，在没有视频流的情况下显示图像。
啊，好的。我需要做类似new Video("image video location")的事情吗？

【解决方案4】：

尝试使用 catch 块。这是我的

async function webcamCheck() {
    if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) { // browser support
        let stream = null;
        try {
            stream = await navigator.mediaDevices.getUserMedia({video:true});
            showVideoControls();
            video.srcObject = stream;
            video.play();
        } catch(err) {
            setError(err.name + ": " + err.message);
        }

        if (!checkForErrors()) console.log('Webcam found :)');
    }
    else {
        setError("This browser does not support webcam technology");
    }
}

【讨论】：