Escolher 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" É sério oferece tudo de que você precisa com a menor quantidade de trabalho. Em outras palavras, você conhece o caso de uso geral que quer resolver (por exemplo, acessar vídeos), mas não não sabem qual API usar ou se perguntam se existe outra forma de fazer isso.
Um problema com o qual geralmente vejo os desenvolvedores Web é enfrentar APIs de baixo nível sem conhecer as APIs de nível superior, que são mais fáceis implementar e melhorar a UX. Portanto, este guia começa recomendando APIs de nível superior primeiro, mas também menciona APIs de nível inferior caso você tenha determinou que a API de nível superior não atende às suas necessidades.
🕹 Receber eventos de entrada deste dispositivo
Ouça eventos de teclado e ponteiro. Se este dispositivo for um jogo use a API Gamepad para saber quais botões estão sendo pressionados e quais eixos se moveram.
Se nenhuma dessas opções funcionar, uma API de nível inferior pode ser a solução. Confira Descobrir 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 dispositivo e aprender a capturar áudio e vídeo. Também é possível controlar movimentos, inclinação e zoom da câmera e outras configurações dela, como brilho e contrastam e até tiram imagens estáticas. O Web Audio pode ser usado para adicionar efeitos a áudio, criar visualizações em áudio ou aplicar efeitos espaciais (como panning). Saiba como analisar o desempenho dos apps de áudio da Web no Chrome. .
Se nenhuma dessas opções funcionar, uma API de nível inferior pode ser a solução. Confira Descobrir como se comunicar com seu dispositivo para começar sua jornada.
🖨 Imprima 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 nível inferior pode ser a solução. Finalizar compra Descubra como se comunicar com seu dispositivo para começar sua jornada.
🔐 Autenticar com este dispositivo
Usar o WebAuthn para criar uma chave pública forte, atestada e com escopo de origem. com esse dispositivo de segurança de hardware para autenticar usuários. Ele oferece suporte o uso de autenticadores Bluetooth, NFC e de roaming USB U2F ou FIDO2, também conhecidas como chaves de segurança, além de um autenticador de plataforma, se autenticar com impressões digitais ou bloqueios de tela. Confira Crie primeiro app WebAuthn.
Se este dispositivo for outro tipo de dispositivo de segurança de hardware (por exemplo, um carteira de criptomoedas), uma API de baixo nível pode ser a solução. Confira o Discover como se comunicar com seu dispositivo para iniciar sua jornada.
🗄 Acessar arquivos neste dispositivo
Use a API File System Access para ler e salvar mudanças diretamente nos arquivos e pastas no dispositivo do usuário. Se não estiver disponível, use a API File para perguntar o usuário pode selecionar arquivos locais em uma caixa de diálogo do navegador e ler o conteúdo um dos arquivos.
Se nenhuma dessas opções funcionar, uma API de nível inferior pode ser a solução. Confira Descobrir como se comunicar com seu dispositivo para começar sua jornada.
🧲 Acessar sensores neste dispositivo
Use a API Generic Sensor para ler valores brutos dos sensores de movimento (por exemplo, acelerômetro ou giroscópio) e sensores de ambiente (por exemplo, luz ambiente, magnetômetro). Se não estiverem disponíveis, use os métodos DeviceMotion e DeviceOrientation para ter acesso ao acelerômetro, giroscópio e bússola integrados ao dispositivos móveis.
Se isso não funcionar para você, uma API de nível inferior pode ser a solução. Finalizar compra Descubra como se comunicar com seu dispositivo para começar sua jornada.
🛰 Acesse as coordenadas de GPS neste dispositivo
Use a API Geolocation para ver a latitude e a longitude da posição atual neste dispositivo.
Se isso não funcionar para você, uma API de nível inferior pode ser a solução. Finalizar compra Descubra como se comunicar com seu dispositivo para começar sua jornada.
🔋 Verifique 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 da bateria ou o status de carregamento mudar.
Se isso não funcionar para você, uma API de nível inferior pode ser a solução. Finalizar compra Descubra como se comunicar com seu dispositivo para começar sua jornada.
👋 Entrar em contato 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 página conectada com um cabo HDMI ou uma smart TV conectada sem fio).
Se este dispositivo expor um servidor da Web, use a API Fetch e/ou os WebSockets para Busque alguns dados deste dispositivo tocando nos endpoints apropriados. Embora TCP e Os soquetes UDP não estão disponíveis na Web. Confira WebTransport para lidar 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 usar é determinada pela natureza a 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 conexões sem fio próximas dispositivos.
Com a NFC Web, leia e grave neste dispositivo quando ele estiver próximo a o dispositivo do usuário (geralmente 5 a 10 cm, 2 a 4 polegadas). Ferramentas como NFC TagInfo by NXP permite que você navegue pelo conteúdo do dispositivo para engenharia reversa propósitos.
Com o Bluetooth da Web, conecte-se a este dispositivo por um Bluetooth de baixa energia uma conexão com a Internet. Deve ser muito fácil de se comunicar quando usar serviços GATT padronizados de Bluetooth (como o serviço de bateria), como comportamento for bem documentado. Se não, nesse momento, você terá que encontrar documentação de hardware para esse dispositivo ou fazer engenharia reversa dele. Você pode usar ferramentas externas, como o nRF Connect for Mobile, e ferramentas de navegador integradas. como a página interna
about://bluetooth-internalsem APIs navegadores para isso. Confira Reverse-Engineering a Bluetooth Light Lâmpada (em inglês) no Uri tremendo. Dispositivos Bluetooth também podem falar o HID ou número de série protocolos.
Se estiver com fio, confira estas APIs nesta ordem específica:
Com o WebHID, entender os relatórios HID e os descritores de relatório por meio do coleções é fundamental para sua compreensão deste dispositivo. Isso pode ser um desafio sem a documentação do fornecedor para este dispositivo. Ferramentas como O Wireshark pode ajudar na engenharia reversa. Você também pode usar o HID App da Web Explorer para despejar informações dos dispositivos HID em um formato legível.
Com Web Serial, sem a documentação do fornecedor para este dispositivo e quais comandos que este dispositivo suporta, é difícil, mas ainda é possível com sorte, adivinhação. A engenharia reversa do dispositivo pode ser feita pela captura de dados USB brutos usando ferramentas como o Wireshark. Você também pode usar o terminal serial app da Web para testar se o dispositivo usa um protocolo legível por humanos.
Com WebUSB, sem documentação clara sobre este dispositivo e qual USB comandos que este dispositivo suporta, é difícil, mas ainda é possível com sorte, adivinhação. Assista ao vídeo Exploring WebUSB e seu potencial incrível (em inglês) da Suz Hinton. Também é possível fazer a engenharia reversa do dispositivo capturando dados USB brutos e inspeção de 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 por revisar este artigo.
Foto de Darya Tryfanava no Unsplash.