IT & Art

React 웹캠 시리즈입니다. React 웹캠 - 1. Promise 비동기 함수의 이해 React 웹캠 - 2. getUserMedia React 웹캠 - 3. Canvas React 웹캠 - 4. Select webcam Sample Code 두 개 이상의 웹캠(혹은 마이크)을 사용하는 경우 브라우저 메뉴를 통해 웹캠을 선택하는 React 앱을 만들어 봅시다. navigator.mediaDevices.enumerateDevices() 오늘의 주요 API는 enumerateDevices() 인데요, 이는 사용 가능한 모든 디바이스 배열을 리턴해줍니다. 리턴 값을 console.log로 찍어 보면 아래와 같습니다. deviceId는 이 디바이스에 접근하기 위한 ID이고 kind는 디바이스의 종류로서 au..

React 웹캠 시리즈입니다. React 웹캠 - 1. Promise 비동기 함수의 이해 React 웹캠 - 2. getUserMedia React 웹캠 - 3. Canvas React 웹캠 - 4. Select webcam Sample Code HTML5의 강력한 엘리먼트 중 하나인 canvas는 그래픽을 그리는 엘리먼트로서 게임, 애니메이션 및 비디오 영상 처리 등에 사용됩니다. 최근에는 WebGL 즉 웹에서 3D를 그릴 수 있는 성능이 대폭 강화되면서, canvas는 이제 없어서는 안 될 중요한 엘리먼트가 되었습니다. 난 편에서 getUserMedia()로 받은 웹캠 영상을 1초마다 canvas에 그린 뒤 그 위에 몇 가지 덧칠을 해보겠습니다. 내용을 보면서 canvas를 언제 쓰면 좋을지 생각해보..

React 웹캠 시리즈입니다. React 웹캠 - 1. Promise 비동기 함수의 이해 React 웹캠 - 2. getUserMedia React 웹캠 - 3. Canvas React 웹캠 - 4. Select webcam Sample Code 오늘은 웹캠을 통해 영상을 보여주는 간단한 React 앱을 만들어보겠습니다. 예제 코드: Sample Code 소스 위치: src/tutorial/Tutorial03-Webcam.js navigator.mediaDevices.getUserMedia() 단순히 navigator.mediaDevices.getUserMedia()만 호출하면 웹캠을 사용할 수 있습니다. 함수 인자로는 video를 쓸 것인지 audio를 쓸 것인지 true/false 값을 넣어주는 게 ..

React 웹캠 시리즈입니다. React 웹캠 - 1. Promise 비동기 함수의 이해 React 웹캠 - 2. getUserMedia React 웹캠 - 3. Canvas React 웹캠 - 4. Select webcam Sample Code 웹캠 사용 코드는 React뿐만 아니라 일반 자바스크립트에서도 사용할 수 있는 코드인데요, 다만 이번 예제에서 React 앱을 연동하기 위해 React state/ref 등을 사용합니다. 예제 코드: Sample Code 실행 방법: npm start 후 브라우저에서 http://localhost:3000/test03 으로 접속 소스 위치: src/ui/TestWebcam.js 본격적으로 웹캠 코드를 논하기 전에, 자바스크립트의 비동기 작업의 미래 결과인 Pro..