captureStream() 메서드를 사용하면 <canvas>, <audio> 또는 <video> 요소에서 MediaStream를 캡처할 수 있습니다.
이렇게 하면 이러한 요소의 동영상 또는 오디오 스트림을 녹화하거나, WebRTC를 통해 라이브 스트리밍하거나, <canvas>의 효과 또는 다른 MediaStream와 결합할 수 있습니다. 즉, captureStream()를 사용하면 MediaStream가 캔버스, 오디오 또는 동영상 요소 간에 또는 RTCPeerConnection 또는 MediaRecorder로 미디어를 주고받을 수 있습니다.
다음 데모 (WebRTC 샘플에서 사용 가능)에서는 왼쪽의 캔버스 요소에서 캡처된 MediaStream가 WebRTC 피어 연결을 통해 오른쪽의 동영상 요소로 스트리밍됩니다.
아래에 더 많은 캔버스 및 동영상 예시 링크가 있습니다.
captureStream() 코드는 간단합니다.
<canvas>:
var canvas = document.querySelector('canvas');
var video = document.querySelector('video');
// Optional frames per second argument.
var stream = canvas.captureStream(25);
// Set th<e sou>rce of the video element to be the <stream> from the canvas.
video.srcObject = stream;
<video>:
var leftVideo = document.getElementById('leftVideo');
var rightVideo = document.getElementById('rightVideo');
leftVideo.onplay = function() {
// Set th<e sou>rce of one video element to be a stream from another.
var stream = leftVideo.captureStream();
rightVideo.srcObject = stream;
};
이유가 무엇인가요?
captureStream() 메서드를 사용하면 캔버스 및 미디어 요소를 녹화하거나 라이브 스트리밍할 수 있습니다.
<canvas>에서 게임플레이 녹화 및 스트리밍하기- 카메라에서 동영상을 캡처한 후 콘텐츠 또는 효과를 추가합니다.
<canvas>를 통해 여러 동영상에서 PIP 효과 만들기<canvas>에서 동영상과 파일 또는 카메라의 이미지 (또는 둘 다)를 결합합니다.- 파일에서 재생되는 동영상 라이브 스트리밍
- 동영상 또는 음성메시지에 녹음된 오디오 또는 동영상 메시지 사용
기본적으로 captureStream()를 사용하면 JavaScript가 MediaStream을 구성하고 '항목을 삽입'할 수 있습니다.
주의사항
암호화된 미디어 확장 프로그램을 통해 콘텐츠 보호를 구현하는 미디어 요소에서
captureStream()를 사용하려고 하면 예외가 발생합니다.<canvas>에서 캡처할 때 최대 프레임 속도는captureStream()이 호출될 때 설정됩니다. 예를 들어canvas.captureStream(10)은 캔버스가 0~10fps 사이의 프레임을 출력함을 의미합니다.<canvas>에 아무것도 페인트되지 않으면 아무것도 캡처되지 않으며<canvas>가 30fps로 페인트되더라도 10fps가 캡처됩니다.captureStream사양에 추가 논의가 포함된 버그가 신고되어 있습니다.captureStream()동영상의 크기가 호출된<canvas>와 일치합니다.
데모
캔버스
동영상
지원
- 캔버스
captureStream(): Firefox 43 이상, chrome://flags/#enable-experimental-web-platform-features가 사용 설정된 Chrome 50 이상 또는 기본적으로 Chrome 52 이상 - 동영상 및 오디오
captureStream(): Firefox 47, Chrome 52 이상(chrome://flags/#enable-experimental-web-platform-features 사용 설정) 또는 기본적으로 Chrome 53 이상