Escolha a API adequada para se comunicar com um dispositivo de hardware de sua escolha.
O objetivo deste guia é ajudar você a escolher a melhor API para se comunicar com um dispositivo de hardware (por exemplo, webcam, microfone etc.) na Web. Por "melhor", quero dizer que ela oferece tudo o que você precisa com o mínimo de trabalho. Em outras palavras, você conhece o caso de uso geral que quer resolver (por exemplo, acessar vídeos), mas não sabe qual API usar ou se há outra maneira de fazer isso.
Um problema que costumo ver os desenvolvedores web enfrentarem é o uso de APIs de baixo nível sem aprender sobre as APIs de nível mais alto, que são mais fáceis de implementar e oferecem uma UX melhor. Portanto, este guia começa recomendando APIs de nível mais alto, mas também menciona APIs de nível mais baixo, caso você tenha determinado que a API de nível mais alto não atende às suas necessidades.
🕹 Receber eventos de entrada deste dispositivo
Tente detectar eventos de teclado e ponteiro. Se o dispositivo for um controle de jogo, use a API Gamepad para saber quais botões estão sendo pressionados e quais eixos foram movidos.
Se nenhuma dessas opções funcionar para você, uma API de baixo nível pode ser a solução. Confira Descubra como se comunicar com seu dispositivo para começar sua jornada.
📸 Acessar áudio e vídeo deste dispositivo
Use MediaDevices.getUserMedia() para receber streams de áudio e vídeo ao vivo desse dispositivo e aprenda mais sobre como capturar áudio e vídeo. Também é possível controlar a panorâmica, a inclinação e o zoom da câmera, além de outras configurações, como brilho e contraste, e até mesmo tirar fotos. A Web Audio pode ser usada para adicionar efeitos ao áudio, criar visualizações de áudio ou aplicar efeitos espaciais, como panning. Confira também como analisar o desempenho de apps de Web Audio no Chrome.
Se nenhuma dessas opções funcionar para você, uma API de baixo nível pode ser a solução. Confira Descubra como se comunicar com seu dispositivo para começar sua jornada.
🖨 Imprimir neste dispositivo
Use window.print() para abrir uma caixa de diálogo do navegador que permite ao usuário escolher esse dispositivo como destino para imprimir o documento atual.
Se isso não funcionar, uma API de baixo nível pode ser a solução. Confira Descubra como se comunicar com seu dispositivo para começar sua jornada.
🔐 Autenticar com este dispositivo
Use o WebAuthn para criar uma credencial de chave pública forte, atestada e com escopo de origem com esse dispositivo de segurança de hardware para autenticar usuários. Ela tem suporte ao uso de autenticadores U2F ou FIDO2 de Bluetooth, NFC e roaming USB, também conhecidos como chaves de segurança, além de um autenticador de plataforma, que permite que os usuários façam a autenticação com impressão digital ou bloqueio de tela. Confira Criar seu primeiro app WebAuthn.
Se o dispositivo for outro tipo de dispositivo de segurança de hardware (por exemplo, uma carteira de criptomoedas), uma API de baixo nível pode ser a solução. Confira Descubra como se comunicar com seu dispositivo para começar sua jornada.
🗄 Acessar arquivos neste dispositivo
Use a API File System Access para ler e salvar mudanças diretamente em arquivos e pastas no dispositivo do usuário. Se não estiver disponível, use a API File para pedir que o usuário selecione arquivos locais em uma caixa de diálogo do navegador e, em seguida, leia o conteúdo desses arquivos.
Se nenhuma dessas opções funcionar para você, uma API de baixo nível pode ser a solução. Confira Descubra como se comunicar com seu dispositivo para começar sua jornada.
🧲 Acessar sensores neste dispositivo
Use a API Generic Sensor para ler valores brutos de sensores de movimento (por exemplo, acelerômetro ou giroscópio) e sensores ambientais (por exemplo, luz ambiente, magnetômetro). Se não estiverem disponíveis, use os eventos DeviceMotion e DeviceOrientation para acessar o acelerômetro, o giroscópio e a bússola integrados em dispositivos móveis.
Se ela não funcionar para você, uma API de nível inferior pode ser a solução. Confira Descubra como se comunicar com seu dispositivo para começar sua jornada.
🛰 Acessar coordenadas de GPS neste dispositivo
Use a API Geolocation para ver a latitude e a longitude da posição atual do usuário neste dispositivo.
Se não funcionar, uma API de baixo nível pode ser a solução. Confira Descubra como se comunicar com seu dispositivo para começar sua jornada.
🔋 Verifique a bateria deste dispositivo
Use a API Battery para receber informações do host sobre o Nível de bateria e ser notificado quando o Nível de bateria ou o status de carregamento mudar.
Se ela não funcionar para você, uma API de nível inferior pode ser a solução. Confira Descubra como se comunicar com seu dispositivo para começar sua jornada.
📞 Comunicar-se com este dispositivo pela rede
Na rede local, use a API Remote Playback para transmitir áudio e/ou vídeo em um dispositivo de reprodução remota (por exemplo, uma smart TV ou um alto-falante sem fio) ou use a API Presentation para renderizar uma página da Web em uma segunda tela (por exemplo, uma tela secundária conectada com um cabo HDMI ou uma smart TV conectada sem fio).
Se o dispositivo expor um servidor da Web, use a API Fetch e/ou WebSockets para buscar alguns dados do dispositivo acessando os endpoints apropriados. Embora os soquetes TCP e UDP não estejam disponíveis na Web, confira o WebTransport para processar conexões de rede interativas, bidirecionais e multiplexadas. O WebRTC também pode ser usado para comunicar dados em tempo real com outros navegadores usando um protocolo ponto a ponto.
🧱 Saiba como se comunicar com seu dispositivo
A decisão de qual API de baixo nível usar é determinada pela natureza da sua conexão física com o dispositivo. Se for sem fio, confira a Web NFC para conexões sem fio de curto alcance e o Web Bluetooth ou a Web Serial para dispositivos sem fio próximos.
Com a Web NFC, leia e grave neste dispositivo quando ele estiver próximo ao dispositivo do usuário (geralmente de 5 a 10 cm). Ferramentas como o NFC TagInfo da NXP permitem que você navegue pelo conteúdo desse dispositivo para fins de engenharia reversa.
Com o Web Bluetooth, conecte-se a este dispositivo por uma conexão Bluetooth de baixa energia. Deve ser bem fácil se comunicar com ele quando ele usa serviços GATT Bluetooth padronizados (como o serviço de bateria), já que o comportamento deles é bem documentado. Se não, você terá que encontrar alguma documentação de hardware para esse dispositivo ou fazer engenharia reversa. Para isso, use ferramentas externas, como o nRF Connect for Mobile, e ferramentas de navegador integradas, como a página interna
about://bluetooth-internalsem navegadores baseados no Chromium. Confira Reverse-Engineering a Bluetooth Lightbulb (em inglês) de Uri Shaked. Os dispositivos Bluetooth também podem usar os protocolos HID ou serial.Com a Serial por Bluetooth, comunique-se com serviços RFCOMM em dispositivos Bluetooth Classic pareados, como o perfil de porta serial (SPP) padronizado. No entanto, para serviços personalizados baseados em RFCOMM, consulte a documentação do fornecedor do dispositivo para saber o UUID do serviço a ser transmitido para
requestPort().
Se estiver usando uma conexão com fio, confira estas APIs nesta ordem específica:
Com a WebHID, entender os relatórios de HID e os descritores de relatórios usando coleções é fundamental para compreender esse dispositivo. Isso pode ser difícil sem a documentação do fornecedor para esse dispositivo. Ferramentas como o Wireshark podem ajudar você a fazer engenharia reversa. Você também pode usar o app da Web HID Explorer para despejar informações de dispositivos HID em um formato legível por humanos.
Com a Web Serial, sem a documentação do fornecedor para esse dispositivo e os comandos que ele aceita, é difícil, mas ainda é possível com um palpite de sorte. A engenharia reversa desse dispositivo pode ser feita capturando o tráfego USB bruto com ferramentas como o Wireshark. Você também pode usar o app da Web Serial Terminal para testar esse dispositivo se ele usar um protocolo legível por humanos.
Com a WebUSB, sem uma documentação clara para esse dispositivo e quais comandos USB ele aceita, é difícil, mas ainda é possível com um pouco de sorte. Assista Exploring WebUSB and its exciting potential (em inglês) de Suz Hinton. Também é possível fazer engenharia reversa desse dispositivo capturando o tráfego USB bruto e inspecionando os descritores USB com ferramentas externas, como o Wireshark, e ferramentas integradas do navegador, como a página interna
about://usb-internalsem navegadores baseados no Chromium.
Agradecimentos
Agradecemos a Reilly Grant, Thomas Steiner e Kayce Basques pela revisão deste artigo.