🧊

getUserMedia()以外でMediaStreamを用意するには

`navigator.mediaDevices.getUserMedia()`することで手に入る`MediaStream`を、それ以外の手段でどうやって自作するかという話です。

どんな形であれ思いついたのをメモっておきます。

captureStream()

Media Capture from DOM Elements

`HTMLMediaElement`つまり`audio`と`video`要素から取れる。

// videoでも同じ
const $audio = document.createElement('audio');
const stream = $audio.captureStream();

あと同じ名前のメソッドが、`HTMLCanvasElement`つまり`canvas`要素からも取れる。

// videoでも同じ
const $canvas = document.createElement('canvas');
const stream = $canvas.captureStream(10); // 10FPS

こっちのはFPSがOptionalで渡せる。

createMediaStreamDestination()

WebAudioを使ってもいける。

const ctx = new AudioContext();
const { stream } = ctx.createMediaStreamDestination();

// 1行で
new AudioContext().createMediaStreamDestination().stream;

Oscillatorとかで適当に音を作ってつないでおけば、jsだけでそういうストリームを自作することもできる。

VideoとAudio、どっちもFakeでいいので作る時のスニペット。

function getFakeStream(ctx) {
  const $canvas = document.createElement('canvas');
  $canvas.width = $canvas.height = 1;
  // NOTE: これがないとFirefoxが通らない
  $canvas.getContext('2d');
  const vStream = $canvas.captureStream();
  const aStream = ctx.createMediaStreamDestination().stream;

  const [vTrack] = vStream.getVideoTracks();
  const [aTrack] = aStream.getAudioTracks();

  return new MediaStream([vTrack, aTrack]);
}

getFakeStream(new AudioContext());

new MediaStream()

まあこれも一応・・ｗ
ただこの場合、中の`MediaStreamTrack`が入ってない。

getDisplayMedia()

Screen Capture

いつになるやら！