Captura e restrições de mídia

A parte de mídia do WebRTC aborda como acessar hardware capaz de capturar vídeo e áudio, como câmeras e microfones, além de como funcionam os fluxos de mídia. Ele também aborda a mídia de display, que é como um aplicativo pode fazer a captura de tela.

Dispositivos portáteis de mídia

Todas as câmeras e microfones compatíveis com o navegador são acessados e gerenciados pelo objeto navigator.mediaDevices. Os aplicativos podem recuperar a lista atual de dispositivos conectados e também detectar mudanças, já que muitas câmeras e microfones se conectam por USB e podem ser conectados e desconectados durante o ciclo de vida do aplicativo. Como o estado de um dispositivo de mídia pode mudar a qualquer momento, é recomendável que os aplicativos se registrem para mudanças de dispositivo e as processem corretamente.

Restrições

Ao acessar dispositivos de mídia, é uma boa prática fornecer restrições o mais detalhadas possível. Embora seja possível abrir a câmera e o microfone padrão com uma restrição simples, isso pode gerar um fluxo de mídia que não é o mais adequado para o aplicativo.

As restrições específicas são definidas em um objeto MediaTrackConstraint, um para áudio e outro para vídeo. Os atributos nesse objeto são do tipo ConstraintLong, ConstraintBoolean, ConstraintDouble ou ConstraintDOMString. Eles podem ser um valor específico (por exemplo, um número, um booleano ou uma string), um intervalo (LongRange ou DoubleRange com um valor mínimo e máximo) ou um objeto com uma definição ideal ou exact. Para um valor específico, o navegador tenta escolher algo o mais próximo possível. Para um intervalo, o melhor valor será usado. Quando exact é especificado, somente fluxos de mídia que correspondem exatamente a essa restrição são retornados.

// Camera with a resolution as close to 640x480 as possible
{
    "video": {
        "width": 640,
        "height": 480
    }
}

// Camera with a resolution in the range 640x480 to 1024x768
{
    "video": {
        "width": {
            "min": 640,
            "max": 1024
        },
        "height": {
            "min": 480,
            "max": 768
        }
    }
}

// Camera with the exact resolution of 1024x768
{
    "video": {
        "width": {
            "exact": 1024
        },
        "height": {
            "exact": 768
        }
    }
}

Para determinar a configuração real de uma determinada faixa de um fluxo de mídia, podemos chamar MediaStreamTrack.getSettings(), que retorna o MediaTrackSettings aplicado no momento.

Também é possível atualizar as restrições de uma faixa de um dispositivo de mídia aberto chamando applyConstraints() na faixa. Isso permite que um aplicativo reconfigure um dispositivo de mídia sem precisar fechar o stream atual.

Mídia de display

Um aplicativo que quer fazer captura e gravação de tela precisa usar a API Display Media. A função getDisplayMedia() (que faz parte de navigator.mediaDevices) é semelhante a getUserMedia() e é usada para abrir o conteúdo da tela (ou uma parte dela, como uma janela). O MediaStream retornado funciona da mesma forma que ao usar getUserMedia().

As restrições para getDisplayMedia() são diferentes das usadas para entrada regular de vídeo ou áudio.

{
    video: {
        cursor: 'always' | 'motion' | 'never',
        displaySurface: 'application' | 'browser' | 'monitor' | 'window'
    }
}

O snippet de código acima mostra como funcionam as restrições especiais para gravação de tela. Esses recursos podem não ser compatíveis com todos os navegadores que aceitam mídia de display.

Streams e faixas

Um MediaStream representa um stream de conteúdo de mídia, que consiste em faixas (MediaStreamTrack) de áudio e vídeo. Para recuperar todas as faixas de MediaStream, chame MediaStream.getTracks(), que retorna uma matriz de objetos MediaStreamTrack.

MediaStreamTrack

Um MediaStreamTrack tem uma propriedade kind que é audio ou video, indicando o tipo de mídia que ele representa. Cada faixa pode ser silenciada alternando a propriedade enabled. Uma faixa tem uma propriedade booleana remote que indica se ela é originada por um RTCPeerConnection e vem de um peer remoto.