Acessando dispositivos de hardware na web
Escolha a API apropriada para se comunicar com um dispositivo de hardware de sua escolha.
O objetivo deste guia é ajudá-lo 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 oferece tudo o que você precisa com o mínimo de trabalho. Em outras palavras, você conhece o caso de uso geral que deseja resolver (por exemplo, acessar vídeo), mas não sabe qual API usar ou se pergunta se há outra maneira de fazer isso.
Um problema que normalmente vejo os desenvolvedores da web cairem é 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 fornecem uma UX melhor. Portanto, este guia começa recomendando APIs de nível superior primeiro, 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.
🕹 Receba eventos de entrada deste dispositivo #
Tente ouvir eventos de teclado e ponteiro. Se este dispositivo for um controlador de jogo, use a API do 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 iniciar sua jornada.
📸 Acesse áudio e vídeo a partir deste dispositivo #
Use MediaDevices.getUserMedia () para obter fluxos de áudio e vídeo ao vivo a partir deste dispositivo e aprender sobre a captura de áudio e vídeo . Você também pode controlar a panorâmica, inclinação e zoom da câmera e outras configurações da câmera, como brilho e contraste , e até mesmo tirar fotos . O Web Audio pode ser usado para adicionar efeitos ao áudio, criar visualizações de áudio ou aplicar efeitos espaciais (como panorâmica). Veja como traçar o perfil de desempenho de aplicativos de áudio da web no Chrome também.
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 iniciar sua jornada.
🖨 Imprima neste dispositivo #
Use window.print () para abrir uma caixa de diálogo do navegador que permite ao usuário escolher este dispositivo como um destino para imprimir o documento atual.
Se isso não funcionar para você, uma API de baixo nível pode ser a solução. Confira Descubra como se comunicar com seu dispositivo para iniciar sua jornada.
🔐 Autentique-se com este dispositivo #
Use o WebAuthn para criar uma credencial de chave pública forte, atestada e com escopo de origem com este dispositivo de segurança de hardware para autenticar usuários. Ele suporta o uso de Bluetooth, NFC e autenticadores U2F ou FIDO2 em roaming USB - também conhecidos como chaves de segurança - bem como um autenticador de plataforma, que permite aos usuários autenticar com suas impressões digitais ou bloqueios de tela. Confira Construir seu primeiro aplicativo WebAuthn .
Se este 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 Descubra como se comunicar com seu dispositivo para iniciar sua jornada.
🗄 Acesse arquivos neste dispositivo #
Use a API de acesso ao sistema de arquivos para ler e salvar alterações diretamente em arquivos e pastas no dispositivo do usuário. Se não estiver disponível, use a API de arquivo para solicitar ao usuário que selecione os 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 iniciar sua jornada.
🧲 Acessar sensores neste dispositivo #
Use a API Generic Sensor para ler os valores brutos dos 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 obter acesso ao acelerômetro, giroscópio e bússola integrados em dispositivos móveis.
Se não funcionar para você, uma API de baixo nível pode ser a solução. Confira Descubra como se comunicar com seu dispositivo para iniciar sua jornada.
🛰 Acesse as coordenadas GPS neste dispositivo #
Use a API de geolocalização para obter a latitude e longitude da posição atual do usuário neste dispositivo.
Se não funcionar para você, uma API de baixo nível pode ser a solução. Confira Descubra como se comunicar com seu dispositivo para iniciar sua jornada.
🔋 Verifique a bateria deste dispositivo #
Use a API de bateria para obter informações do host sobre o nível de carga da bateria e ser notificado quando o nível da bateria ou o status de carga mudar.
Se não funcionar para você, uma API de baixo nível pode ser a solução. Confira Descubra como se comunicar com seu dispositivo para iniciar sua jornada.
📞 Comunique-se com este 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 remoto (por exemplo, uma TV inteligente ou um alto-falante sem fio) ou use a API de apresentação 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 com conexão sem fio).
Se este dispositivo expõe um servidor da web, use a API Fetch e/ou WebSockets para buscar alguns dados deste dispositivo acessando os terminais apropriados. Embora os soquetes TCP e UDP não estejam disponíveis na web, verifique o WebTransport para lidar com conexões de rede interativas, bidirecionais e multiplexadas. Observe que 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 de sua conexão física com o dispositivo. Se for sem fio, verifique o Web NFC para conexões sem fio de curto alcance e Web Bluetooth para dispositivos sem fio próximos.
Com o Web NFC , leia e escreva neste dispositivo quando ele estiver próximo ao dispositivo do usuário (geralmente 5–10 cm, 2–4 polegadas). Ferramentas como NFC TagInfo da NXP permitem que você navegue no conteúdo deste dispositivo para fins de engenharia reversa.
Com o Web Bluetooth , conecte-se a este dispositivo por meio de uma conexão Bluetooth Low Energy. Deve ser muito fácil se comunicar com ele quando ele usa serviços Bluetooth GATT padronizados (como o serviço de bateria), pois seu comportamento é bem documentado . Caso contrário, neste ponto, você deve encontrar alguma documentação de hardware para este dispositivo ou fazer engenharia reversa nele. Você pode usar ferramentas externas como nRF Connect for Mobile e ferramentas de navegador integradas, como a página interna
about://bluetooth-internalsem navegadores baseados em Chromium para isso. Confira a engenharia reversa de uma lâmpada Bluetooth da Uri Shaked. Observe que os dispositivos Bluetooth também podem falar o HID ou protocolos seriais.
Se conectado, verifique essas APIs nesta ordem específica:
Com o WebHID , compreender os relatórios e descritores de relatórios da HID por meio de coleções é a chave para a sua compreensão deste dispositivo. Isso pode ser desafiador sem a documentação do fornecedor para este dispositivo. Ferramentas como o Wireshark podem ajudá-lo a fazer a engenharia reversa.
Com o Web Serial , sem a documentação do fornecedor para este dispositivo e quais comandos ele suporta, é difícil, mas ainda é possível com adivinhação. 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 aplicativo da web Terminal Serial para fazer experiências com este dispositivo se ele usar um protocolo legível por humanos.
Com o WebUSB , sem documentação clara para este dispositivo e quais comandos USB este dispositivo suporta, é difícil, mas ainda é possível com adivinhação. Assista Explorando WebUSB e seu potencial empolgante de Suz Hinton. Você também pode fazer a engenharia reversa deste dispositivo capturando tráfego USB bruto e inspecionando descritores USB com ferramentas externas como Wireshark e ferramentas de navegador integradas, como a página interna
about://usb-internalsem navegadores baseados em Chromium.
Agradecimentos #
Agradecimentos a Reilly Grant , Thomas Steiner e Kayce Basques pela revisão deste artigo.
Foto de Darya Tryfanava no Unsplash .