캔버스, 동영상, 오디오 요소에서 MediaStream 캡처

샘 더튼

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()를 사용하면 자바스크립트가 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://flags/#enable-experimental-web-platform-features가 사용 설정된 Chrome 52 이상 또는 기본적으로 Chrome 53 이상

자세히 알아보기