WebRTC로 실시간 오디오 및 비디오 캡처
WebRTC란?
WebRTC는 웹 브라우저 및 모바일 애플리케이션(API)용 간단한 애플리케이션 프로그래밍 인터페이스를 통해 실시간 통신 기능을 제공하는 Google WebRTC 팀에서 유지 관리하는 오픈 소스 이니셔티브입니다[1].
다음은 WebRTC의 핵심 구성 요소입니다.
장치의 웹캠 및/또는 마이크에 대한 액세스를 허용하고 해당 신호를 RTC 연결에 연결할 수 있습니다.
비디오 채팅 및 전화 통화 구성을 위한 RTCPeerConnection 인터페이스.
브라우저 간에 P2P 데이터 경로를 설정하는 기술을 제공합니다[2].
WebRTC 개발
MediaDevices.getUserMedia() 메서드는 미디어 입력을 사용할 수 있는 권한을 요청하여 원하는 미디어 유형을 포함하는 트랙이 있는 MediaStream을 생성합니다.
MediaStream 개체로 확인되는 Promise를 반환합니다. 사용자가 권한을 거부하거나 일치하는 미디어가 없으면 NotAllowedError 또는 NotFoundError DOMException과 함께 약속이 거부됩니다.
파트 1: 비디오 캡처
비디오를 자동으로 재생하기 위해
<video>
속성과 함께 HTML 비디오 요소autoplay
를 추가합니다.<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Getting Started With WebRTC.</title>
<meta name="description" content="The WebRTC project is open-source and supported by Apple, Google, Microsoft and Mozilla, amongst others. This page is maintained by the Google WebRTC team.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<video autoplay></video>
<!-- <audio autoplay controls></audio> -->
<script src="script.js" async defer></script>
</body>
</html>
그런 다음 비디오 스트림을 녹화하기 위해 JavaScript를 사용하여 비디오 매개변수가 "true"로 설정된 제약 조건을 설정합니다. 사용자가 권한을 수락하면 하나의 비디오 트랙을 포함하는 MediaStream으로 약속이 이행됩니다. 일치하는 장치가 연결되어 있지 않으면
NotFoundError
가 생성되고 권한이 거부되면 PermissionDeniedError
가 발생합니다.// Request a video stream
const constraints = {
video: true
};
// handle success function
function handleSuccess(stream) {
document.querySelector('video').srcObject = stream;
}
// handle error function
function handleError(error) {
console.log('Error accessing media devices: ', error);
}
// triggers a permissions request with getUserMedia()
navigator.mediaDevices.getUserMedia(constraints)
.then(handleSuccess)
.catch(handleError);
Note 💡- If MediaDevices.getUserMedia() is called, all browsers will show a permissions window, giving users the choice of allowing or denying access to their webcam [3].
웹캠의 비디오 스트림은 사용자가 액세스 권한을 부여한 후 HTML 비디오 요소에 표시됩니다.
파트 2: 오디오 캡처
다음 단계는 마이크에서 생성된 오디오 스트림을 캡처하는 것입니다.
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]> <html class="no-js"> <!--<![endif]-->
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Getting Started With WebRTC.</title>
<meta name="description" content="The WebRTC project is open-source and supported by Apple, Google, Microsoft and Mozilla, amongst others. This page is maintained by the Google WebRTC team.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<audio autoplay controls></audio>
<script src="script.js" async defer></script>
</body>
</html>
Note 💡 - We upgraded to an HTML audio element
<audio>
with theautoplay
attribute to play the audio automatically and thecontrols
attribute to show the audio controls, such as the volume.
오디오 스트림을 녹음하기 위해 JavaScript를 사용하여 오디오 매개변수가 "true"로 설정된 제약 조건을 설정합니다. 마이크 사용 권한을 요청하려면
navigator.mediaDevices.getUserMedia
메소드가 호출됩니다. 사용자가 권한을 수락하면 하나의 오디오 트랙을 포함하는 MediaStream으로 약속이 이행됩니다. 일치하는 장치가 연결되어 있지 않으면 NotFoundError
가 생성되고 권한이 거부되면 PermissionDeniedError
가 발생합니다.// Request a audio stream
const constraints = {
audio: true
};
// handle success function
function handleSuccess(stream) {
document.querySelector('audio').srcObject = stream;
}
// handle error function
function handleError(error) {
console.log('getUserMedia error: ', error);
}
// triggers a permissions request with getUserMedia()
navigator.mediaDevices.getUserMedia(constraints)
.then(handleSuccess)
.catch(handleError);
Note 💡- If MediaDevices.getUserMedia() is called, all browsers will show a permissions window, giving users the choice of allowing or denying access to their microphone [3].
HTML 오디오 요소는 사용자가 마이크 액세스 권한을 허용한 후 마이크에서 생성된 오디오 스트림과 함께 표시됩니다.
결론
그리고 거기 당신은 그것을 가지고 있습니다. MediaDevices.getUserMedia() WebRTC 메서드를 사용하여 웹캠과 마이크에서 제공하는 비디오 및 오디오 스트림을 캡처하는 방법을 시연했습니다.
자원
[1] https://bit.ly/3EQ63Cs
[2] https://mzl.la/3eMi7tA
[3] https://bit.ly/3yPlas5
Reference
이 문제에 관하여(WebRTC로 실시간 오디오 및 비디오 캡처), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/hr21don/capture-real-time-audio-and-video-with-webrtc-49f8텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)