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 the source 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 the source 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을 구성하고 여기에 '항목을 삽입'할 수 있습니다.
세부사항
Encrypted Media Extensions를 통해 콘텐츠 보호를 구현하는 미디어 요소와 함께
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://flags/#enable-experimental-web-platform-features가 사용 설정된 Chrome 52 이상 또는 기본적으로 Chrome 53 이상