JavaScript를 사용하여 웹캠을 여는 방법은 무엇입니까?

이 튜토리얼에서는 JavaScript를 사용하여 웹캠을 여는 과정을 살펴보겠습니다. 따라서 이는 WebRTC를 사용하여 수행할 수 있습니다. WebRTC는 Web Real-Time Communications의 약어입니다. 이 개체를 사용하면 사용자 장치에서 사용할 수 있는 웹캠 및 마이크 장치에 액세스하고 캡처할 수 있습니다.

웹캠에 액세스하는 방법은 무엇인가요?

ECMAScript 객체 navigator.mediaDevices.getUserMedia(constraints)를 사용하여 사용자 장치 웹캠 및 마이크에 액세스할 수 있습니다.

따라서 getUserMedia() 함수는 기본적으로 사용자에게 웹캠 사용 권한을 요청합니다. 이 함수는 promise를 반환합니다. 일단 확인을 클릭하고 권한을 부여하면 promise가 실행되고 시스템에서 웹캠이 활성화됩니다. 그렇지 않은 경우에는 catch 메서드도 수행됩니다. 웹캠을 꺼주세요.

특정 너비나 높이의 이미지를 원하는 경우와 마찬가지로 getUserMedia() 함수에 매개변수를 전달할 수도 있습니다.

웹캠을 여는 과정

아래 단계에 따라 JavaScript를 사용하여 웹캠을 열 수 있습니다.

• 1단계 - 비디오와 같은 HTML 요소를 추가하여 웹캠 스트림을 표시하고 단추.

• 2단계 - 웹캠을 사용할 수 있는지 확인하고 반환된 약속을 해결하세요. getUserMedia 기능.

• 3단계 - 오디오, 비디오 등 getUserMedia() 함수에 매개변수 전달 사실입니다. 왜냐하면 우리가 그것을 사용할 것이기 때문입니다

• 4단계 - 스마트폰의 경우 faceingMode 옵션을 둘 다로 사용해야 합니다. 카메라를 사용할 수 있으며 기본적으로 전면 카메라로 켜집니다.

예

다음은 웹캠을 켜는 간단한 절차입니다. 우리는 작업을 완료하기 위해 위의 단계를 따랐습니다.

으아악

CSS를 사용하여 인터페이스 디자인

먼저 HTML과 CSS를 사용하여 웹 인터페이스를 디자인해 보겠습니다.

웹캠 비디오 영역과 같은 구성 요소를 추가하고 CSS를 사용하여 높이와 너비를 400px로 설정하고 배경색을 검정색으로 설정합니다. 웹캠 비디오 스트림이 표시됩니다.

Open Camera라는 버튼을 추가하고 해당 CSS 속성을 적용하면 이 버튼이 웹캠을 실행하는 데 사용됩니다.

이제 함수 코드를 추가하고 이를 메인 프로그램에 포함시켜 보겠습니다.

OpenCamera 버튼을 클릭하면 이 함수가 호출되며 이 함수 내에서 위에서 설명한 대로 모든 지침이 실행됩니다.

예

아래 예에서는 좀 더 대화형 인터페이스를 디자인하기 위해 일부 CSS를 추가했습니다.

으아악

출력 화면에서 볼 수 있듯이 "카메라 열기" 버튼을 클릭하면 웹캠에 대한 액세스를 요청하고 해당 액세스를 허용하면 비디오 영역 화면에서 웹캠 비디오 스트림이 시작됩니다. 액세스 권한을 부여하지 않으면 출력이 표시되지 않습니다.

위 내용은 JavaScript를 사용하여 웹캠을 여는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!