Em vez de reproduzir áudio e vídeo, às vezes você pode querer capturar áudio ou vídeo. A Media Capture and Streams API, ou a MediaStream API, permite que você faça isso. Para usar a API, no entanto, você precisa criar o objeto MediaStream. Você poderia fazer isso com o construtor, mas não estaria vinculado ao hardware do usuário. Em vez disso, a propriedade mediaDevices do objeto global navigator possui um método getUserMedia() para você usar. Este método aceita um único objeto constraints que define o tipo de mídia que você deseja receber. Este objeto possui uma propriedade audio e video, refletindo fluxos de áudio e vídeo. Essas propriedades podem ser false, se você não quiser receber esse tipo de stream, true se quiser, ou objetos definindo restrições adicionais. Por exemplo, você pode exigir uma resolução específica de saída de vídeo:

window.navigator.mediaDevices.getUserMedia({
  audio: true,
  video: {
    width: {
      min: 1280,
      ideal: 1920,
      max: 3840
    },
    height: {
      min: 720,
      ideal: 1080,
      max: 2160
    }
  }
});

Este objeto de restrição especifica resoluções mínimas e máximas para o feed de vídeo. A propriedade ideal especifica a resolução que você mais gostaria de ter – e o stream fornecerá a resolução mais próxima do seu ideal. Depois de criar seu MediaStream (assumindo que o usuário aprove a solicitação automática para acessar seu hardware), você pode usar os dados do stream da maneira que precisar. Observe que getUserMedia() retorna uma Promise, o que significa que você precisará de uma função callback para consumir o stream ou usar a sintaxe async/await. Você aprenderá mais sobre Promises e programação assíncrona em lições futuras. Aqui está um exemplo básico que exibe o feed da webcam do usuário na página.

const video = document.querySelector("video");
const stream =
  await window.navigator.mediaDevices.getUserMedia({ video: true });
video.srcObject = stream;
await video.play();

Vale ressaltar que esta API não oferece acesso à captura de tela. Você aprenderá sobre essa API na próxima lição.