Web’deki donanım cihazlarına erişme

Bu kılavuzun amacı, web üzerindeki bir donanım aygıtıyla (ör. web kamerası, mikrofon vb.) iletişim kurmak için en iyi API’yi seçmenize yardımcı olmaktır. “En iyi” derken, ihtiyacınız olan her şeyi en kısa sürede size vermesini kastediyorum. Başka bir deyişle, çözmek istediğiniz genel kullanım durumunu biliyorsunuz (örneğin videoya erişim), ancak hangi API’yi kullanacağınızı bilmiyorsunuz veya bunu başarmanın başka bir yolu olup olmadığını merak ediyorsunuz.

Web geliştiricilerinin sıklıkla düştüğünü gördüğüm bir sorun, uygulanması daha kolay olan ve daha iyi bir UX sağlayan daha yüksek seviyeli API’leri öğrenmeden düşük seviyeli API’lere atlamaktır. Bu nedenle, bu kılavuz önce üst düzey API’leri önererek başlar, ancak üst düzey API’nin ihtiyaçlarınızı karşılamadığını belirlemeniz durumunda alt düzey API’lerden de bahseder.

🕹 Bu cihazdan giriş etkinlikleri alın #

için dinlemeyi dene Tuş takımı Ve Işaretçi olaylar. Bu cihaz bir oyun kumandasıysa hangi düğmelere basıldığını ve hangi eksenlerin hareket ettirildiğini öğrenmek için Gamepad API’sini kullanın.

Bu seçeneklerden hiçbiri sizin için uygun değilse, düşük seviyeli bir API çözüm olabilir. Çıkış yapmak Cihazınızla nasıl iletişim kuracağınızı keşfedin yolculuğunuza başlamak için.

📸 Bu cihazdan ses ve videoya erişin #

Kullanmak MediaDevices.getUserMedia() bu cihazdan canlı ses ve video akışları almak ve hakkında bilgi edinmek için ses ve video yakalama. Ayrıca kameranın pan, tilt ve zoom özelliklerini ve diğer kamera ayarlarını da kontrol edebilirsiniz. parlaklık ve kontrastve hatta fotoğraf çekmek. İnternet Sesi sese efektler eklemek, işitsel görselleştirmeler oluşturmak veya uzamsal efektler (kaydırma gibi) uygulamak için kullanılabilir. Web Audio uygulamalarının performansını Chrome’da nasıl profilleyeceğinize de göz atın.

Bu seçeneklerden hiçbiri sizin için uygun değilse, düşük seviyeli bir API çözüm olabilir. Çıkış yapmak Cihazınızla nasıl iletişim kuracağınızı keşfedin yolculuğunuza başlamak için.

🖨 Bu cihaza yazdır #

Kullanmak pencere.yazdır() kullanıcının mevcut belgeyi yazdırmak için bu cihazı hedef olarak seçmesine olanak tanıyan bir tarayıcı iletişim kutusu açmak için.

Bu sizin için işe yaramazsa, düşük seviyeli bir API çözüm olabilir. Çıkış yapmak Cihazınızla nasıl iletişim kuracağınızı keşfedin yolculuğunuza başlamak için.

🔐 Bu cihazla kimlik doğrulaması yapın #

Kullanmak Web Yetkilendirmesi kullanıcıların kimliğini doğrulamak için bu donanım güvenlik aygıtıyla güçlü, onaylanmış ve kaynak kapsamlı bir genel anahtar kimlik bilgisi oluşturmak. Güvenlik anahtarları olarak da bilinen Bluetooth, NFC ve USB dolaşımlı U2F veya FIDO2 kimlik doğrulayıcıların yanı sıra kullanıcıların parmak izleri veya ekran kilitleriyle kimlik doğrulaması yapmasına olanak tanıyan bir platform kimlik doğrulayıcının kullanımını destekler. Çıkış yapmak İlk WebAuthn uygulamanızı oluşturun.

Bu cihaz başka türde bir donanım güvenlik cihazıysa (örneğin bir kripto para cüzdanı), düşük seviyeli bir API çözüm olabilir. Çıkış yapmak Cihazınızla nasıl iletişim kuracağınızı keşfedin yolculuğunuza başlamak için.

🗄 Bu cihazdaki dosyalara erişin #

Kullanıcının cihazındaki dosya ve klasörlerden okumak ve değişiklikleri doğrudan bunlara kaydetmek için Dosya Sistemi Erişimi API’sini kullanın. Mevcut değilse, Dosya API’sı kullanıcıdan bir tarayıcı iletişim kutusundan yerel dosyaları seçmesini ve ardından bu dosyaların içeriğini okumasını istemek için.

Bu seçeneklerden hiçbiri sizin için uygun değilse, düşük seviyeli bir API çözüm olabilir. Çıkış yapmak Cihazınızla nasıl iletişim kuracağınızı keşfedin yolculuğunuza başlamak için.

🧲 Bu cihazdaki sensörlere erişin #

Hareket sensörlerinden (örn. ivmeölçer veya jiroskop) ve çevresel sensörlerden (örn. ortam ışığı, manyetometre) gelen ham sensör değerlerini okumak için Genel Sensör API’sini kullanın. Mevcut değilse, mobil cihazlarda yerleşik ivmeölçer, jiroskop ve pusulaya erişmek için DeviceMotion ve DeviceOrientation olaylarını kullanın.

Sizin için işe yaramazsa, düşük seviyeli bir API çözüm olabilir. Çıkış yapmak Cihazınızla nasıl iletişim kuracağınızı keşfedin yolculuğunuza başlamak için.

🛰 Bu cihazda GPS koordinatlarına erişin #

Kullan Coğrafi Konum API’sı kullanıcının bu cihazdaki mevcut konumunun enlem ve boylamını almak için.

Sizin için işe yaramazsa, düşük seviyeli bir API çözüm olabilir. Çıkış yapmak Cihazınızla nasıl iletişim kuracağınızı keşfedin yolculuğunuza başlamak için.

🔋 Bu cihazdaki pili kontrol edin #

Kullan Pil API’sı pil şarj seviyesi hakkında ana bilgisayar bilgilerini almak ve pil seviyesi veya şarj durumu değiştiğinde bildirim almak için.

Sizin için işe yaramazsa, düşük seviyeli bir API çözüm olabilir. Çıkış yapmak Cihazınızla nasıl iletişim kuracağınızı keşfedin yolculuğunuza başlamak için.

📞 Bu cihazla ağ üzerinden iletişim kurun #

Yerel ağda, Uzaktan Oynatma API’sı uzaktan oynatma cihazında (örn. bir akıllı TV veya kablosuz hoparlör) ses ve/veya video yayınlamak veya Sunum API’sı bir web sayfasını ikinci bir ekranda görüntülemek için (örneğin, bir HDMI kablosuyla bağlanan ikincil bir ekran veya kablosuz olarak bağlanan bir akıllı TV).

Bu cihaz bir web sunucusunu açığa çıkarırsa, API’yi getir ve/veya Web Yuvaları uygun uç noktalara basarak bu cihazdan bazı verileri almak için. Web’de TCP ve UDP yuvaları bulunmamakla birlikte, etkileşimli, çift yönlü ve çok katlı ağ bağlantılarını yönetmek için WebTransport’a bakın. WebRTC’nin, eşler arası bir protokol kullanarak verileri gerçek zamanlı olarak diğer tarayıcılarla iletişim kurmak için de kullanılabileceğini unutmayın.

🧱 Cihazınızla nasıl iletişim kuracağınızı keşfedin #

Hangi alt düzey API’yi kullanmanız gerektiğine ilişkin karar, cihazla olan fiziksel bağlantınızın doğasına göre belirlenir. Kablosuz ise, çok kısa mesafeli kablosuz bağlantılar için Web NFC’ye ve yakındaki kablosuz cihazlar için Web Bluetooth’a bakın.

• Web NFC ile, bu cihaz kullanıcının cihazının yakınındayken (genellikle 5–10 cm, 2–4 inç) okuma ve yazma. gibi araçlar NXP tarafından NFC TagInfo tersine mühendislik amaçlarıyla bu cihazın içeriğine göz atmanıza izin verir.

• Web Bluetooth ile bu cihaza bir Bluetooth Low Energy bağlantısı üzerinden bağlanın. Davranışları şu şekilde olduğundan, standartlaştırılmış Bluetooth GATT hizmetlerini (pil hizmeti gibi) kullandığında iletişim kurmak oldukça kolay olmalıdır. iyi belgelenmiş. Değilse, bu noktada ya bu cihaz için bazı donanım belgeleri bulmanız ya da tersine mühendislik yapmanız gerekir. Gibi harici araçları kullanabilirsiniz. Mobil için nRF Bağlantısı ve dahili sayfa gibi yerleşik tarayıcı araçları about://bluetooth-internals bunun için Chromium tabanlı tarayıcılarda. Çıkış yapmak Bir Bluetooth Ampulünü Tersine Mühendislik Uri Shaked’den. Bluetooth cihazlarının HID veya seri protokolleri de konuşabileceğini unutmayın.

Kabloluysa, bu API’leri şu sırayla kontrol edin:

1. WebHID ile, HID raporlarını ve rapor tanımlayıcılarını anlama koleksiyonlar bu cihazı anlamanızın anahtarıdır. Bu cihaz için satıcı belgeleri olmadan bu zor olabilir. gibi araçlar Tel Köpekbalığı tersine mühendislik yapmanıza yardımcı olabilir. Şunu da kullanabilirsiniz: HID Explorer web uygulaması HID cihazları bilgilerini insan tarafından okunabilir bir biçime dökmek için.

2. Web Serial ile, bu cihaz için satıcı belgeleri ve bu cihazın hangi komutları desteklediği olmadan, zor ama şanslı tahminle yine de mümkün. Bu cihazın tersine mühendisliği, aşağıdaki gibi araçlarla ham USB trafiğini yakalayarak yapılabilir: Tel Köpekbalığı. Şunu da kullanabilirsiniz: Seri Terminal web uygulaması insan tarafından okunabilir bir protokol kullanıyorsa bu cihazla deneme yapmak için.

3. WebUSB ile, bu cihaz için net belgeler ve bu cihazın desteklediği USB komutları olmadan, zor ama şanslı tahminle yine de mümkün. Kol saati WebUSB’yi ve heyecan verici potansiyelini keşfetmek Suz Hinton’dan. Ayrıca ham USB trafiğini yakalayarak ve inceleyerek bu cihazda tersine mühendislik yapabilirsiniz. USB tanımlayıcıları Wireshark gibi harici araçlarla ve dahili sayfa gibi yerleşik tarayıcı araçlarıyla about://usb-internals Chromium tabanlı tarayıcılarda.

teşekkürler #

Sayesinde Reilly GrantThomas Steiner ve Kayce Basques’a bu makaleyi inceledikleri için.

fotoğrafı çeken Darya Tryfanava Açık Unsplash.