JavaScript MediaRecorder API를 사용하여 비디오 및 오디오 레코더를 만드는 방법은 무엇입니까?

이 튜토리얼에서는 JavaScript MediaRecorder API를 사용하여 오디오 및 비디오 레코더를 만드는 방법을 배웁니다. 따라서 이는 WebRTC를 사용하여 수행할 수 있습니다.

WebRTC란 무엇인가요?

WebRTC는 실시간 커뮤니케이션의 약자입니다. 사용자 장치에서 사용할 수 있는 웹캠 및 마이크 장치에 액세스하고 캡처할 수 있습니다.

ECMAScript 객체를 사용하여 사용자 장치의 웹캠과 마이크에 액세스할 수 있습니다

으아아아

따라서 getUserMedia 기능은 기본적으로 사용자에게 웹캠 사용 권한을 요청합니다. 이 함수는 promise를 반환하고 확인을 클릭하고 동의하면 함수가 실행되어 시스템에서 웹캠을 활성화합니다. 그렇지 않으면 허용하지 않으면 이에 대한 catch 메서드도 있습니다. 웹캠은 다음과 같습니다. 껐다.

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

프런트엔드 디자인

프런트엔드 섹션에는 다음과 같은 요소가 포함됩니다. -

동영상녹화 화면에는 -

과 같은 몇 가지 요소가 있습니다.

• 동영상 미디어 화면의 동영상 요소가 표시됩니다

• 시작 버튼을 누르면 비디오 녹화가 시작됩니다

• 중지 버튼을 누르면 비디오 녹화 스트림이 중단됩니다.

오디오녹음에는 두 개의 버튼이 있습니다

• 시작 버튼을 누르면 녹음이 시작됩니다

• 중지 버튼을 누르면 오디오 녹음 스트림이 중지됩니다.

글꼴 Awesome CDN을 추가하여 시작 및 중지 버튼 아이콘을 추가하고 페이지를 더욱 매력적으로 만들기 위해 요소에 CSS 스타일을 추가합니다.

HTML 코드

예

으아아아

"비디오 시작" 버튼을 클릭하면 start_video_Recording() 함수가 호출되고 "중지" 버튼은 stop_Recording()이 호출됩니다. 오디오의 경우에도 마찬가지로 시작 버튼을 클릭하면 기능이 실행됩니다. start_audio_Recording (), 중지 버튼의 경우 stop_Recording() 함수가 호출됩니다.

start_video_Recording() 함수

동영상을 시작하고 녹화하는 함수를 정의해 보겠습니다.

으아아아

시작 버튼을 누르면 위 함수가 호출되어 WebRTC 카메라 및 마이크 메서드를 트리거하여 녹음 권한을 얻고 녹음 중지 버튼을 활성화하고 녹음 시작 버튼을 비활성화합니다.

중지 버튼을 누르면 stop() 함수가 호출되고 모든 미디어 스트리밍 트랙이 중지됩니다.

그런 다음 미디어 스트림을 기록하기 위해 미디어 레코더 인스턴스를 생성하고 미디어 스트림과 미디어를 전역적으로 재정렬합니다. 비디오를 중지하면 미디어 스트리밍도 중지되며, 비디오 요소를 생성하면 새로운 비디오 요소가 생성되고 녹화된 미디어 데이터가 저장됩니다.

마찬가지로 start_audio_Recording() 함수도 start_video_Recording() 함수와 유사하지만 몇 가지 변경이 필요합니다.

stop_Recording() 함수

이제 녹음을 중지하는 함수를 정의해 보겠습니다.

으아아아

이 기능은 미디어 스트림에 저장된 모든 미디어 트랙을 중지합니다.

예

위의 기능을 HTML 코드에 추가하여 비디오 및 오디오 녹음 기능을 구현해 보겠습니다.

으아아아

출력에서 볼 수 있듯이 비디오 시작 버튼을 클릭하면 start_video_Recording() 함수가 호출되고 해당 함수에서 navigator.mediaDevices.getUserMedia() 메서드가 호출되고 비디오 및 마이크 권한을 찾기 위한 권한 메뉴가 열립니다. . 미디어 스트림을 구문 분석하겠다는 약속을 반환합니다. 오디오 또는 비디오 미디어 스트림을 수신한 후 미디어 레코더의 인스턴스를 생성하고 위 코드에서 medRec.start() 함수를 호출하여 녹음을 시작합니다.

따라서 WebRTC를 사용하여 비디오 및 오디오 녹음을 만드는 전체 프로세스를 이해하게 됩니다.

위 내용은 JavaScript MediaRecorder API를 사용하여 비디오 및 오디오 레코더를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!