Javascript — Pedir permissão para Acesso a Câmera e o Microfone

Olá Gente!

Hoje iremos começar uma série de artigos sobre a gravação e transmissão de vídeos.

Porem, antes de qualquer coisa, precisamos entender como pedir a permissão, para o cliente liberar o acesso a sua câmera e seu microfone, e em caso negativo, identificar o que ocorreu.

A primeira coisa que precisamos entender é os requisitos:

• Navegador compatível (Navegadores mais antigos não possuem este recurso)
• SSL (É obrigatório a navegação via HTTPS)

A função que permite a solicitação de permissão muda de acordo com o navegador, porem, podemos simplificar, adicionado esta linha ao começo do código:

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;

Desta forma, a variável “navigator.getUserMedia” será populada com a função que for compatível no navegador.

Agora precisamos chamar a função “getUserMedia”, e tratar o “Then” e o “Catch”:

navigator.mediaDevices.getUserMedia({ audio: true, video: true }).then(function(stream) {

    alert("Permissão Liberada!");

}).catch(function(err) {

    switch(err.name) 
    {

        case "NotAllowedError":

            alert("Permissão Recusada");

        break;

        case "NotFoundError":
        case "DevicesNotFoundError":

            alert("Nenhum Dispositivo");

        break;

        case "NotReadableError":
        case "TrackStartError":

            alert("Dispositivo Ocupado");

        break;

        default:

            alert("Outras Falhas");

        break;

    }

});

O que esta ocorrendo aqui?

Solicitamos a permissão de acesso ao “audio” e ao “video”:

{ audio: true, video: true }

Em caso de sucesso, será chamado o callback no ‘Then”:

then(function(stream) { alert(“Permissão Liberada!”); })

Em caso de falha, será chamado o callback de “catch”;

catch(function(err) { alert(err.name)); })

No caso de Erro, podemos tratar cada caso e orientar o cliente da forma correta:

• NotAllowedError: Ocorre quando o cliente recusa o acesso a câmera e/ou vídeo (ou aos dois)
• NotFoundError/DevicesNotFoundError: Ocorre quando não tem uma camera e/ou microfone
• NotReadableError/TrackStartError: Ocorre quando existe outra aplicação utilizando a câmera e/ou microfone (Normalmente este erro indica um problema na câmera/microfone)

Por hoje é isto, queridos desenvolvedores! 👩‍💼
Até logo! 👋