자바스크립트, WebUSB API

WebUSB API를 사용하면 웹 애플리케이션이 브라우저에서 직접 USB 장치와 상호 작용할 수 있습니다. 이는 웹 애플리케이션이 Arduino, 3D 프린터, 게임 컨트롤러 등과 같은 장치와 통신할 수 있는 방법을 제공합니다.

​

요구 사항

WebUSB API에는 보안 컨텍스트가 필요합니다. 이는 웹 애플리케이션이 HTTPS 또는 localhost를 통해 제공되어야 함을 의미합니다. 또한 장치는 대부분의 최신 장치가 지원하는 WebUSB 표준을 지원해야 합니다.

​

장치 검색

WebUSB API를 사용하기 위한 첫 번째 단계는 사용 가능한 장치를 검색하는 것입니다. 이는 선택한 장치로 해결되는 Promise를 반환하는 `navigator.usb.requestDevice()` 메서드를 사용하여 수행할 수 있습니다.

​

navigator.usb.requestDevice({ filters: [] })

.then(device => {

console.log('Device:', device);

})

.catch(error => {

console.error('Error:', error);

});

​

`filters` 매개변수는 찾고 있는 장치를 설명하는 필터 배열입니다. 필터를 사용하여 공급업체 ID, 제품 ID 또는 둘 다를 기준으로 장치를 일치시킬 수 있습니다. 예를 들어 다음 필터는 Arduino Leonardo 보드와 일치합니다.

​

{ vendorId: 0x2341, productId: 0x8036 }

​

장치 열기

장치를 발견했으면 다음 단계는 `device.open()` 메서드를 사용하여 장치를 여는 것입니다. 장치가 성공적으로 열렸을 때 해결되는 Promise를 반환합니다.

​

device.open()

.then(() => {

console.log('Device opened:', device);

})

.catch(error => {

console.error('Error:', error);

});

​

읽기와 쓰기

장치를 연 후 `device.transferIn()` 및 `device.transferOut()` 메서드를 사용하여 데이터를 읽고 쓸 수 있습니다. 이 메서드는 전송된 데이터로 해결되는 Promise를 반환합니다.

​

데이터 쓰기

`device.transferOut()` 메서드는 장치에 데이터를 보내는 데 사용됩니다. 이 메서드는 끝점 번호와 보낼 데이터의 두 가지 인수를 사용합니다.

​

const data = new Uint8Array([0x01, 0x02, 0x03]);

device.transferOut(1, data)

.then(() => {

console.log('Data sent:', data);

})

.catch(error => {

console.error('Error:', error);

});

​

데이터 읽기

`device.transferIn()` 메서드는 장치에서 데이터를 받는 데 사용됩니다. 이 메서드는 끝점 번호와 읽을 최대 바이트 수의 두 가지 인수를 사용합니다.

​

device.transferIn(1, 8)

.then(result => {

console.log('Data received:', result.data);

})

.catch(error => {

console.error('Error:', error);

});

​

이 예에서는 엔드포인트 1에서 최대 8바이트의 데이터를 읽습니다.

​

장치 닫기

장치 사용을 마친 후에는 `device.close()` 메서드를 사용하여 장치를 닫아야 합니다.

​

device.close()

.then(() => {

console.log('Device closed');

})

.catch(error => {

console.error('Error:', error);

});