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

Sam Dutton

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 이상

자세히 알아보기