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