js zum Aufrufen der Netzwerkkamera und Behandeln häufiger Fehler

Vor kurzem musste ich aus geschäftlichen Gründen auf der Webseite auf verschiedene Netzwerkkameras zugreifen und diese debuggen und bin dabei auf viele unglaubliche Probleme gestoßen (z. B. konnte ich die Marke der Kamera lesen, aber nicht die Auflösung der Kamera). Deshalb habe ich diesen Artikel als Erinnerung zusammengestellt und hoffe, dass er Freunden mit ähnlichen Problemen helfen kann.

Basiscode

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

  let video = document.getElementById('#video')
 
  // Kompatibilitätsüberwachung if( 'srcObject' in video ) {
    
    video.srcObject = Stream
  } anders {
    // Diese Methode wird von Browsern, die srcObject video.src = URL.createObjectURL(stream) unterstützen, nicht mehr unterstützt.
  }
  
  warte auf Video.Wiedergabe()
})

Kompatibilität

Gemessen an der Kompatibilität von caniuse ist die Gesamtkompatibilität durchschnittlich. Browser der IE-Reihe werden überhaupt nicht unterstützt. iOS erfordert nicht nur iOS 11 oder höher, sondern kann auch nicht über die API auf der eingebetteten Seite der APP aufgerufen werden.

Verschiedene Probleme bei der Entwicklung

Die Browserkonsole fordert mediaDevices.getUserMedia ist keine Funktion

Aufgrund von Browserbeschränkungen kann navigator.mediaDevices.getUserMedia normal unter dem https-Protokoll verwendet werden, aber nur die beiden Domänennamen localhost/127.0.0.1 dürfen unter dem http-Protokoll zugreifen. Daher sollte während der Entwicklung eine Notfallwiederherstellung durchgeführt werden, und es muss bestätigt werden, ob die Produktionsumgebung unter dem https-Protokoll steht, wenn online gegangen wird.

let mediaDevices = navigator.mediaDevices || null  
wenn(Mediengeräte === null) {    
  console.warn(`Bitte stellen Sie sicher, dass Sie sich in der https-Protokollumgebung befinden`)
  zurückkehren 
}  
mediaDevices.getUserMedia({ audio: false, video: true }).then(async (stream) => {})

Holen Sie sich die Hardwareparameter der Kamera

Es gibt zwei Haupttypen von Hardwareparametern, die ich bei der Projektentwicklung verwenden muss: Marke und Auflösung. Es ist relativ einfach, den Markennamen der Kamera zu ermitteln. Sie können mediaDevices.enumerateDevices() direkt verwenden, um eine Liste der auf dem Computer verfügbaren Peripheriegeräte abzurufen und Kameras mithilfe des Felds „kind“ herauszufiltern.

if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) {
    
 console.log("Der Browser unterstützt die Eigenschaft enumerateDevices nicht")
 zurückkehren
}
  
navigator.mediaDevices.enumerateDevices().then((devices) => {
    
  let devicesList = Geräte.Filter((Gerät) => Gerät.Kind === 'Videoeingang')
    
  // Geräteliste -> [{ Art: 'Videoeingang', Name: 'FaceTime HD-Kamera (integriert)', Geräte-ID: xxx }]
  // Die in der Geräteliste erhaltene Geräte-ID kann zum Wechseln der Kameras verwendet werden. // Spezifische Methode: mediaDevices.getUserMedia({ audio: false, video: { deviceId } })
})

Die Lösung kann nicht direkt über die offizielle API abgerufen werden. Der auf MDN angegebene Grund besteht darin, die Privatsphäre des Benutzers zu schützen, und die Lösung liegt im Rahmen des Schutzes. (Ich bin sehr neugierig, warum die Auflösung privat ist?)

MDN-Originaltext (Link):

Aus Datenschutzgründen können die Kamera- und Mikrofoninformationen des Benutzers nicht abgerufen werden

Dies ist jedoch nicht völlig unmöglich, da der von der Kamera aufgezeichnete Inhalt über das Video-Tag auf der Webseite abgespielt werden kann und das Video-Tag die Größe standardmäßig auf die gleiche Größe wie die Kamera einstellt, sodass die Auflösung der Kamera durch Ermitteln der Größe des Videos ermittelt werden kann.

Nach dem Testen wird der erhaltene Wert nicht vom Stil beeinflusst. Die Größe des Videos kann also durch den Stil gesteuert werden, die Auflösung wird dadurch jedoch nicht beeinflusst.

let mediaDevices = navigator.mediaDevices || null  
wenn(Mediengeräte === null) {    
  console.warn(`Bitte stellen Sie sicher, dass Sie sich in der https-Protokollumgebung befinden`)
  zurückkehren 
}
  
mediaDevices.getUserMedia({ audio: false, video: true }).then(async (stream) => {    
  let video = document.getElementById('#video')
  video.srcObject = Stream  
  warte auf Video.Wiedergabe()    
 // 1280.720  
  Konsole.log(Video.Videobreite, Video.Videohöhe)
})

Behandlung von Fehlern wie fehlende Kamera/keine Nutzungsberechtigung

getUserMedia selbst integriert mehrere häufige Fehlermeldungen, wie z. B. „keine Kamera“, „keine Nutzungsberechtigung“ usw. Die meisten dieser Fehler können über Catch behandelt werden.

let mediaDevices = navigator.mediaDevices || null
  
wenn(Mediengeräte === null) {
  
  console.warn(`Bitte stellen Sie sicher, dass Sie sich in der https-Protokollumgebung befinden`)
  zurückkehren 
}
  
mediaDevices.getUserMedia({ audio: false, video: true }).then(async (stream) => {
  
  let video = document.getElementById('#video')
  
  video.srcObject = Stream
  
  warte auf Video.Wiedergabe()
  
}).catch((Fehler) => {
  
  let message = error.message || Fehler,
    Antwort = {
      'permission denied': 'Der Browser verbietet dieser Seite die Nutzung der Kamera. Bitte aktivieren Sie die entsprechenden Berechtigungen.',
      „Angefordertes Gerät nicht gefunden“: „Keine Kamera erkannt“
    }  
  alert(response[ message.toLowerCase() ] || 'Unbekannter Fehler')
})

Trennen Sie die Kamera vom Stromnetz, um zu prüfen

Da die Kamera beim Mobiltelefon im Telefon fest eingebaut ist, muss im Allgemeinen nicht geprüft werden, ob die Kamera ausgesteckt ist. Wenn das Kameradatenkabel jedoch am PC abgesteckt ist, muss der Status der Kamera überwacht werden.
Das Erste, was mir in den Sinn kommt, ist, dass getUserMedia möglicherweise einen Fehler über Catch meldet, wenn die Kamera ausgesteckt wird. Nach vielen Experimenten antwortet getUserMedia jedoch nicht mit dem Fehler, dass die Kamera nicht gefunden werden kann, wenn sie ausgesteckt ist, und es ist nicht möglich, sie direkt über Catch zu überwachen.
Als ich fast keine Ahnung mehr hatte, sah ich diesen Satz im getUserMedia-Dokument:

getUserMedia gibt ein Promise zurück. Die Callback-Funktion nach erfolgreichem Promise verwendet ein MediaStream-Objekt als Parameter.

MediaStream ist ein Objekt, das Multimedia-Inhaltsströme (einschließlich Audio und Video) empfängt. Nach dem Drucken auf der Konsole von Google Chrome (andere Browser wurden nicht getestet) lauten seine Eigenschaftswerte wie folgt:

„id“ ist die eindeutige Kennung des MediaStream-Objekts, „active“ gibt an, ob der aktuelle Inhaltsstream aktiv ist, und die folgenden Felder sind von Google Chrome bereitgestellte Hooks.

Sobald die Kamera ausgesteckt wird, ändert sich „active“ von „true“ auf „false“ und gleichzeitig wird der „oninactive“-Hook ausgelöst. Mit der Statusüberwachung wird alles viel einfacher. Nach dem Testen des Codes stellte sich heraus, dass es für Benutzer auch effektiv ist, die Kameraberechtigungen zu ändern.

// Bestimmen, ob die Kamera online ist let cameraIsOnline = false
  
const loadWebCamera = () => {
    
  let mediaDevices = navigator.mediaDevices || null
  
  wenn(Mediengeräte === null) {
  
    console.warn(`Bitte stellen Sie sicher, dass Sie sich in der https-Protokollumgebung befinden`)
    zurückkehren 
  }
  
  mediaDevices.getUserMedia({ audio: false, video: true }).then(async (stream) => {
  
    let video = document.getElementById('#video')
  
    video.srcObject = Stream
      
    // Kompatibilitätsverarbeitung if ( stream.oninactive === null ) {
      // Auf Streamunterbrechungen achten. Nachdem der Stream unterbrochen wurde, ruft er sich selbst erneut auf, um den Status zu überwachen stream.oninactive = () => loadWebCamera()
    }
  
    warte auf Video.Wiedergabe()

    KameraIsOnline = true
  
  }).catch((Fehler) => {
  
    let message = error.message || Fehler,
      Antwort = {
        'permission denied': 'Der Browser verbietet dieser Seite die Nutzung der Kamera. Bitte aktivieren Sie die entsprechenden Berechtigungen.',
        'angefordertes Gerät nicht gefunden': 'Keine Kamera erkannt',
        „Videoquelle konnte nicht gestartet werden“: „Kein Zugriff auf die Kamera möglich, bitte schließen Sie sie erneut an und versuchen Sie es erneut.“
      }
   
    KameraIsOnline = false
    alert(response[ message.toLowerCase() ] || 'Unbekannter Fehler')
  })
}

Allerdings ist auch die Kompatibilität sehr wichtig und viele Bereiche befinden sich noch im Vorschlagsstadium. Es wird empfohlen, bereits in der Entwicklungsphase auf die Kompatibilität zu achten, um Probleme in der Produktionsumgebung zu vermeiden.

Dies ist das Ende dieses Artikels über die JS-Implementierung des Aufrufens einer Webcam und die Behandlung allgemeiner Fehler. Weitere relevante JS-Inhalte zum Aufrufen einer Webcam finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!