적절한 API를 선택하여 원하는 하드웨어 기기와 통신합니다.
이 가이드의 목표는 웹에서 하드웨어 기기 (예: 웹캠, 마이크 등)와 통신하는 데 가장 적합한 API를 선택하는 데 도움을 주는 것입니다. 여기서 말하는 '최고'란 최소한의 작업으로 필요한 모든 것을 제공한다는 의미입니다. 즉, 해결하려는 일반적인 사용 사례 (예: 동영상 액세스)를 알고 있지만 사용할 API를 모르거나 이를 달성하는 다른 방법이 있는지 궁금합니다.
제가 흔히 겪는 한 가지 문제는 웹 개발자가 더 쉽게 구현하고 더 나은 UX를 제공하는 상위 수준 API에 관해 배우지 않고 하위 수준의 API로 뛰어드는 것입니다. 따라서 이 가이드에서는 먼저 높은 수준의 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 또는 무선 스피커)에서 오디오 또는 동영상을 브로드캐스트하거나 Slides API를 사용하여 두 번째 화면에 웹페이지를 렌더링합니다 (예: HDMI 케이블로 연결된 보조 디스플레이 또는 무선으로 연결된 스마트 TV).
이 기기가 웹 서버를 노출하는 경우 Fetch API 또는 WebSockets를 사용하여 적절한 엔드포인트에 접속하여 기기에서 일부 데이터를 가져옵니다. TCP 및 UDP 소켓은 웹에서 사용할 수 없지만 대화형, 양방향, 다중화된 네트워크 연결을 처리하려면 WebTransport를 확인하세요. WebRTC를 사용하면 P2P 프로토콜을 사용하여 다른 브라우저와 실시간으로 데이터를 통신할 수도 있습니다.
🧱 기기와 통신하는 방법을 알아보세요
사용해야 하는 하위 수준 API는 기기에 대한 실제 연결의 특성에 따라 결정됩니다. 무선인 경우 매우 짧은 무선 연결의 경우 웹 NFC를, 근처 무선 기기의 웹 블루투스를 확인합니다.
웹 NFC를 사용하면 기기가 사용자 기기와 가까이 있을 때 (일반적으로 5~10cm, 2~4인치) 기기를 읽고 씁니다. NXP의 NFC TagInfo와 같은 도구를 사용하면 리버스 엔지니어링 목적으로 이 기기의 콘텐츠를 탐색할 수 있습니다.
웹 블루투스를 사용하면 저전력 블루투스 연결을 통해 이 기기에 연결합니다. 표준화된 블루투스 GATT 서비스 (예: 배터리 서비스)를 사용하면 동작이 잘 문서화되어 있으므로 통신하기가 매우 쉽습니다. 없다면 이 시점에서 이 기기에 관한 하드웨어 문서를 찾거나 리버스 엔지니어링해야 합니다. 이를 위해 Chromium 기반 브라우저에서 모바일용 nRF Connect와 같은 외부 도구 및 내부 페이지
about://bluetooth-internals와 같은 내장 브라우저 도구를 사용할 수 있습니다. Uri Shaked에서 블루투스 전구 리버스 엔지니어링을 확인하세요. 블루투스 기기는 HID 또는 직렬 프로토콜을 말할 수도 있습니다.
유선인 경우 다음 API를 순서대로 확인합니다.
WebHID를 사용하는 경우 컬렉션을 통해 HID 보고서와 보고서 설명자를 이해하는 것이 이 기기를 이해하는 데 중요합니다. 이 기기의 공급업체 문서가 없으면 어려울 수 있습니다. Wireshark 같은 도구를 사용하여 리버스 엔지니어링할 수 있습니다. HID 탐색기 웹 앱을 사용하여 HID 기기 정보를 사람이 읽을 수 있는 형식으로 덤프할 수도 있습니다.
웹 일련번호를 사용하면 이 기기의 공급업체 문서와 이 기기에서 지원하는 명령어가 없으면 힘들지만 추측을 통해 추측할 수 있습니다. 이 기기의 리버스 엔지니어링은 Wireshark 같은 도구로 원시 USB 트래픽을 캡처하여 수행할 수 있습니다. 사람이 읽을 수 있는 프로토콜을 사용하는 경우 직렬 터미널 웹 앱을 사용하여 이 기기로 실험할 수도 있습니다.
WebUSB를 사용하면 이 기기와 기기에서 지원하는 USB 명령어에 관한 명확한 문서가 없으면 어렵지만 추측을 통해 추측할 수 있습니다. Suz Hinton이 제공하는 Exploring WebUSB and and their 만큼 흥미로운 target을 시청하세요. Wireshark 같은 외부 도구와 Chromium 기반 브라우저의 내부 페이지
about://usb-internals와 같은 기본 제공 브라우저 도구로 원시 USB 트래픽을 캡처하고 USB 설명자를 검사하여 이 기기를 리버스 엔지니어링할 수도 있습니다.
감사의 말
이 글을 읽어주신 Reilly Grant, Thomas Steiner, Kayce Basques 님께 감사드립니다.
사진: Darya Tryfanava, Unsplash