자바스크립트 "Media Capture와 Streams API"

Media Capture and Streams API는 웹 개발자가 카메라 및 마이크와 같은 멀티미디어 장치에 액세스하고 오디오 및 비디오를 포함한 미디어 스트림을 캡처할 수 있도록 하는 JavaScript API입니다. 이 API를 사용하여 개발자는 비디오 및 오디오를 녹화하고 라이브 비디오 및 오디오 콘텐츠를 스트리밍할 수 있는 웹 애플리케이션을 만들 수 있습니다.

​

다음은 Media Capture and Streams API를 사용하여 사용자 카메라에서 비디오를 캡처하는 방법의 예입니다.

​

// get the video element from the HTML document

const video = document.querySelector('video');

​

// use the getUserMedia() method to request permission to access the user's camera

navigator.mediaDevices.getUserMedia({ video: true })

.then(stream => {

// set the video element's source to the media stream

video.srcObject = stream;

// play the video

video.play();

})

.catch(err => {

// handle errors here

console.log('Error accessing camera:', err);

});

​

이 예제에서는 `getUserMedia()` 메서드를 사용하여 사용자의 카메라에 액세스할 수 있는 권한을 요청합니다. 비디오 캡처를 위해 사용자의 카메라에 액세스하도록 지정하기 위해 `video` 속성이 `true`로 설정된 개체를 전달합니다. 권한이 있으면 비디오 요소의 `srcObject` 속성을 `getUserMedia()` 메서드에서 반환된 미디어 스트림으로 설정합니다. 마지막으로 비디오 요소에서 `play()` 메서드를 호출하여 비디오 재생을 시작합니다.

​

다음은 사용자 마이크에서 오디오를 캡처하는 방법을 보여주는 또 다른 예입니다.

​

// get the audio element from the HTML document

const audio = document.querySelector('audio');

​

// use the getUserMedia() method to request permission to access the user's microphone

navigator.mediaDevices.getUserMedia({ audio: true })

.then(stream => {

// set the audio element's source to the media stream

audio.srcObject = stream;

// play the audio

audio.play();

})

.catch(err => {

// handle errors here

console.log('Error accessing microphone:', err);

});

​

이 예제에서는 `getUserMedia()` 메서드를 다시 사용하여 사용자의 마이크에 액세스할 수 있는 권한을 요청합니다. 이번에는 오디오 캡처를 위해 사용자의 마이크에 액세스하도록 지정하기 위해 `audio` 속성이 `true`로 설정된 개체를 전달합니다. 권한이 있으면 오디오 요소의 `srcObject` 속성을 `getUserMedia()` 메서드에서 반환된 미디어 스트림으로 설정합니다. 마지막으로 오디오 요소에서 `play()` 메서드를 호출하여 오디오 재생을 시작합니다.

​

이 예제는 Media Capture 및 Streams API를 사용하여 사용자의 카메라와 마이크에서 비디오 및 오디오를 캡처하는 방법을 보여줍니다. 이 API를 사용하면 사용자가 비디오 및 오디오를 녹화하고 라이브 비디오 및 오디오 콘텐츠를 스트리밍할 수 있는 웹 애플리케이션을 만들 수 있습니다.