GetUserMedia en différenciant quels matériels génèrent des erreurs

Question

Je lance un getUserMedia pour la caméra et le microphone,

navigator.mediaDevices
          .getUserMedia({audio:true, video: true)
          .then((stream) => {})
          .catch((error) => {})

Y a-t-il un moyen de différencier quel appareil provoque l'échec de la promesse ? Par exemple, s'il s'agit de la caméra qui est illisible ou du microphone, êtes-vous capable de savoir que c'est la caméra à partir de l'objet erreur ? Je ne peux trouver autre chose que error.name et error.message ?

Answer 1

Non, malheureusement, lorsque vous capturez à la fois depuis les deux, ils réussissent tous les deux ou échouent ensemble.

De nombreuses applications captureront l'audio et la vidéo séparément, puis créeront un nouveau MediaStream avec les pistes des MediaStreams de chaque appareil séparé. J'ai le pressentiment que cela peut entraîner des problèmes de synchronisation dans les cas où l'audio/vidéo sont envoyés en une seule fois depuis l'appareil en interne, mais je n'ai pas prouvé cela. Ce ne doit pas être un problème significatif, du moins pour la visioconférence, car c'est ce que fait Google pour Hangouts/Meet.

Answer 2

Quels types d'erreurs souhaitez-vous détecter?

Si votre machine ne possède pas le matériel nécessaire (appareil photo, microphone) pour créer votre MediaStream, vous pouvez le découvrir en utilisant .enumerateDevices() avant d'essayer d'utiliser .getUserMedia(). Une fonction comme celle-ci pourrait vous donner les informations nécessaires pour un {audio: true, video:true} MediaStream.

async function canIDoIt () { 
    const devices = await navigator.mediaDevices.enumerateDevices()
    let hasAudio = false
    let hasVideo = false
    devices.forEach(function(device) {
        if (device.kind === 'videoinput') hasVideo = true
        if (device.kind === 'audioinput') hasAudio = true
    })
    return hasAudio && hasVideo
}

L'utiliser est un bon début pour une application multimédia robuste : vous pouvez informer votre utilisateur qu'il n'a pas le matériel correct immédiatement avant de plonger dans les arcanes des erreurs générées par .getUserMedia().

Si votre utilisateur refuse l'accès de .getUserMedia() à leurs périphériques multimédias, une erreur sera générée avec error.message contenant la chaîne "permission denied". Gardez à l'esprit que lorsque l'utilisateur refuse la permission, votre programme ne reçoit pas beaucoup d'informations descriptives sur les périphériques. À cause des cybercriminels.

Si les périphériques de votre utilisateur ne peuvent pas gérer les contraintes que vous avez définies pour .getUserMedia(), vous obtiendrez une violation de contrainte" dans la chaîne message.error. Les types de contraintes de périphérique que vous pouvez violer sont des choses comme

{video: { width:{exact:1920},
         height:{exact:1080}}}

Éviter l'utilisation de exact dans vos contraintes réduit le risque de violations de contraintes. Au lieu de cela, vous pouvez donner quelque chose comme ceci.

{video: { width:{min:480, ideal: 720, max: 1920},
         height:{min:270, ideal:1280, max: 1040}}}

D'autres erreurs sont probablement plus spécifiques à une machine et un navigateur particuliers. Dans pratiquement tous les cas, l'objet error généré contient un error.message explicatif.