적절한 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