One place for hosting & domains

      getUserMedia

      Zugriff auf Front- und Rück-Kameras mit getUserMedia() von JavaScript


      Einführung

      Mit HTML5 kam die Einführung von APIs mit Zugriff auf die Geräte-Hardware, einschließlich der API MediaDevices. Diese API ermöglicht den Zugriff auf Medieneingabegeräte wie Audio und Video.

      Mit Hilfe dieser API können Entwickler auf Audio- und Videogeräte zugreifen, um Live-Video-Feeds zu streamen und im Browser anzuzeigen. In diesem Tutorial greifen Sie über das Gerät des Benutzers auf den Video-Feed zu und zeigen es mit der Methode getUserMedia im Browser an.

      Die API getUserMedia verwendet die Medieneingabegeräte, um einen Medien-Stream zu erstellen. Dieser Medien-Stream enthält die angeforderten Medientypen, egal ob Audio oder Video. Mit dem von der API zurückgegebenen Stream können Video-Feeds im Browser angezeigt werden, wobei dies für die Echtzeit-Kommunikation im Browser nützlich ist.

      Bei gemeinsamer Verwendung mit der API MediaStream Recording können Sie Mediendaten aufzeichnen und speichern, die im Browser erfasst wurden. Diese API funktioniert wie die übrigen neu eingeführten APIs nur mit sicherer Herkunft, aber sie funktioniert auch für localhost– und Datei-URLs.

      Voraussetzungen

      In diesem Tutorial werden zunächst Konzepte erklärt und Beispiele mit Codepen demonstriert. Im letzten Schritt erstellen Sie einen funktionierenden Video-Feed für den Browser.

      Schritt 1 — Überprüfen der Geräteunterstützung

      Zuerst erfahren Sie, wie Sie überprüfen können, ob der Browser des Benutzers die API mediaDevices unterstützt. Diese API ist innerhalb der Navigator-Schnittstelle vorhanden und enthält den aktuellen Status und die Identität des Benutzeragenten. Die Überprüfung wird mit dem folgenden Code durchgeführt, der in Codepen eingefügt werden kann:

      if ('mediaDevices' in navigator && 'getUserMedia' in navigator.mediaDevices) {
        console.log("Let's get this party started")
      }
      

      Zuerst wird geprüft, ob die API mediaDevices innerhalb des navigator vorhanden ist und dann wird geprüft, ob die API getUserMedia innerhalb der mediaDevices verfügbar ist. Wenn dies true zurückgibt, können Sie beginnen.

      Schritt 2 — Anfordern der Benutzerberechtigung

      Nachdem Sie die Unterstützung des Browsers für getUserMedia bestätigt haben, müssen Sie die Berechtigung zur Verwendung der Medieneingabegeräte auf dem Benutzeragenten anfordern. Normalerweise wird, nachdem ein Benutzer die Berechtigung erteilt hat, ein Promise zurückgegeben, das zu einem Medien-Stream aufgelöst wird. Dieses Promise wird nicht zurückgegeben, wenn die Berechtigung vom Benutzer verweigert wird, wodurch der Zugriff auf diese Geräte blockiert wird.

      Fügen Sie die folgende Zeile in Codepen ein, um die Berechtigung anzufordern:

      navigator.mediaDevices.getUserMedia({video: true})
      

      Das Objekt, das als Argument für die Methode getUserMedia bereitgestellt wurde, wird als constraints (Beschränkungen) bezeichnet. Dadurch wird festgelegt, für welche der Medieneingabegeräte Sie Zugriffsberechtigungen anfordern. Wenn das Objekt beispielsweise audio: true enthält, wird der Benutzer aufgefordert, Zugriff auf das Audio-Eingabegerät zu gewähren.

      Schritt 3 — Verstehen von Medienbeschränkungen

      Dieser Abschnitt behandelt das allgemeine Konzept von constraints. Das Objekt constraints ist ein MediaStreamConstraints-Objekt, das die anzufordernden Medientypen und die Anforderungen jedes Medientyps angibt. Mit dem Objekt constraints können Sie Anforderungen für den angeforderten Stream angeben, wie beispielsweise die Auflösung des zu verwendenden Streams (front, back).

      Sie müssen entweder audio oder video angeben, wenn Sie die Anfrage stellen. Ein NotFoundError wird zurückgegeben, wenn die angeforderten Medientypen im Browser des Benutzers nicht gefunden werden können.

      Wenn Sie beabsichtigen, einen Video-Stream mit einer Auflösung von 1280 × 720 anzufordern, können Sie das Objekt constraints so aktualisieren, dass es wie folgt aussieht:

      {
        video: {
          width: 1280,
          height: 720,
        }
      }
      

      Mit dieser Aktualisierung versucht der Browser, die angegebenen Qualitätseinstellungen für den Stream zu übernehmen. Wenn das Videogerät diese Auflösung nicht liefern kann, gibt der Browser andere verfügbare Auflösungen zurück.

      Um sicherzustellen, dass der Browser eine Auflösung zurückgibt, die nicht niedriger als die vorgegebene Auflösung ist, müssen Sie die Eigenschaft min verwenden. Nachfolgend wird gezeigt, wie Sie das Objekt constraints aktualisieren können, um die Eigenschaft min einzuschließen:

      {
        video: {
          width: {
            min: 1280,
          },
          height: {
            min: 720,
          }
        }
      }
      

      Dadurch wird sichergestellt, dass die zurückgegebene Stream-Auflösung mindestens 1280 × 720 beträgt. Wenn diese Mindestanforderungen nicht erfüllt werden kann, wird das Promise mit einem OverconstrainedError abgelehnt.

      In einigen Fällen haben Sie eventuell Bedenken hinsichtlich der Datenspeicherung und möchten, dass der Stream eine festgelegte Auflösung nicht überschreitet. Dies kann sich als nützlich erweisen, wenn der Benutzer einen begrenzten Datenplan verwendet. Um diese Funktionalität zu aktivieren, aktualisieren Sie das Beschränkungsobjekt, damit es ein Feld max enthält:

      {
        video: {
          width: {
            min: 1280,
            max: 1920,
          },
          height: {
            min: 720,
            max: 1080
          }
        }
      }
      

      Mit diesen Einstellungen stellt der Browser sicher, dass der zurückgegebene Stream nicht unter 1280 × 720 liegt und 1920 × 1080 nicht überschreitet.

      Andere Begriffe, die verwendet werden können, sind exact und ideal. Die Einstellung ideal wird typischerweise zusammen mit den Eigenschaften min und max verwendet, um die bestmögliche Einstellung zu finden, die den idealen Werten am nächsten kommt.

      Sie können die Beschränkungen zur Verwendung des Schlüsselworts ideal aktualisieren:

      {
        video: {
          width: {
            min: 1280,
            ideal: 1920,
            max: 2560,
          },
          height: {
            min: 720,
            ideal: 1080,
            max: 1440
          }
        }
      }
      

      Um den Browser anzuweisen, die vordere und hintere (bei mobilen Geräten) Kamera von Geräten verwenden, können Sie eine Eigenschaft facingMode im Objekt video angeben:

      {
        video: {
          width: {
            min: 1280,
            ideal: 1920,
            max: 2560,
          },
          height: {
            min: 720,
            ideal: 1080,
            max: 1440
          },
          facingMode: 'user'
        }
      }
      

      Diese Einstellung verwendet die nach vorn gerichtete Kamera jederzeit bei allen Geräten. Um die Rückseitenkamera von mobilen Geräten zu verwenden, können Sie die Eigenschaft facingMode zu environment ändern.

      {
        video: {
          ...
          facingMode: {
            exact: 'environment'
          }
        }
      }
      

      Schritt 4 — Verwenden der Methode enumerateDevices

      Wird die Methode enumerateDevices aufgerufen, gibt sie alle verfügbaren Eingabemediengeräte zurück, die auf dem PC des Benutzers verfügbar sind.

      Mit der Methode können Sie den Benutzern Optionen zur Verfügung stellen, welches Eingabemediengerät für das Streaming von Audio- oder Videoinhalten verwendet werden soll. Diese Methode gibt ein Promise aufgelöst an ein Array MediaDeviceInfo zurück, das Informationen zu jedem Gerät enthält.

      Ein Beispiel für die Verwendung dieser Methode wird im nachstehenden Ausschnitt gezeigt:

      async function getDevices() {
        const devices = await navigator.mediaDevices.enumerateDevices();
      }
      

      Eine Beispielantwort für jedes der Geräte würde wie folgt aussehen:

      {
        deviceId: "23e77f76e308d9b56cad920fe36883f30239491b8952ae36603c650fd5d8fbgj",
        groupId: "e0be8445bd846722962662d91c9eb04ia624aa42c2ca7c8e876187d1db3a3875",
        kind: "audiooutput",
        label: "",
      }
      

      Anmerkung: Ein Label wird nur dann zurückgegeben, wenn ein verfügbarer Stream verfügbar ist oder wenn der Benutzer Zugriffsberechtigungen für Geräte erteilt hat.

      Schritt 5 — Anzeigen des Video-Streams im Browser

      Sie haben den Prozess der Anfrage und des Zugriffs auf die Mediengeräte durchlaufen, Einschränkungen für die erforderlichen Auflösungen konfiguriert und die Kamera ausgewählt, die Sie für die Videoaufzeichnung benötigen.

      Nach all diesen Schritten wollen Sie zumindest sehen, ob der Stream anhand der konfigurierten Einstellungen bereitgestellt wird. Um dies sicherzustellen, verwenden Sie das Element <video> zur Anzeige des Video-Streams im Browser.

      Wie bereits erwähnt, gibt die Methode getUserMedia ein Promise zurück, das in einen Stream aufgelöst werden kann. Der zurückgegebene Stream kann mit der Methode createObjectURL in eine Objekt-URL konvertiert werden. Diese URL wird als Videoquelle festgelegt.

      Sie werden eine kurze Demo erstellen, bei der wir den Benutzer mit der Methode enumerateDevices aus der Liste der verfügbaren Videogeräte auswählen lassen.

      Dies ist eine Methode navigator.mediaDevices. Sie listet die verfügbaren Mediengeräte wie Mikrofone und Kameras auf. Sie gibt ein auflösbares Promise an ein Array von Objekten zurück, das die verfügbaren Mediengeräte detailliert auflistet.

      Erstellen Sie eine Datei index.html und aktualisieren Sie den Inhalt mit dem nachstehenden Code:

      index.html

      <!doctype html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <meta name="viewport"
                content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
          <meta http-equiv="X-UA-Compatible" content="ie=edge">
          <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
          <link rel="stylesheet" href="style.css">
          <title>Document</title>
      </head>
      <body>
      <div class="display-cover">
          <video autoplay></video>
          <canvas class="d-none"></canvas>
      
          <div class="video-options">
              <select name="" id="" class="custom-select">
                  <option value="">Select camera</option>
              </select>
          </div>
      
          <img class="screenshot-image d-none" alt="">
      
          <div class="controls">
              <button class="btn btn-danger play" title="Play"><i data-feather="play-circle"></i></button>
              <button class="btn btn-info pause d-none" title="Pause"><i data-feather="pause"></i></button>
              <button class="btn btn-outline-success screenshot d-none" title="ScreenShot"><i data-feather="image"></i></button>
          </div>
      </div>
      
      <script src="https://unpkg.com/feather-icons"></script>
      <script src="script.js"></script>
      </body>
      </html>
      

      Im obigen Ausschnitt haben Sie die von Ihnen benötigten Elemente und einige Steuerelemente für das Video eingerichtet. Außerdem ist eine Schaltfläche für die Aufnahme von Screenshots des aktuellen Video-Feeds enthalten.

      Lassen Sie uns diese Komponenten ein wenig stylen.

      Erstellen Sie eine Datei style.css und kopieren Sie die folgenden Stile in sie. Bootstrap wurde hinzugefügt, um die Menge an CSS zu reduzieren, die Sie schreiben müssen, um die Komponenten in Gang zu bringen.

      style.css

      .screenshot-image {
          width: 150px;
          height: 90px;
          border-radius: 4px;
          border: 2px solid whitesmoke;
          box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
          position: absolute;
          bottom: 5px;
          left: 10px;
          background: white;
      }
      
      .display-cover {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 70%;
          margin: 5% auto;
          position: relative;
      }
      
      video {
          width: 100%;
          background: rgba(0, 0, 0, 0.2);
      }
      
      .video-options {
          position: absolute;
          left: 20px;
          top: 30px;
      }
      
      .controls {
          position: absolute;
          right: 20px;
          top: 20px;
          display: flex;
      }
      
      .controls > button {
          width: 45px;
          height: 45px;
          text-align: center;
          border-radius: 100%;
          margin: 0 6px;
          background: transparent;
      }
      
      .controls > button:hover svg {
          color: white !important;
      }
      
      @media (min-width: 300px) and (max-width: 400px) {
          .controls {
              flex-direction: column;
          }
      
          .controls button {
              margin: 5px 0 !important;
          }
      }
      
      .controls > button > svg {
          height: 20px;
          width: 18px;
          text-align: center;
          margin: 0 auto;
          padding: 0;
      }
      
      .controls button:nth-child(1) {
          border: 2px solid #D2002E;
      }
      
      .controls button:nth-child(1) svg {
          color: #D2002E;
      }
      
      .controls button:nth-child(2) {
          border: 2px solid #008496;
      }
      
      .controls button:nth-child(2) svg {
          color: #008496;
      }
      
      .controls button:nth-child(3) {
          border: 2px solid #00B541;
      }
      
      .controls button:nth-child(3) svg {
          color: #00B541;
      }
      
      .controls > button {
          width: 45px;
          height: 45px;
          text-align: center;
          border-radius: 100%;
          margin: 0 6px;
          background: transparent;
      }
      
      .controls > button:hover svg {
          color: white;
      }
      

      Der nächste Schritt besteht darin, der Demo Funktionalität hinzuzufügen. Mit der Methode enumerateDevices erhalten Sie die verfügbaren Videogeräte und legen sie als Optionen innerhalb des Elements „select“ fest. Erstellen Sie eine Datei namens script.js und aktualisieren Sie sie mit dem folgenden Ausschnitt:

      script.js

      feather.replace();
      
      const controls = document.querySelector('.controls');
      const cameraOptions = document.querySelector('.video-options>select');
      const video = document.querySelector('video');
      const canvas = document.querySelector('canvas');
      const screenshotImage = document.querySelector('img');
      const buttons = [...controls.querySelectorAll('button')];
      let streamStarted = false;
      
      const [play, pause, screenshot] = buttons;
      
      const constraints = {
        video: {
          width: {
            min: 1280,
            ideal: 1920,
            max: 2560,
          },
          height: {
            min: 720,
            ideal: 1080,
            max: 1440
          },
        }
      };
      
      const getCameraSelection = async () => {
        const devices = await navigator.mediaDevices.enumerateDevices();
        const videoDevices = devices.filter(device => device.kind === 'videoinput');
        const options = videoDevices.map(videoDevice => {
          return `<option value="${videoDevice.deviceId}">${videoDevice.label}</option>`;
        });
        cameraOptions.innerHTML = options.join('');
      };
      
      play.onclick = () => {
        if (streamStarted) {
          video.play();
          play.classList.add('d-none');
          pause.classList.remove('d-none');
          return;
        }
        if ('mediaDevices' in navigator && navigator.mediaDevices.getUserMedia) {
          const updatedConstraints = {
            ...constraints,
            deviceId: {
              exact: cameraOptions.value
            }
          };
          startStream(updatedConstraints);
        }
      };
      
      const startStream = async (constraints) => {
        const stream = await navigator.mediaDevices.getUserMedia(constraints);
        handleStream(stream);
      };
      
      const handleStream = (stream) => {
        video.srcObject = stream;
        play.classList.add('d-none');
        pause.classList.remove('d-none');
        screenshot.classList.remove('d-none');
        streamStarted = true;
      };
      
      getCameraSelection();
      

      Im obigen Ausschnitt sind einige Dinge zu erkennen. Schlüsseln wir diese auf:

      1. feather.replace(): dieser Methodenaufruf instanziiert feather, wobei es sich um einen Symbolsatz für die Webentwicklung handelt.
      2. Die Variable constraints enthält die anfängliche Konfiguration für den Stream. Diese wird erweitert, um das vom Benutzer gewählte Mediengerät einzubeziehen.
      3. getCameraSelection: diese Funktion ruft die Methode enumerateDevices auf. Dann filtern Sie durch das Array aus dem aufgelösten Promise und wählen Video-Eingabegeräte aus. Aus den gefilterten Ergebnissen erstellen Sie <option> für das Element <select>.
      4. Der Aufruf der Methode getUserMedia erfolgt innerhalb des Listeners onclick der Schaltfläche play. Hier überprüfen Sie vor dem Start des Streams, ob diese Methode vom Browser des Benutzers unterstützt wird.
      5. Als Nächstes rufen Sie die Funktion startStream auf, die ein Argument constraints benötigt. Sie ruft die Methode getUserMedia mit den angegebenen constraints auf. handleStream wird mit dem Stream aus dem aufgelösten Promise aufgerufen. Diese Methode setzt den zurückgegebenen Stream auf das srcObject des Videoelements.

      Als Nächstes fügen Sie den Schaltflächen-Steuerelementen auf der Seite Klick-Listener für pause, stop und zur Aufnahme von screenshots hinzu. Außerdem fügen Sie dem Element <select> einen Listener hinzu, um die Stream-Beschränkungen mit dem ausgewählten Videogerät zu aktualisieren.

      Aktualisieren Sie die Datei script.js mit dem nachstehenden Code:

      script.js

      ...
      cameraOptions.onchange = () => {
        const updatedConstraints = {
          ...constraints,
          deviceId: {
            exact: cameraOptions.value
          }
        };
        startStream(updatedConstraints);
      };
      
      const pauseStream = () => {
        video.pause();
        play.classList.remove('d-none');
        pause.classList.add('d-none');
      };
      
      const doScreenshot = () => {
        canvas.width = video.videoWidth;
        canvas.height = video.videoHeight;
        canvas.getContext('2d').drawImage(video, 0, 0);
        screenshotImage.src = canvas.toDataURL('image/webp');
        screenshotImage.classList.remove('d-none');
      };
      
      pause.onclick = pauseStream;
      screenshot.onclick = doScreenshot;
      

      Wenn Sie jetzt die Datei index.html im Browser öffnen, wird das Anklicken der Schaltfläche Play den Stream starten.

      Hier ist eine vollständige Demo:

      Zusammenfassung

      In diesem Tutorial wurde die API getUserMedia vorgestellt. Sie ist eine interessante Ergänzung zu HTML5, die den Prozess der Erfassung von Medien im Web erleichtert.

      Die API verwendet einen Parameter (constraints), mit dem der Zugriff auf Audio- und Video-Eingabegeräte konfiguriert werden kann. Sie kann auch verwendet werden, um die für Ihre Anwendung erforderliche Videoauflösung anzugeben.

      Sie können die Demo weiter erweitern, um dem Benutzer eine Option zu geben, die aufgenommenen Screenshots zu speichern, sowie Video- und Audiodaten mit Hilfe der API MediaStream Recording aufzuzeichnen und zu speichern.



      Source link

      Cómo acceder a las cámaras delantera y trasera con getUserMedia() de JavaScript


      Introducción

      Con HTML5 llegó la introducción de las API con acceso al hardware del dispositivo, incluyendo la API MediaDevices. Esta API proporciona acceso a dispositivos de entrada multimedia como audio y video.

      Con la ayuda de esta API, los desarrolladores pueden acceder a dispositivos de audio y video para transmitir y mostrar entradas de video en vivo en el navegador. En este tutorial, accederá a la entrada de video desde el dispositivo del usuario y la mostrará en el navegador usando el método getUserMedia:

      La API getUserMedia utiliza los dispositivos de entrada multimedia para producir un MediaStream. Este MediaStream contiene los tipos de multimedia solicitados, se trate de audio o video. Usando el flujo devuelto desde la API, las entradas de video pueden mostrarse en el navegador, lo cual es útil para la comunicación en tiempo real en el navegador.

      Cuando se utiliza junto con la API MediaStream Recording, puede grabar y guardar los datos multimedia capturados en el navegador. Esta API solo funciona en orígenes seguros como el resto de las APIs recién introducidas, pero también funciona en URLs localhost y archivo.

      Requisitos previos

      Este tutorial primero explicará los conceptos y demostrará ejemplos con Codepen. En el paso final, creará una entrada de video funcional para el navegador.

      Paso 1: Comprobar la compatibilidad del dispositivo

      Primero, verá cómo comprobar si el navegador del usuario es compatible con la API mediaDevices. Esta API existe en la interfaz navigator y contiene el estado actual y la identidad del agente del usuario. La comprobación se realiza con el siguiente código que puede pegarse en Codepen:

      if ('mediaDevices' in navigator && 'getUserMedia' in navigator.mediaDevices) {
        console.log("Let's get this party started")
      }
      

      Primero, esto comprueba si la API mediaDevices existe en navigator y, luego, comprueba si la API getUserMedia está disponible en mediaDevices. Si esto devuelve true, puede comenzar.

      Paso 2: Solicitar el permiso del usuario

      Tras confirmar que el navegador es compatible con getUserMedia, debe solicitar permiso para usar los dispositivos de entrada multimedia en el agente del usuario. Normalmente, una vez que un usuario concede permiso, se devuelve una Promise que se resuelve a un flujo multimedia. Esta Promise no se devuelve cuando el usuario deniega el permiso, lo que bloquea el acceso a estos dispositivos.

      Pegue la siguiente línea en Codepen para solicitar permiso:

      navigator.mediaDevices.getUserMedia({video: true})
      

      El objeto proporcionado como argumento para el método getUserMedia se denomina constraints. Esto determina a qué dispositivos de entrada multimedia está solicitando permiso de acceso. Por ejemplo, si el objeto contiene audio: true, se pedirá al usuario que conceda acceso al dispositivo de entrada de audio.

      Esta sección cubrirá el concepto general de constraints. El objeto constraints es un objeto MediaScreamConstraints que especifica los tipos de multimedia a solicitar y los requisitos de cada uno de esos tipos. Puede especificar requisitos para el flujo solicitado usando el objeto constraints, como la resolución del flujo a usar (front, back).

      Debe especificar un audio o video cuando se realiza la solicitud. Un NotFoundError será devuelto si los tipos multimedia solicitados no pueden encontrarse en el navegador del usuario.

      Si desea solicitar un flujo de video con una resolución 1280 x 720, puede actualizar el objeto constraints para que tenga este aspecto:

      {
        video: {
          width: 1280,
          height: 720,
        }
      }
      

      Con esta actualización, el navegador intentará hacer coincidir los ajustes de calidad especificados para el flujo. Si el dispositivo de video no puede proporcionar la resolución, el navegador devolverá otras resoluciones disponibles.

      Para garantizar que el navegador devuelve una resolución que no sea inferior a la proporcionada, tendrá que usar la propiedad min. Aquí tiene cómo podrá actualizar el objeto constraints para incluir la propiedad min:

      {
        video: {
          width: {
            min: 1280,
          },
          height: {
            min: 720,
          }
        }
      }
      

      Esto garantizará que la resolución del flujo se devolvió con al menos 1280 x 720. Si no se puede cumplir este requisito mínimo, la promesa se rechazará con un OverconstrainedError.

      El algunos casos es posible que esté preocupado sobre guardar los datos y necesite que el flujo no supere una resolución establecida. Esto puede ser útil cuando el usuario esté en un plan limitado. Para habilitar esta funcionalidad, actualice el objeto constraints para que contenga el campo max:

      {
        video: {
          width: {
            min: 1280,
            max: 1920,
          },
          height: {
            min: 720,
            max: 1080
          }
        }
      }
      

      Con estos ajustes, el navegador garantizará que el flujo de retorno no está por debajo de 1280 x 720 y no supera 1920 x 1080.

      Otros términos que pueden usarse son exact e ideal. El ajuste ideal normalmente se utiliza junto con las propiedades min y max para buscar el mejor ajuste posible más cercano a los valores ideales proporcionados.

      Puede actualizar las restricciones para usar la palabra clave ideal:

      {
        video: {
          width: {
            min: 1280,
            ideal: 1920,
            max: 2560,
          },
          height: {
            min: 720,
            ideal: 1080,
            max: 1440
          }
        }
      }
      

      Para indicar al navegador que utilice la cámara frontal o trasera (en móvil) en los dispositivos, puede especificar una propiedad facingMode en el objeto video:

      {
        video: {
          width: {
            min: 1280,
            ideal: 1920,
            max: 2560,
          },
          height: {
            min: 720,
            ideal: 1080,
            max: 1440
          },
          facingMode: 'user'
        }
      }
      

      Este ajuste usará la cámara delantera siempre en todos los dispositivos. Para usar la cámara trasera en dispositivos móviles, puede alterar la propiedad facingMode a environment.

      {
        video: {
          ...
          facingMode: {
            exact: 'environment'
          }
        }
      }
      

      Paso 4: Usar el método enumerateDevices

      Cuando se invoca el método enumerateDevices, devuelve todos los dispositivos multimedia de entrada disponibles en la PC del usuario.

      Con el método, puede proporcionar las opciones del usuario sobre las cuales usar el dispositivo multimedia de entrada para transmitir contenido de audio o video. Este método devuelve una Promise resuelta a una matriz MediaDeviceInfo que contiene información sobre cada dispositivo.

      En el siguiente snippet se muestra un ejemplo de cómo usar este método:

      async function getDevices() {
        const devices = await navigator.mediaDevices.enumerateDevices();
      }
      

      Una respuesta de muestra para cada uno de los dispositivos tendría este aspecto:

      {
        deviceId: "23e77f76e308d9b56cad920fe36883f30239491b8952ae36603c650fd5d8fbgj",
        groupId: "e0be8445bd846722962662d91c9eb04ia624aa42c2ca7c8e876187d1db3a3875",
        kind: "audiooutput",
        label: "",
      }
      

      Nota: Una etiqueta no se devolverá a menos que exista un flujo disponible, o si el usuario ha concedido permisos de acceso al dispositivo.

      Paso 5: Mostrar el flujo de video en el navegador

      Ha repasado el proceso de solicitar y obtener acceso a los dispositivos multimedia, configurado las restricciones para incluir las resoluciones requeridas y seleccionado la cámara que necesitará para grabar video.

      Tras realizar estos pasos, al menos querrá ver si el flujo está funcionando según los ajustes configurados. Para garantizar esto, usará el elemento <video> para mostrar el flujo de video en el navegador.

      Como se ha mencionado antes, el método getUserMedia devuelve una Promesa que puede resolverse a un flujo. El flujo devuelto puede convertirse a una URL de objeto usando el método createObjectURL. Esta URL se establecerá como una fuente de video.

      Creará una demostración breve donde dejaremos al usuario elegir de su lista de dispositivos de video disponibles usando el método enumerateDevices.

      Este es un método navigator.mediaDevices. Enumera los dispositivos multimedia disponibles, como micrófonos y cámaras. Devuelve una Promesa que puede resolverse a una matriz de objetos que detalla los dispositivos multimedia disponibles.

      Cree un archivo index.html y actualice el contenido con el siguiente código.

      index.html

      <!doctype html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <meta name="viewport"
                content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
          <meta http-equiv="X-UA-Compatible" content="ie=edge">
          <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
          <link rel="stylesheet" href="style.css">
          <title>Document</title>
      </head>
      <body>
      <div class="display-cover">
          <video autoplay></video>
          <canvas class="d-none"></canvas>
      
          <div class="video-options">
              <select name="" id="" class="custom-select">
                  <option value="">Select camera</option>
              </select>
          </div>
      
          <img class="screenshot-image d-none" alt="">
      
          <div class="controls">
              <button class="btn btn-danger play" title="Play"><i data-feather="play-circle"></i></button>
              <button class="btn btn-info pause d-none" title="Pause"><i data-feather="pause"></i></button>
              <button class="btn btn-outline-success screenshot d-none" title="ScreenShot"><i data-feather="image"></i></button>
          </div>
      </div>
      
      <script src="https://unpkg.com/feather-icons"></script>
      <script src="script.js"></script>
      </body>
      </html>
      

      En el anterior snippet, ha configurado los elementos que necesitará y un par de controles para el video. Además se ha incluido un botón para hacer capturas de pantalla de la entrada de video actual.

      Ahora, vamos a crear el estilo de estos componentes.

      Cree un archivo style.css y copie los siguientes estilos en él. Bootstrap se incluyó para reducir la cantidad de CSS que necesitará escribir para poner en marcha los componentes.

      style.css

      .screenshot-image {
          width: 150px;
          height: 90px;
          border-radius: 4px;
          border: 2px solid whitesmoke;
          box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
          position: absolute;
          bottom: 5px;
          left: 10px;
          background: white;
      }
      
      .display-cover {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 70%;
          margin: 5% auto;
          position: relative;
      }
      
      video {
          width: 100%;
          background: rgba(0, 0, 0, 0.2);
      }
      
      .video-options {
          position: absolute;
          left: 20px;
          top: 30px;
      }
      
      .controls {
          position: absolute;
          right: 20px;
          top: 20px;
          display: flex;
      }
      
      .controls > button {
          width: 45px;
          height: 45px;
          text-align: center;
          border-radius: 100%;
          margin: 0 6px;
          background: transparent;
      }
      
      .controls > button:hover svg {
          color: white !important;
      }
      
      @media (min-width: 300px) and (max-width: 400px) {
          .controls {
              flex-direction: column;
          }
      
          .controls button {
              margin: 5px 0 !important;
          }
      }
      
      .controls > button > svg {
          height: 20px;
          width: 18px;
          text-align: center;
          margin: 0 auto;
          padding: 0;
      }
      
      .controls button:nth-child(1) {
          border: 2px solid #D2002E;
      }
      
      .controls button:nth-child(1) svg {
          color: #D2002E;
      }
      
      .controls button:nth-child(2) {
          border: 2px solid #008496;
      }
      
      .controls button:nth-child(2) svg {
          color: #008496;
      }
      
      .controls button:nth-child(3) {
          border: 2px solid #00B541;
      }
      
      .controls button:nth-child(3) svg {
          color: #00B541;
      }
      
      .controls > button {
          width: 45px;
          height: 45px;
          text-align: center;
          border-radius: 100%;
          margin: 0 6px;
          background: transparent;
      }
      
      .controls > button:hover svg {
          color: white;
      }
      

      El siguiente paso es añadir funcionalidad a la demostración. Con el método enumerateDevices, obtendrá los dispositivos de video disponibles y establecerlo como las opciones en el elemento seleccionado. Cree un archivo llamado script.js y actualícelo con el siguiente snippet:

      script.js

      feather.replace();
      
      const controls = document.querySelector('.controls');
      const cameraOptions = document.querySelector('.video-options>select');
      const video = document.querySelector('video');
      const canvas = document.querySelector('canvas');
      const screenshotImage = document.querySelector('img');
      const buttons = [...controls.querySelectorAll('button')];
      let streamStarted = false;
      
      const [play, pause, screenshot] = buttons;
      
      const constraints = {
        video: {
          width: {
            min: 1280,
            ideal: 1920,
            max: 2560,
          },
          height: {
            min: 720,
            ideal: 1080,
            max: 1440
          },
        }
      };
      
      const getCameraSelection = async () => {
        const devices = await navigator.mediaDevices.enumerateDevices();
        const videoDevices = devices.filter(device => device.kind === 'videoinput');
        const options = videoDevices.map(videoDevice => {
          return `<option value="${videoDevice.deviceId}">${videoDevice.label}</option>`;
        });
        cameraOptions.innerHTML = options.join('');
      };
      
      play.onclick = () => {
        if (streamStarted) {
          video.play();
          play.classList.add('d-none');
          pause.classList.remove('d-none');
          return;
        }
        if ('mediaDevices' in navigator && navigator.mediaDevices.getUserMedia) {
          const updatedConstraints = {
            ...constraints,
            deviceId: {
              exact: cameraOptions.value
            }
          };
          startStream(updatedConstraints);
        }
      };
      
      const startStream = async (constraints) => {
        const stream = await navigator.mediaDevices.getUserMedia(constraints);
        handleStream(stream);
      };
      
      const handleStream = (stream) => {
        video.srcObject = stream;
        play.classList.add('d-none');
        pause.classList.remove('d-none');
        screenshot.classList.remove('d-none');
        streamStarted = true;
      };
      
      getCameraSelection();
      

      En el snippet anterior, suceden un par de cuestiones. Vamos a verlas:

      1. feather.replace(): este método invoca las instancias feather, que es un icono configurado para el desarrollo web.
      2. La variable constraints tiene la configuración inicial del flujo. Esto se ampliará para incluir el dispositivo multimedia que elija el usuario.
      3. getCameraSelection: esta función invoca el método enumarateDevices. A continuación, filtrará a través de la matriz desde la Promesa resuelva y seleccionará los dispositivos de entrada de video. Desde los resultados filtrados, cree <option> para el elemento <select>.
      4. La invocación del método getUserMedia sucede en la escucha onclick del botón play. Aquí, comprobará si este método es compatible con el navegador del usuario que inicia el flujo.
      5. A continuación, invocará la función startStream que asume el argumento constraints. Invoca el método getUserMedia con las restrictions proporcionadas. handleStream se invoca usando el flujo de la Promesa resuelta. Este método establece el flujo devuelto al srcObject del elemento de video.

      A continuación, añadirá escuchas a los controles de botón en la página para pausar, detener y hacer capturas de pantalla. Además, añadirá una escucha al elemento <select> para actualizar las restricciones del flujo con el dispositivo de video seleccionado.

      Actualice el archivo script.js con el siguiente código:

      script.js

      ...
      cameraOptions.onchange = () => {
        const updatedConstraints = {
          ...constraints,
          deviceId: {
            exact: cameraOptions.value
          }
        };
        startStream(updatedConstraints);
      };
      
      const pauseStream = () => {
        video.pause();
        play.classList.remove('d-none');
        pause.classList.add('d-none');
      };
      
      const doScreenshot = () => {
        canvas.width = video.videoWidth;
        canvas.height = video.videoHeight;
        canvas.getContext('2d').drawImage(video, 0, 0);
        screenshotImage.src = canvas.toDataURL('image/webp');
        screenshotImage.classList.remove('d-none');
      };
      
      pause.onclick = pauseStream;
      screenshot.onclick = doScreenshot;
      

      Ahora, cuando abra el archivo index.html en el navegador, al hacer clic en el botón Play se iniciará el flujo.

      Aquí está la demostración completa:

      Conclusión

      Este tutorial introdujo la API getUserMedia. Es una adición interesante a HTML5 que facilita el proceso de capturar multimedia en la web.

      La API asume un parámetro constraints que puede usarse para configurar el acceso a los dispositivos de entrada de audio y video. También puede usarse para especificar la resolución de video necesaria para su aplicación.

      Puede ampliar la demo para dar al usuario una opción de guardar las capturas de pantalla tomadas, y grabar y almacenar datos de video y audio con la ayuda de la API MediaStream Recording.



      Source link

      Comment accéder aux caméras Avant et Arrière avec getUserMedia() de JavaScript.


      Introduction

      Le HTML5 a permis l’introduction d’API donnant accès aux composants matériels des appareils, y compris de l’API MediaDevices. Cette API permet d’accéder à des périphériques d’entrée média comme l’audio et la vidéo.

      Avec l’aide de cette API, les développeurs peuvent accéder à des appareils audio et vidéo pour diffuser et afficher des flux vidéo en direct dans le navigateur. Dans ce tutoriel, vous accéderez au flux vidéo à partir de l’appareil de l’utilisateur et l’afficherez dans le navigateur à l’aide du getUserMedia méthode.

      L’API getUserMedia utilise les périphériques d’entrée média pour produire un MediaStream. Ce MediaStream contient les types de médias demandés, qu’ils soient audio ou vidéo. Grâce au flux renvoyé par l’API, les flux vidéo peuvent être affichés sur le navigateur, ce qui est utile pour la communication en temps réel sur le navigateur.

      Lorsqu’il est utilisé avec l’ API MediaStream Recording, vous pouvez enregistrer et stocker des données médias saisies sur le navigateur. Cette API ne fonctionne que sur les origines sécurisées (comme les autres API nouvellement introduites), mais elle fonctionne également sur localhost et sur les URL des fichiers.

      Conditions préalables

      • Une connaissance de base de JavaScript. Si vous ne connaissez pas JavaScript, essayez de consulter la série Comment coder en JavaScript.

      Ce tutoriel explique d’abord les concepts et présente des exemples avec Codepen. Dans la dernière étape, vous créerez un flux vidéo fonctionnel pour le navigateur.

      Étape 1 – Vérification de la prise en charge de l’appareil

      Tout d’abord, vous verrez comment vérifier si le navigateur de l’utilisateur prend en charge l’API mediaDevices. Cette API existe dans le navigateur et contient l’état actuel et l’identité de l’agent utilisateur. Le contrôle est effectué à l’aide du code suivant, qui peut être collé dans Codepen :

      if ('mediaDevices' in navigator && 'getUserMedia' in navigator.mediaDevices) {
        console.log("Let's get this party started")
      }
      

      Tout d’abord, cela permet de vérifier si l’API mediaDevices existe dans le navigateur et vérifie ensuite si l’API getUserMedia est disponible dans le mediaDevices. Si cela revient comme true, vous pouvez commencer.

      Étape 2 – Demander la permission de l’utilisateur

      Après avoir confirmé la prise en charge de getUserMedia par le navigateur, vous devez demander l’autorisation d’utiliser les périphériques de saisie des médias sur l’agent utilisateur. Généralement, après qu’un utilisateur ait accordé sa permission, une Promise est renvoyée, qui se transforme en flux média. Cette Promise n’est pas renvoyée lorsque la permission est refusée par l’utilisateur, ce qui bloque l’accès à ces appareils.

      Collez la ligne suivante dans le Codepen pour demander l’autorisation :

      navigator.mediaDevices.getUserMedia({video: true})
      

      L’objet fourni comme argument pour la méthode getUserMedia est appelé constraints. Cela permet de déterminer les périphériques d’entrée média auxquels vous demandez l’autorisation d’accéder. Par exemple, si l’objet contient audio : true, l’utilisateur(rice) sera invité(e) à accorder l’accès au dispositif d’entrée audio.

      Étape 3 – Comprendre les contraintes des médias

      Cette section couvrira le concept général de constraints. L’objet constraints est un objet MediaStreamConstraints qui spécifie les types de médias à demander et les exigences de chaque type de média. Vous pouvez spécifier les exigences pour le flux demandé en utilisant l’objet constraints comme la résolution du flux à utiliser (avant, arrière).

      Vous devez préciser soit audio ou vidéo lors de la demande. Une erreur NotFoundError sera renvoyée si les types de médias demandés ne peuvent être trouvés sur le navigateur de l’utilisateur.

      Si vous avez l’intention de demander un flux vidéo d’une résolution de 1280 x 720, vous pouvez mettre à jour l’objet constraints pour qu’il ressemble à ceci :

      {
        video: {
          width: 1280,
          height: 720,
        }
      }
      

      Avec cette mise à jour, le navigateur essaiera de correspondre aux paramètres de qualité spécifiés pour le flux. Si l’appareil vidéo ne peut pas fournir cette résolution, le navigateur renvoie les autres résolutions disponibles.

      Pour garantir que le navigateur renvoie une résolution qui ne soit pas inférieure à celle fournie, vous devrez utiliser la propriété min. Voici comment vous pourriez mettre à jour l’objet constraints pour inclure la propriété min :

      {
        video: {
          width: {
            min: 1280,
          },
          height: {
            min: 720,
          }
        }
      }
      

      Cela permettra de garantir que la résolution de flux renvoyée sera au moins 1280 x 720. Si cette exigence minimale ne peut pas être respectée, la Promise sera rejetée avec une OverconstrainedError.

      Dans certains cas, vous pouvez être préoccupé(e) par la sauvegarde des données et avoir besoin que le flux ne dépasse pas une résolution donnée. Cela peut s’avérer utile lorsque l’utilisateur est sur un plan limité. Pour activer cette fonctionnalité, mettez à jour l’objet constraints pour qu’il contienne un champ max :

      {
        video: {
          width: {
            min: 1280,
            max: 1920,
          },
          height: {
            min: 720,
            max: 1080
          }
        }
      }
      

      Avec ces paramètres, le navigateur veillera à ce que le flux de retour ne soit pas inférieur à 1280 x 720 et ne dépasse pas 1920 x 1080.

      D’autres termes peuvent être utilisés, notamment exact et ideal. Le paramètre ideal est généralement utilisé avec les propriétés min et max pour trouver le meilleur paramètre possible le plus proche des valeurs idéales fournies.

      Vous pouvez mettre à jour les constraints pour utiliser le mot-clé ideal :

      {
        video: {
          width: {
            min: 1280,
            ideal: 1920,
            max: 2560,
          },
          height: {
            min: 720,
            ideal: 1080,
            max: 1440
          }
        }
      }
      

      Pour indiquer au navigateur d’utiliser la caméra avant ou arrière (sur les appareils mobiles) sur les appareils, vous pouvez spécifier une propriété facingMode dans l’objet video :

      {
        video: {
          width: {
            min: 1280,
            ideal: 1920,
            max: 2560,
          },
          height: {
            min: 720,
            ideal: 1080,
            max: 1440
          },
          facingMode: 'user'
        }
      }
      

      Ce paramètre permet d’utiliser la caméra frontale à tout moment dans tous les appareils. Pour utiliser la caméra arrière sur les appareils mobiles, vous pouvez modifier la propriété facingMode à environment.

      {
        video: {
          ...
          facingMode: {
            exact: 'environment'
          }
        }
      }
      

      Étape 4 – Utiliser la méthode enumerateDevices

      Lorsque la méthode enumerateDevices est appelée, elle renvoie tous les supports d’entrée disponibles sur le PC de l’utilisateur.

      Avec cette méthode, vous pouvez fournir à l’utilisateur des options sur le périphérique d’entrée à utiliser pour la diffusion de contenu audio ou vidéo en continu. Cette méthode renvoie une Promise résolue en un tableau MediaDeviceInfo contenant des informations sur chaque appareil.

      Un exemple d’utilisation de cette méthode est présenté dans l’extrait ci-dessous :

      async function getDevices() {
        const devices = await navigator.mediaDevices.enumerateDevices();
      }
      

      Un exemple de réponse pour chacun des dispositifs ressemblerait à ce qui suit :

      {
        deviceId: "23e77f76e308d9b56cad920fe36883f30239491b8952ae36603c650fd5d8fbgj",
        groupId: "e0be8445bd846722962662d91c9eb04ia624aa42c2ca7c8e876187d1db3a3875",
        kind: "audiooutput",
        label: "",
      }
      

      Remarque : une étiquette ne sera pas renvoyée si un flux n’est pas disponible ou si l’utilisateur a accordé des autorisations d’accès au dispositif.

      Étape 5 – Afficher le flux vidéo sur le navigateur

      Vous êtes passé(e) par le processus de demande et d’obtention de l’accès aux appareils multimédias, vous avez configuré des contraintes pour inclure les résolutions requises et vous avez sélectionné la caméra dont vous aurez besoin pour enregistrer la vidéo.

      Après avoir parcouru toutes ces étapes, vous voudrez au moins voir si le flux est diffusé en fonction des paramètres configurés. Pour ce faire, vous utiliserez l’élément <vidéo> pour afficher le flux vidéo sur le navigateur.

      Comme mentionné précédemment, la méthode getUserMedia renvoie une Promise qui peut être résolue en un flux. Le flux renvoyé peut être converti en une URL objet en utilisant la méthode createObjectURL. Cette URL sera définie comme une source vidéo.

      Vous allez créer une courte démo dans laquelle nous laissons l’utilisateur choisir parmi la liste des appareils vidéo disponibles avec la méthode enumerateDevices.

      Ceci est une méthode navigateur.mediaDevices. Elle énumère les périphériques médias disponibles, tels que les microphones et les caméras. Elle renvoie une Promise résolvable à un ensemble d’objets détaillant les périphériques médias disponibles.

      Créez un fichier index.html et mettez à jour le contenu avec le code ci-dessous :

      index.html

      <!doctype html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <meta name="viewport"
                content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
          <meta http-equiv="X-UA-Compatible" content="ie=edge">
          <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
          <link rel="stylesheet" href="style.css">
          <title>Document</title>
      </head>
      <body>
      <div class="display-cover">
          <video autoplay></video>
          <canvas class="d-none"></canvas>
      
          <div class="video-options">
              <select name="" id="" class="custom-select">
                  <option value="">Select camera</option>
              </select>
          </div>
      
          <img class="screenshot-image d-none" alt="">
      
          <div class="controls">
              <button class="btn btn-danger play" title="Play"><i data-feather="play-circle"></i></button>
              <button class="btn btn-info pause d-none" title="Pause"><i data-feather="pause"></i></button>
              <button class="btn btn-outline-success screenshot d-none" title="ScreenShot"><i data-feather="image"></i></button>
          </div>
      </div>
      
      <script src="https://unpkg.com/feather-icons"></script>
      <script src="script.js"></script>
      </body>
      </html>
      

      Dans l’extrait ci-dessus, vous avez mis en place les éléments dont vous aurez besoin et quelques contrôles pour la vidéo. Un bouton permettant de prendre des captures d’écran du flux vidéo en cours est également inclus.

      Maintenant, mettons un peu de style dans ces éléments.

      Créez un fichier style.css et copiez les styles suivants dans celui-ci. Bootstrap a été inclus pour réduire la quantité de CSS que vous devrez écrire pour faire fonctionner les composants.

      style.css

      .screenshot-image {
          width: 150px;
          height: 90px;
          border-radius: 4px;
          border: 2px solid whitesmoke;
          box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
          position: absolute;
          bottom: 5px;
          left: 10px;
          background: white;
      }
      
      .display-cover {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 70%;
          margin: 5% auto;
          position: relative;
      }
      
      video {
          width: 100%;
          background: rgba(0, 0, 0, 0.2);
      }
      
      .video-options {
          position: absolute;
          left: 20px;
          top: 30px;
      }
      
      .controls {
          position: absolute;
          right: 20px;
          top: 20px;
          display: flex;
      }
      
      .controls > button {
          width: 45px;
          height: 45px;
          text-align: center;
          border-radius: 100%;
          margin: 0 6px;
          background: transparent;
      }
      
      .controls > button:hover svg {
          color: white !important;
      }
      
      @media (min-width: 300px) and (max-width: 400px) {
          .controls {
              flex-direction: column;
          }
      
          .controls button {
              margin: 5px 0 !important;
          }
      }
      
      .controls > button > svg {
          height: 20px;
          width: 18px;
          text-align: center;
          margin: 0 auto;
          padding: 0;
      }
      
      .controls button:nth-child(1) {
          border: 2px solid #D2002E;
      }
      
      .controls button:nth-child(1) svg {
          color: #D2002E;
      }
      
      .controls button:nth-child(2) {
          border: 2px solid #008496;
      }
      
      .controls button:nth-child(2) svg {
          color: #008496;
      }
      
      .controls button:nth-child(3) {
          border: 2px solid #00B541;
      }
      
      .controls button:nth-child(3) svg {
          color: #00B541;
      }
      
      .controls > button {
          width: 45px;
          height: 45px;
          text-align: center;
          border-radius: 100%;
          margin: 0 6px;
          background: transparent;
      }
      
      .controls > button:hover svg {
          color: white;
      }
      

      L’étape suivante consiste à ajouter des fonctionnalités à la démo. En utilisant la méthode enumerateDevices vous obtiendrez les appareils vidéo disponibles et vous les paramèterez comme options au sein de l’élément de sélection. Créez un fichier appelé script.js et mettez-le à jour avec l’extrait suivant :

      script.js

      feather.replace();
      
      const controls = document.querySelector('.controls');
      const cameraOptions = document.querySelector('.video-options>select');
      const video = document.querySelector('video');
      const canvas = document.querySelector('canvas');
      const screenshotImage = document.querySelector('img');
      const buttons = [...controls.querySelectorAll('button')];
      let streamStarted = false;
      
      const [play, pause, screenshot] = buttons;
      
      const constraints = {
        video: {
          width: {
            min: 1280,
            ideal: 1920,
            max: 2560,
          },
          height: {
            min: 720,
            ideal: 1080,
            max: 1440
          },
        }
      };
      
      const getCameraSelection = async () => {
        const devices = await navigator.mediaDevices.enumerateDevices();
        const videoDevices = devices.filter(device => device.kind === 'videoinput');
        const options = videoDevices.map(videoDevice => {
          return `<option value="${videoDevice.deviceId}">${videoDevice.label}</option>`;
        });
        cameraOptions.innerHTML = options.join('');
      };
      
      play.onclick = () => {
        if (streamStarted) {
          video.play();
          play.classList.add('d-none');
          pause.classList.remove('d-none');
          return;
        }
        if ('mediaDevices' in navigator && navigator.mediaDevices.getUserMedia) {
          const updatedConstraints = {
            ...constraints,
            deviceId: {
              exact: cameraOptions.value
            }
          };
          startStream(updatedConstraints);
        }
      };
      
      const startStream = async (constraints) => {
        const stream = await navigator.mediaDevices.getUserMedia(constraints);
        handleStream(stream);
      };
      
      const handleStream = (stream) => {
        video.srcObject = stream;
        play.classList.add('d-none');
        pause.classList.remove('d-none');
        screenshot.classList.remove('d-none');
        streamStarted = true;
      };
      
      getCameraSelection();
      

      Dans l’extrait ci-dessus, il y a deux choses qui se passent. Décomposons celles-ci :

      1. feather.replace() : cette méthode d’appel instancie feather qui est un ensemble d’icônes pour le développement web.
      2. La variable constraints contient la configuration initiale du flux. Elle sera étendue pour inclure le périphérique média choisi par l’utilisateur.
      3. getCameraSelection : cette fonction appelle la méthode enumerateDevices. Ensuite, vous filtrez le tableau à partir de la Promise résolue et sélectionnez les périphériques d’entrée vidéo À partir des résultats filtrés, vous créez <option> pour l’élément <select>.
      4. L’appel de la méthode getUserMedia se fait à l’intérieur de l’écouteur onclick du bouton de lecture. Ici, vous vérifierez si cette méthode est prise en charge par le navigateur de l’utilisateur avant de lancer le flux.
      5. Ensuite, vous appellerez la fonction startStream qui prend un argument constraints. Elle appelle la méthode getUserMedia avec les constraints fournies.handleStream est appelé en utilisant le flux de la Promise résolue Cette méthode fixe le flux renvoyé à l’élément vidéo srcObject.

      Ensuite, vous ajouterez des écouteurs de clics aux boutons de commande de la page pour faire une pause, arrêter et faire des captures d'écran. De plus, vous ajouterez un auditeur à l’élément <select> pour mettre à jour les contraintes de flux avec le périphérique vidéo sélectionné.

      Mettez à jour le fichier script.js avec le code ci-dessous :

      script.js

      ...
      cameraOptions.onchange = () => {
        const updatedConstraints = {
          ...constraints,
          deviceId: {
            exact: cameraOptions.value
          }
        };
        startStream(updatedConstraints);
      };
      
      const pauseStream = () => {
        video.pause();
        play.classList.remove('d-none');
        pause.classList.add('d-none');
      };
      
      const doScreenshot = () => {
        canvas.width = video.videoWidth;
        canvas.height = video.videoHeight;
        canvas.getContext('2d').drawImage(video, 0, 0);
        screenshotImage.src = canvas.toDataURL('image/webp');
        screenshotImage.classList.remove('d-none');
      };
      
      pause.onclick = pauseStream;
      screenshot.onclick = doScreenshot;
      

      Maintenant, lorsque vous ouvrez l’index.html dans le navigateur, cliquer le bouton Play permet de lancer le flux.

      Voici une démo complète :

      Conclusion

      Ce tutoriel a introduit l’API getUserMedia. C’est un ajout intéressant à HTML5, qui facilite le processus de capture des médias sur le web.

      L’API prend un paramètre (constraints) qui peut être utilisé pour configurer l’accès aux périphériques d’entrée audio et vidéo. Il peut également être utilisé pour spécifier la résolution vidéo requise pour votre application.

      Vous pouvez étendre la démo pour donner à l’utilisateur la possibilité de sauvegarder les captures d’écran réalisées, ainsi que d’enregistrer et de stocker des données vidéo et audio à l’aide de l’API MediaStream Recording.



      Source link