uso compartido de tecnología web | WebRTC controla la panorámica, la inclinación y el zoom de la cámara

MediaDevices.getUserMedia()Se le solicitará al usuario permiso para usar la entrada de medios, lo que generará una MediaStreampista que contenga el tipo de medio solicitado. Esta secuencia puede contener una pista de video (desde hardware o fuentes de video virtuales, como cámaras, dispositivos de captura de video, servicios de uso compartido de pantalla, etc.), una pista de audio (también desde hardware o fuentes de audio virtuales, como micrófonos, A/D). convertidores, etc. etc.), y posiblemente otros tipos de pistas.

Devuelve un objeto, que vuelve a llamar a un objeto Promiseen caso de éxito . Si el usuario deniega el permiso, o la fuente de medios requerida no está disponible, se devolverá la llamada o .resolveMediaStreampromiserejectPermissionDeniedErrorNotFoundError

parámetro

• constraints

  El parámetro de restricciones es un objeto que contiene videodos audiomiembros MediaStreamConstraints, que se utilizan para describir el tipo de medio solicitado. Se debe especificar al menos un tipo o ambos. Si el navegador no puede encontrar el tipo de medio especificado o no puede cumplir con los requisitos de los parámetros correspondientes, el objeto Promise devuelto estará en el estado rechazado [fallido] como parámetro NotFoundErrorde la devolución de llamada rechazada [fallida].

const constraints = {
    video: {
        pan: true, 
        tilt: true, 
        zoom: true
    }
};

async function init(e) {
    try {
        const stream = await navigator.mediaDevices.getUserMedia(constraints);
        handleSuccess(stream);
        e.target.disabled = true;
    } catch (e) {
        handleError(e);
    }
};

document.querySelector('#showVideo').addEventListener('click', e => init(e));

• getVideoTracks()El método devuelve una secuencia de objetos que representan las pistas de video en esta secuencia MediaStream.MediaStreamTrack

  • Una matriz MediaStreamTrackde objetos, uno para cada pista de video contenida en el flujo de medios. Las pistas de vídeo son aquellas kindcuyas propiedades son video. Esta matriz está vacía si la transmisión no contiene pistas de video.

• getCapabilitiesEl método devuelve un MediaTrackCapabilitiesobjeto que representa el valor o rango de cada propiedad ajustable, que depende de la plataforma y el agente de usuario.

• getSettings()El método devuelve un MediaTrackSettingsobjeto que contiene el valor actual de cada propiedad restringible de current MediaStreamTrack.

• applyConstraints()El método aplica un conjunto de restricciones a una pista; estas restricciones permiten que un sitio web o una aplicación establezcan valores ideales y rangos de valores aceptables para las propiedades restringibles de una pista (como la velocidad de fotogramas, el tamaño, la cancelación de eco, etc.).

function handleSuccess(stream) {
      const video = document.querySelector('video');
      const videoTracks = stream.getVideoTracks();
      video.srcObject = stream;

      const capabilities = videoTracks[0].getCapabilities();
      const settings = videoTracks[0].getSettings();
      for (const ptz of ['pan', 'tilt', 'zoom']) {
        if (!(ptz in settings)) {
          continue;
        }
        const input = document.querySelector(`input[name=${ptz}]`);
        input.min = capabilities[ptz].min;
        input.max = capabilities[ptz].max;
        input.step = capabilities[ptz].step;
        input.value = settings[ptz];
        input.disabled = false;
        input.oninput = async event => {
              try {
                const constraints = {advanced: [{[ptz]: input.value}]};
                await videoTracks[0].applyConstraints(constraints);
              } catch (err) {
                console.error('applyConstraints() failed: ', err);
              }
        };
      }
}

function handleError(error) {
  console.log(`getUserMedia error: ${error.name}`, error);
}

<style>
    div.label {
        display: inline-block;
        font-weight: 400;
        margin: 0 0.5em 0 0;
        width: 3.5em;
    }
    video {
        background: #222;
        margin: 0 0 20px 0;
        width: 500px;
        height: 400px;
    }
</style> 
        
<body>
    <video id="gum-local" autoplay playsinline></video>
    <button id="showVideo">Open camera</button>

    <div>
        <div class="label">Pan:</div>
        <input name="pan" type="range" disabled>
    </div>
    <div>
        <div class="label">Tilt:</div>
        <input name="tilt" type="range" disabled>
    </div>
    <div>
        <div class="label">Zoom:</div>
        <input name="zoom" type="range" disabled>
    </div>
</body>

Demostración de efectos