A parte de mídia do WebRTC aborda como acessar hardware capaz de capturar vídeo e áudio, como câmeras e microfones, e como o streaming de mídia funciona. Ele também abrange a mídia de exibição, que é como um aplicativo pode capturar a tela.
Dispositivos portáteis de mídia
Todas as câmeras e os microfones que são 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 alterações, já que muitas
câmeras e microhpones se conectam via USB e podem ser conectadas e
desconectadas 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 apps sejam registrados para
mudanças no dispositivo para processar as mudanças corretamente.
Restrições
Ao acessar dispositivos de mídia, é recomendável fornecer as restrições mais detalhadas possíveis. Embora seja possível abrir a câmera e o microfone padrão com uma restrição simples, ele pode fornecer um fluxo de mídia que esteja longe do ideal 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 neste objeto são do tipo ConstraintLong, ConstraintBoolean, ConstraintDouble ou ConstraintDOMString. Eles podem ser um valor específico (por exemplo, um número,
booleano ou string), um intervalo (LongRange ou DoubleRange com um valor mínimo e
máximo) ou um objeto com uma definição de ideal ou exact. Para um
valor específico, o navegador tentará escolher algo o mais próximo possível.
Para um intervalo, o melhor valor nesse intervalo será usado. Quando exact é
especificado, apenas streams de mídia que correspondem exatamente a essa restrição serão
retornados.
Perto
// Camera with a resolution as close to 640x480 as possible
{
"video": {
"width": 640,
"height": 480
}
}
Intervalo
// Camera with a resolution in the range 640x480 to 1024x768
{
"video": {
"width": {
"min": 640,
"max": 1024
},
"height": {
"min": 480,
"max": 768
}
}
}
Exata
// Camera with the exact resolution of 1024x768
{
"video": {
"width": {
"exact": 1024
},
"height": {
"exact": 768
}
}
}
Para determinar a configuração real que uma determinada faixa de um stream de mídia tem,
podemos chamar MediaStreamTrack.getSettings(), que retorna o
MediaTrackSettings atualmente aplicado.
Também é possível atualizar as restrições de uma faixa em um dispositivo de mídia
que abrimos chamando applyConstraints() na faixa. Isso permite que um
aplicativo reconfigure um dispositivo de mídia sem precisar fechar o
stream existente.
Exibir mídia
Um aplicativo que queira realizar a captura e a 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 com a finalidade
de abrir o conteúdo da tela (ou uma parte dela, como uma
janela). O MediaStream retornado funciona da mesma forma que o
getUserMedia().
As restrições para getDisplayMedia() são diferentes das usadas para entrada de
vídeo ou áudio normal.
{
video: {
cursor: 'always' | 'motion' | 'never',
displaySurface: 'application' | 'browser' | 'monitor' | 'window'
}
}
O snippet de código acima mostra como as restrições especiais da gravação de tela funcionam. Eles podem não ser compatíveis com todos os navegadores com suporte à mídia de exibição.
Fluxos e faixas
Um MediaStream representa um stream de conteúdo de mídia, que consiste em faixas
(MediaStreamTrack) de áudio e vídeo. É possível recuperar todas as faixas de
MediaStream chamando MediaStream.getTracks(), que retorna uma matriz de
objetos MediaStreamTrack.
Faixa MediaStream
Um MediaStreamTrack tem uma propriedade kind que é audio ou video,
indicando o tipo de mídia que ele representa. Para desativar o som de cada faixa, alterne
a propriedade enabled. Uma faixa tem uma propriedade booleana remote que indica
se ela é proveniente de um RTCPeerConnection e vem de um par remoto.