자바스크립트 10줄로 웹사이트에 웹캠 추가

지금까지 모르셨다면 웹사이트에서 웹캠이 어떻게 사용되는지 생각해 보셨을 것입니다. 그래서 오늘 제가 그 방법을 알려드리겠습니다.

웹캠에서 이미지를 표시하고 캡처하는 Photobooth를 만들 것입니다.

The codepen is not able to get camera access in the embedded form click here to see it working on the codepen website

먼저 레이아웃을 만듭니다

자바스크립트를 시작하기 전에 레이아웃을 만들어야 합니다. [카메라 컨테이너와 카메라 롤]은 두 부분으로 나뉩니다.

카메라 컨테이너에는 라이브 카메라의 피드가 있는 <video id=video autoplay></video>와 이미지를 스냅하는 버튼<button id="snap">Snap a Photo</button>이 있고 카메라 롤은 .prepend() <canvas> 요소가 있는 div가 될 것입니다. 자바 스크립트로 생성되고 캡처된 이미지를 포함합니다.

Don't get confused with prepend and canvas :

• prepend() is just like append(), a feature in Javascript which let you add element as a child of another element\
• prepend() means adding before append() means adding after
• <canvas> is just a element in HTML and used to draw graphics on it using Javascript we will display the captured image using it

더 나은 모양을 위해 약간의 패딩과 여백을 추가했기 때문에 레이아웃 스타일은 전적으로 여러분의 독창성에 달려 있습니다.

자바스크립트 부분

navigator라는 읽기 전용 개체가 있습니다. 여기에는 모든 브라우저 정보와 사용자 에이전트의 ID가 포함되어 있습니다. 단순히 권한, 사용자 데이터, 사용자 기본 설정 등이 포함되어 있습니다.

따라서 먼저 장치에 미디어 장치가 있는지 여부와 사용자가 액세스 권한을 부여할 수 있는지 여부를 확인합니다.if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {};이것이 사실이면 navigator.mediaDevices.getUserMedia({ video: true }).then((stream)=>{ }); 다음에 .then를 사용하여 액세스 권한을 요청할 것입니다. 여기에는 비디오를 스트리밍하기 위해 비디오 요소를 업데이트하는 기능이 포함됩니다.

.then((stream)=>{
        video.srcObject = stream;
        video.play();
});

I haven't describe how to get the DOM element in javascript assuming you definitely know it

이제 캡처 부분의 경우 스냅 버튼에 .onclick 이벤트를 추가하고 클릭 후 document.createElement('canvas');를 사용하여 캔버스 요소를 생성하고 이를 const와 같이 const canvas = document.createElement('canvas');에 저장하고 유형을 설정합니다. 이 const와 같은 const context = canvas.getContext('2d');에도 저장하십시오.

이제 .drawImage()를 사용하여 다음과 같이 캔버스에 스냅을 그립니다context.drawImage(video, 0, 0, canvas.width, canvas.height);. 크기는 늘어짐을 방지하기 위해 캔버스와 동일합니다.

그런 다음 prepend(canvas)를 사용하여 cameraRoll.prepend(canvas); 카메라 롤로 이동합니다.

codepen을 살펴보십시오. 작동 방식이 명확합니다.

Read Also:

HTML/CSS/JS가 잘 작동하는데 React를 사용하는 이유는 무엇입니까?

Areeb ur Rub ・ 5월 29일 ・ 1분 읽기

#discuss #webdev #react #javascript

Follow me for more:

Areeb ur RubFollow

18 | coding since 2016 | Arduino | Python | JavaScript | HTML/CSS | Love learn making things

Follow me on Twitter: