적절한 API를 선택하여 선택한 하드웨어 기기와 통신합니다.
이 가이드의 목표는 여러분과의 커뮤니케이션에 가장 적합한 API를 선택하는 데 도움을 주는 것입니다. 웹캠, 마이크 등)에 연결할 수 있습니다. '최고의' 그러니까 는 가장 짧은 작업량으로 필요한 모든 것을 제공합니다. 즉, 해결하려는 일반적인 사용 사례 (예: 동영상에 액세스)를 알고 있지만 어떤 API를 사용해야 할지 모르거나 이를 달성할 수 있는 다른 방법이 있는지 궁금할 때가 있습니다.
웹 개발자들이 흔히 겪는 문제 중 하나는 보다 쉬운 상위 수준 API에 대해 배우지 않고도 하위 수준 API를 익힐 수 있습니다. 더 나은 UX를 제공하기 위한 것입니다. 따라서 이 가이드에서는 먼저 상위 레벨의 API를 다루되, API를 직접 생성한 경우에는 상위 수준 API가 요구사항을 충족하지 않는다고 판단했습니다.
🕹 이 기기에서 입력 이벤트 수신
키보드 및 포인터 이벤트를 수신 대기해 보세요. 게임 기기인 경우 컨트롤러의 경우 Gamepad API를 사용하여 어떤 버튼이 눌리고 있는지 그리고 확인할 수 있습니다.
이러한 옵션을 사용할 수 없다면 하위 수준의 API가 솔루션이 될 수 있습니다. 기기와 소통하는 방법을 확인하여 시작해 보세요.
🎬 이 기기의 오디오 및 동영상에 액세스
MediaDevices.getUserMedia()를 사용하여 여기에서 라이브 오디오 및 동영상 스트림을 가져올 수 있습니다. 오디오 및 동영상 캡처에 대해 알아보세요. 또한 카메라의 화면 이동, 기울이기, 확대/축소 및 기타 카메라 설정(예: 밝기, 대비하며 정지 이미지도 촬영할 수 있습니다. 웹 오디오를 사용하여 효과 추가 가능 오디오 시각화를 만들거나 공간 효과 (예: 패닝). Chrome에서 웹 오디오 앱의 성능을 프로파일링하는 방법을 확인하세요. 확인할 수 있습니다
이러한 옵션을 사용할 수 없다면 하위 수준의 API가 솔루션이 될 수 있습니다. 기기와 소통하는 방법을 확인하여 시작해 보세요.
🖨 이 기기로 인쇄
window.print()를 사용하여 사용자가 선택할 수 있는 브라우저 대화상자를 엽니다. 기기를 현재 문서를 인쇄하는 대상으로 설정합니다.
이 방법이 효과가 없다면 하위 수준 API를 사용하는 것이 좋습니다. 결제 여정을 시작하기 위해 기기와 통신하는 방법을 알아보세요.
🔐 이 기기로 인증
WebAuthn을 사용하여 강력하고 증명된 출처 범위 공개 키 생성 사용자 인증 정보를 사용하여 사용자를 인증합니다. 또한 블루투스, NFC, USB 로밍 U2F 또는 FIDO2 인증자를 사용할 수도 있습니다. 플랫폼 인증자로 알려진 보안 키뿐만 아니라 사용자가 지문이나 화면 잠금을 사용하여 인증합니다. 자세한 내용은 첫 번째 WebAuthn 앱을 엽니다.
이 기기가 다른 유형의 하드웨어 보안 기기 (예: 낮은 수준의 API가 솔루션이 될 수 있습니다. 디스커버 기기와 통신하는 방법을 확인하세요.
🗄 이 기기의 파일에 액세스
File System Access API를 사용하여 파일에서 읽고 변경사항을 직접 저장 파일 및 폴더를 관리할 수 있습니다 사용할 수 없는 경우 File API를 사용하여 요청합니다. 사용자가 브라우저 대화상자에서 로컬 파일을 선택한 다음 콘텐츠를 읽습니다. 할 수 있습니다.
이러한 옵션을 사용할 수 없다면 하위 수준의 API가 솔루션이 될 수 있습니다. 기기와 소통하는 방법을 확인하여 시작해 보세요.
🧲 이 기기의 센서에 액세스
Generic Sensor API를 사용하여 움직임 감지 센서 (예: 가속도계 또는 자이로스코프) 및 환경 센서 (예: 주변광, 자기계). 사용할 수 없는 경우 DeviceMotion 및 DeviceOrientation을 사용합니다. 이벤트를 사용하여 내장된 가속도계, 자이로스코프 및 나침반에 있습니다.
문제가 해결되지 않으면 하위 수준의 API를 사용하는 것이 좋습니다. 결제 여정을 시작하기 위해 기기와 통신하는 방법을 알아보세요.
🛰 이 기기에서 GPS 좌표에 액세스하세요
Geolocation API를 사용하여 사용자 지도의 위도와 경도를 가져옵니다. 이 기기의 현재 위치를 표시합니다.
문제가 해결되지 않으면 하위 수준의 API를 사용하는 것이 좋습니다. 결제 여정을 시작하기 위해 기기와 통신하는 방법을 알아보세요.
🔋 이 기기의 배터리 확인
Battery API를 사용하여 배터리 잔량 수준 및 배터리 수준이나 충전 상태가 변경되면 알림을 받습니다.
문제가 해결되지 않으면 하위 수준의 API를 사용하는 것이 좋습니다. 결제 여정을 시작하기 위해 기기와 통신하는 방법을 알아보세요.
🏠 네트워크를 통해 이 기기와 통신합니다.
로컬 네트워크에서 Remote Playback API를 사용하여 오디오를 브로드캐스트하거나 동영상을 원격 재생 기기 (예: 스마트 TV 또는 무선 스피커)에서 재생하거나 두 번째 화면 (예: 보조 화면)에 웹페이지를 렌더링하는 Presentation API HDMI 케이블 또는 무선으로 연결된 스마트 TV에 연결된 디스플레이).
기기가 웹 서버를 노출하는 경우 Fetch API 또는 WebSockets를 사용하여 적절한 엔드포인트에 접속하여 이 기기에서 일부 데이터를 가져옵니다. TCP 및 웹에서는 UDP 소켓을 사용할 수 없습니다. 이 문제를 해결하려면 WebTransport를 확인하세요. 양방향, 양방향 및 멀티플렉스 네트워크 연결을 제공합니다. 참고: WebRTC를 사용하여 다른 브라우저와 실시간으로 데이터를 통신할 수도 있음 데이터를 전송할 수 있습니다
🧱 기기와 통신하는 방법 알아보기
사용해야 하는 하위 수준 API에 대한 결정은 장치의 물리적 연결입니다. 무선인 경우 다음 경우에 웹 NFC를 확인합니다. 매우 짧은 범위 무선 연결 및 근처 무선을 위한 웹 블루투스 기기에서 사용할 수 있습니다.
웹 NFC를 사용하여 기기 가까이 있을 때 이 기기를 읽고 씁니다. 사용자 기기 (일반적으로 5~10cm, 2~4인치) NFC TagInfo NXP로 리버스 엔지니어링을 위해 이 디바이스의 컨텐츠를 찾아볼 수 있음 있습니다.
웹 블루투스를 사용하여 저전력 블루투스를 통해 이 기기에 연결합니다. 연결. Kubernetes API를 사용하여 표준화된 블루투스 GATT 서비스 (예: 배터리 서비스)를 잘 문서화되어 있습니다. 그렇지 않은 경우, 이 시점에서 이 장치에 대한 하드웨어 설명서를 참조하거나 리버스 엔지니어링하십시오. 다음과 같은 작업을 할 수 있습니다. 모바일용 nRF Connect 및 내장된 브라우저 도구 등의 외부 도구 사용 예: Chromium 기반 내부 페이지
about://bluetooth-internals브라우저입니다. 다음에서 Reverse-Engineering a Bluetooth Light 전구를 확인하세요. URI가 흔들렸습니다. 블루투스 기기는 HID 또는 일련번호를 사용할 수도 있습니다. 사용할 수 있습니다
연결된 경우 다음 순서대로 API를 확인합니다.
WebHID를 사용하면 다음을 통해 HID 보고서 및 보고서 설명자를 이해할 수 있습니다. 이 기기를 이해하는 데 핵심은 컬렉션입니다. 이는 이 장치에 대한 공급업체 문서가 없으면 까다롭습니다. 다음과 같은 도구 Wireshark의 리버스 엔지니어링이 도움이 될 수 있습니다. 또한 HID 탐색기 웹 앱 - HID 기기 정보를 사람이 읽을 수 있는 형식으로 덤프합니다.
웹 일련번호 사용(이 기기에 관한 공급업체 문서 없음) 어렵지만 가능하다는 것을 깨닫게 되었습니다. 알게 되었습니다. 원시 USB를 캡처하여 이 기기를 리버스 엔지니어링할 수 있습니다. Wireshark 등의 도구를 통해 트래픽을 늘릴 수 있습니다. 또한 직렬 터미널을 사용하여 웹 앱에서 사람이 읽을 수 있는 프로토콜을 사용하는 경우 이 기기로 실험할 수 있습니다.
WebUSB를 사용하는 경우 이 기기에 대한 명확한 문서 및 어떤 USB 어렵지만 가능하다는 것을 깨닫게 되었습니다. 알게 되었습니다. Suz의 WebUSB와 그 멋진 잠재력 알아보기 시청하기 힌튼이네요. 원시 USB를 캡처하여 이 기기를 리버스 엔지니어링할 수도 있습니다. Wireshark와 같은 외부 도구를 사용하여 USB 설명자 트래픽 및 검사 기본 제공 브라우저 도구(예: 내부 페이지
about://usb-internals) Chrome 기반 브라우저에서 지원됩니다.
감사의 말씀
이 기사를 검토해 주신 라일리 그랜트, 토마스 슈타이너, 케이스 바스케스님께 감사드립니다.
사진: Darya Tryfanava(Unsplash 사용).