선택한 하드웨어 기기와 통신하는 데 적합한 API를 선택합니다.
이 가이드의 목표는 웹에서 하드웨어 기기 (예: 웹캠, 마이크 등)와 통신하는 데 가장 적합한 API를 선택하는 데 도움을 주는 것입니다. 여기서 '최고'란 최소한의 작업으로 필요한 모든 것을 제공한다는 의미입니다. 즉, 해결하려는 일반적인 사용 사례 (예: 동영상 액세스)는 알고 있지만 어떤 API를 사용해야 하는지 모르거나 다른 방법이 있는지 궁금한 경우입니다.
웹 개발자가 흔히 겪는 문제 중 하나는 구현하기 쉽고 더 나은 UX를 제공하는 상위 수준 API에 관해 알아보지 않고 하위 수준 API로 바로 넘어가는 것입니다. 따라서 이 가이드에서는 상위 수준 API를 먼저 추천하지만, 상위 수준 API가 요구사항을 충족하지 않는다고 판단한 경우를 위해 하위 수준 API도 언급합니다.
🕹 이 기기에서 입력 이벤트 수신
키보드 및 포인터 이벤트를 수신 대기해 보세요. 이 기기가 게임 컨트롤러인 경우 Gamepad API를 사용하여 어떤 버튼이 눌렸고 어떤 축이 이동했는지 확인합니다.
이러한 옵션 중 어느 것도 적합하지 않다면 하위 수준 API가 해결책이 될 수 있습니다. 기기와 통신하는 방법 알아보기를 확인하여 여정을 시작하세요.
📸 이 기기의 오디오 및 동영상에 액세스
MediaDevices.getUserMedia()를 사용하여 이 기기에서 실시간 오디오 및 동영상 스트림을 가져오고 오디오 및 동영상 캡처에 관해 알아보세요. 카메라의 화면 이동, 기울기, 확대/축소, 밝기 및 대비와 같은 기타 카메라 설정을 제어하고 정지 이미지를 촬영할 수도 있습니다. Web Audio를 사용하여 오디오에 효과를 추가하거나, 오디오 시각화를 만들거나, 공간 효과 (예: 패닝)를 적용할 수 있습니다. Chrome에서 Web Audio 앱의 성능을 프로파일링하는 방법도 확인해 보세요.
이러한 옵션 중 어느 것도 적합하지 않다면 하위 수준 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인치) 이 기기에 읽고 쓸 수 있습니다. NXP의 NFC TagInfo와 같은 도구를 사용하면 리버스 엔지니어링 목적으로 이 기기의 콘텐츠를 탐색할 수 있습니다.
웹 블루투스를 사용하면 저전력 블루투스 연결을 통해 이 기기에 연결할 수 있습니다. 표준화된 블루투스 GATT 서비스 (예: 배터리 서비스)를 사용하는 경우 동작이 잘 문서화되어 있으므로 통신하기가 매우 쉽습니다. 그렇지 않은 경우 이 시점에서 이 기기의 하드웨어 문서를 찾거나 리버스 엔지니어링해야 합니다. 이를 위해 nRF Connect for Mobile과 같은 외부 도구와 Chromium 기반 브라우저의 내부 페이지
about://bluetooth-internals와 같은 내장 브라우저 도구를 사용할 수 있습니다. Uri Shaked의 블루투스 전구 리버스 엔지니어링을 확인하세요. 블루투스 기기는 HID 또는 직렬 프로토콜을 사용할 수도 있습니다.블루투스를 통한 직렬을 사용하면 표준화된 직렬 포트 프로필 (SPP)과 같은 페어링된 블루투스 클래식 기기에서 RFCOMM 서비스와 통신할 수 있습니다. 하지만 맞춤 RFCOMM 기반 서비스의 경우 기기 공급업체 문서에서
requestPort()에 전달할 서비스 UUID를 확인해야 합니다.
유선인 경우 다음 API를 순서대로 확인하세요.
WebHID를 사용하면 컬렉션을 통해 HID 보고서와 보고서 설명자를 이해하는 것이 이 기기를 이해하는 데 핵심입니다. 이 기기에 대한 공급업체 문서가 없으면 어려울 수 있습니다. Wireshark와 같은 도구를 사용하면 리버스 엔지니어링할 수 있습니다. HID 탐색기 웹 앱을 사용하여 HID 기기 정보를 인간이 읽을 수 있는 형식으로 덤프할 수도 있습니다.
Web Serial을 사용하면 이 기기에 대한 공급업체 문서와 이 기기에서 지원하는 명령어가 없어도 운 좋게 추측할 수 있습니다. 이 기기의 리버스 엔지니어링은 Wireshark와 같은 도구를 사용하여 원시 USB 트래픽을 캡처하는 방식으로 수행할 수 있습니다. 이 기기가 인간이 읽을 수 있는 프로토콜을 사용하는 경우 직렬 터미널 웹 앱을 사용하여 이 기기를 실험할 수도 있습니다.
WebUSB를 사용하면 이 기기에 관한 명확한 문서와 이 기기에서 지원하는 USB 명령어가 없어도 운 좋게 추측할 수 있습니다. Suz Hinton의 WebUSB 및 흥미로운 잠재력 살펴보기를 시청하세요. 또한 원시 USB 트래픽을 캡처하고 Wireshark와 같은 외부 도구 및 Chromium 기반 브라우저의 내부 페이지
about://usb-internals와 같은 내장 브라우저 도구를 사용하여 USB 설명자를 검사하여 이 기기를 리버스 엔지니어링할 수 있습니다.
감사의 말씀
이 도움말을 검토해 주신 Reilly Grant, Thomas Steiner, Kayce Basques에게 감사의 말을 전합니다.