Escolha a API apropriada 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 ele oferece tudo o que você precisa com a menor quantidade de trabalho. Em outras palavras, você conhece o caso de uso geral que quer resolver (por exemplo, acesso a vídeo), mas não sabe qual API usar ou se há outra maneira de fazer isso.
Um problema que geralmente encontro os desenvolvedores da Web é acessar APIs de baixo nível sem conhecer as APIs de nível superior, que são mais fáceis de implementar e oferecem uma UX melhor. Portanto, este guia começa recomendando primeiros APIs de nível superior, mas também menciona APIs de nível inferior caso você tenha determinado que a API de nível superior não atende às suas necessidades.
🕹 Receber eventos de entrada deste dispositivo
Tente detectar eventos de teclado e ponteiro. Se esse dispositivo for um controlador de jogo, use a API Gamepad para saber quais botões estão sendo pressionados e quais eixos são 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 neste dispositivo
Use MediaDevices.getUserMedia() para receber streams de áudio e vídeo ao vivo nesse dispositivo e saiba mais sobre como capturar áudio e vídeo. Você também pode controlar a movimentação, inclinação e zoom da câmera, além de outras configurações da câmera, como brilho e contraste, e até mesmo tirar imagens estáticas. O Web Audio pode ser usado para adicionar efeitos ao áudio, criar visualizações de áudio ou aplicar efeitos espaciais, como panning. Veja também como criar um perfil de desempenho de apps de áudio da Web 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 Descobrir como se comunicar com seu dispositivo para começar sua jornada.
🔐 Autenticar com este dispositivo
Use WebAuthn para criar uma credencial de chave pública forte, atestado e com escopo de origem com esse dispositivo de segurança de hardware para autenticar usuários. Ele oferece 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 se autentiquem com impressões digitais ou bloqueios de tela. Confira Criar seu primeiro app do WebAuthn.
Se esse for outro tipo de dispositivo de segurança de hardware (por exemplo, uma carteira de criptomoedas), uma API de nível inferior pode ser a solução. Confira Descobrir como se comunicar com seu dispositivo para iniciar sua jornada.
🗄 Acesse 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 solicitar 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 ter acesso ao acelerômetro, ao giroscópio e à bússola integrados aos dispositivos móveis.
Se não funcionar, uma API de baixo nível pode ser a solução. Confira Descobrir como se comunicar com seu dispositivo para começar sua jornada.
🛰 Acesse as coordenadas de GPS neste dispositivo
Use a API Geolocation para conferir 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 Descobrir 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 carga da bateria e receber uma notificação quando ele mudar ou o status de carregamento.
Se não funcionar, uma API de baixo nível pode ser a solução. Confira Descobrir 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 a um cabo HDMI ou uma smart TV conectada sem fio).
Se este dispositivo expõe um servidor da Web, use a API Fetch e/ou os WebSockets para buscar alguns dados do dispositivo acessando os endpoints adequados. Embora os soquetes TCP e UDP não estejam disponíveis na Web, confira WebTransport para lidar com 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.
🧱 Descubra como se comunicar com seu dispositivo
A decisão sobre qual API de nível inferior você precisa usar é determinada pela natureza da sua conexão física com o dispositivo. Se for sem fio, confira Web NFC para conexões sem fio de curto alcance e Web Bluetooth 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, 2 a 4 polegadas). Ferramentas como o NFC TagInfo da NXP permitem navegar pelo conteúdo deste dispositivo para fins de engenharia reversa.
Com o Web Bluetooth, conecte-se a este dispositivo por uma conexão Bluetooth de baixa energia. É muito fácil se comunicar com os serviços do Bluetooth GATT padronizados (como o serviço de bateria), porque o comportamento deles é bem documentado. Caso contrário, você precisa encontrar alguma documentação de hardware para o 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 Lightlamp do Uri Shaked. Os dispositivos Bluetooth também podem falar os protocolos HID ou seriais.
Se estiver com fio, confira estas APIs nesta ordem específica:
Com o WebHID, entender os relatórios HID e os descritores de relatórios usando coleções é fundamental para entender o dispositivo. Isso pode ser desafiador sem a documentação do fornecedor para este dispositivo. Ferramentas como o Wireshark podem ajudar com a engenharia reversa dele. Você também pode usar o app da Web HID Explorer para despejar informações de dispositivos HID em um formato legível.
Com o Web Serial, sem a documentação do fornecedor para este dispositivo e os comandos compatíveis com ele, isso é difícil, mas ainda possível com adivinhação. A engenharia reversa desse dispositivo pode ser feita capturando tráfego USB bruto com ferramentas como o Wireshark. Também é possível usar o app da Web de terminal serial para fazer testes com esse dispositivo, caso ele use um protocolo legível por humanos.
Com o WebUSB (link em inglês), sem uma documentação clara para este dispositivo e os comandos USB compatíveis com este dispositivo, isso é difícil, mas ainda possível com adivinhação. Assista a Explorar o WebUSB e o potencial dele, de Suz Hinton. Você também pode fazer engenharia reversa desse dispositivo capturando tráfego USB bruto e inspecionando descritores USB com ferramentas externas, como o Wireshark e ferramentas de navegador integradas, 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.
Foto de Darya Tryfanava no site Unsplash.