使视频流在getUserMedia中可选

Question

在我的应用程序中,如果用户可以生成音频流,则可以拨打电话.所以,我需要访问麦克风(音频流).没有它,应用程序应该抛出错误.视频是可选的.所以,我打电话navigator.getUserMedia给 constraints这样说:

{ audio: true, video: false }

当麦克风不存在时,它会抛出错误,就像我需要的那样.但是这样的副作用是,如果用户也可以访问摄像机,则视频不会出现在流中.

但是,如果我同时设置audio并video以true我当用户有一个麦克风,但没有访问摄像头(根据我的应用程序逻辑这是确定)将在案件的错误

如何才能使视频流可选getUserMedia？

Answer 1

现在还有另一种方式.您现在可以在呼叫前直接检查用户有多少个摄像头和麦克风getUserMedia:

navigator.mediaDevices.enumerateDevices()
  .then(devices => {
    var cams = devices.filter(device => device.kind == "videoinput");
    var mics = devices.filter(device => device.kind == "audioinput");

    var constraints = { video: cams.length > 0, audio: mics.length > 0 };
    return navigator.mediaDevices.getUserMedia(constraints);
  })
  .then(stream => video.srcObject = stream)
  .catch(failed);

旧的方式仍然有效,但这可能会更清洁.

请注意,正在使用enumerateDevices,此时Chrome中需要启用标记或使用adapter.js.

更新: Chrome现在也支持enumerateDevices.

Answer 2

我发现的一个解决方案是在getUserMedia启用视频和音频的情况下进行呼叫，如果呼叫失败（意味着他们没有摄像头或麦克风），那么您可以getUserMedia从您提供的仅请求访问麦克风的失败回调中再次呼叫。

var failedLocalAudioAndVideoStreamCallBack = function (error) {
      getUserMedia({ audio: true, video: false }, 
      gotLocalAudioStreamCallBack, failedLocalAudioStreamCallBack )});
    }

    getUserMedia({ audio: true, video: true },
    gotLocalAudioAndVideoStreamCallBack, failedLocalAudioAndVideoStreamCallBack); 

当然，你可以随心所欲地处理成功和失败。

注意：如果没有摄像头，则不会出现请求初始摄像头输入的弹出窗口（该弹出窗口将失败）。因此，用户只会收到一个访问请求（这使得该解决方案更容易接受）。