Escolha a API adequada para se comunicar com um dispositivo de hardware.
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. "Melhor" significa que ele oferece tudo o que você precisa com o menor esforço. Em outras palavras, você sabe 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 comum que vejo entre desenvolvedores da Web é pular para APIs de baixo nível sem aprender sobre 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 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, uma API de baixo nível pode ser a solução. Confira 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 a capturar áudio e vídeo. Também é possível controlar a panorâmica, a inclinação e o zoom da câmera e outras configurações, como brilho e contraste, e até mesmo tirar fotos estáticas. A API Web Audio pode ser usada para adicionar efeitos ao áudio, criar visualizações de áudio ou aplicar efeitos espaciais, como panorâmica. Confira também como criar um perfil de desempenho de apps de áudio da Web no Chrome.
Se nenhuma dessas opções funcionar, uma API de baixo nível pode ser a solução. Confira 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 permita 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 Como se comunicar com seu dispositivo para começar sua jornada.
🔐 Autentique 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 BLE, 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 esse dispositivo for outro tipo de dispositivo de segurança de hardware (por exemplo, uma carteira de criptomoeda), uma API de baixo nível pode ser a solução. Confira 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 ao usuário que selecione arquivos locais em uma caixa de diálogo do navegador e leia o conteúdo deles.
Se nenhuma dessas opções funcionar, uma API de baixo nível pode ser a solução. Confira 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 estiver disponível, use os eventos DeviceMotion e DeviceOrientation para ter acesso ao acelerômetro, giroscópio e bússola integrados em dispositivos móveis.
Se isso não funcionar, uma API de baixo nível pode ser a solução. Confira Como se comunicar com seu dispositivo para começar sua jornada.
🛰 Acessar coordenadas de GPS neste dispositivo
Use a API Geolocation para conferir a latitude e a longitude da posição atual do usuário no dispositivo.
Se isso não funcionar, uma API de baixo nível pode ser a solução. Confira Como se comunicar com seu dispositivo para começar sua jornada.
🔋 Verificar a bateria do dispositivo
Use a API Battery para receber informações do host sobre o nível de carga da bateria e ser notificado quando o nível ou o status de carregamento mudar.
Se isso não funcionar, uma API de baixo nível pode ser a solução. Confira Como se comunicar com seu dispositivo para começar sua jornada.
📞 Comunicar-se com esse dispositivo pela rede
Na rede local, use a API de reprodução remota 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 por 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 desse 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.
🧱 Descubra como se comunicar com seu dispositivo
A decisão de qual API de baixo nível você deve usar é determinada pela natureza da sua conexão física com o dispositivo. Se for sem fio, confira a NFC da Web para conexões sem fio de curto alcance e o Bluetooth da Web ou a Serial da Web para dispositivos sem fio próximos.
Com a Web NFC, leia e grave nesse dispositivo quando ele estiver próximo ao dispositivo do usuário (geralmente 5 a 10 cm). Ferramentas como o NFC TagInfo by NXP permitem navegar pelo conteúdo do dispositivo para fins de engenharia reversa.
Com o Bluetooth da Web, conecte-se a esse dispositivo por uma conexão Bluetooth de baixa energia. A comunicação com ele deve ser muito fácil quando ele usa serviços GATT do Bluetooth padronizados (como o serviço de bateria), já que o comportamento deles é bem documentado. Caso contrário, neste ponto, você precisa encontrar alguma documentação de hardware para esse dispositivo ou fazer engenharia reversa. É possível usar ferramentas externas, como o nRF Connect para dispositivos móveis, e ferramentas integradas do navegador, como a página interna
about://bluetooth-internalsem navegadores baseados em Chromium. Confira Reverse-Engineering a Bluetooth Lightbulb (em inglês) de Uri Shaked. Os dispositivos Bluetooth também podem usar os protocolos HID ou seriais.Com a serial por Bluetooth, é possível se comunicar 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 que o UUID do serviço seja transmitido para
requestPort().
Se estiver conectado, confira estas APIs nesta ordem específica:
Com o WebHID, entender os relatórios e descritores de relatório HID por meio de coleções é fundamental para entender 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 transferir informações de dispositivos HID para um formato legível por humanos.
Com a Web Serial, sem a documentação do fornecedor para esse dispositivo e os comandos compatíveis, é difícil, mas ainda possível, fazer uma tentativa. 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 Terminal Serial para testar esse dispositivo se ele usa um protocolo legível por humanos.
Com o WebUSB, sem uma documentação clara para esse dispositivo e quais comandos USB ele aceita, é difícil, mas ainda possível, fazer suposições. Assista Exploring WebUSB and its exciting potential, de Suz Hinton. Também é possível fazer engenharia reversa desse dispositivo capturando o tráfego USB bruto e inspecionando descriptores 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 por revisar este artigo.
Foto de Darya Tryfanava no Unsplash.