笔记

Appearance

大纲

媒体录制 ​

浏览器支持对 MediaStream 进行记录, 因而可以进行屏幕录制、媒体元素录制或片段导出 等操作

MediaStream ​

根据需要获取对应的 MediaStream

  • 通过设备获取 navigator.mediaDevices
    • .getDisplayMedia({ audio?: true, video: true }): 捕捉内置设备(屏幕桌面、内录声音)
    • .getUserMedia({ audio?: true, video?: true }): 捕捉用户设备(摄像头、麦克风)
  • 通过元素获取 HTMLMediaElement.captureStream()
    • canvas.captureStream(fps?: numbere)
    • audio.captureStream()
    • video.captureStream()

注意

  • 通过元素获取目前中文文档缺失，可以参考英文文档
  • ts (v4.6) 只支持 canvas.captureStream 的类型声明，audio 和 video 元素的 api 需要自行处理
  • audio 和 video 元素的媒体流需要加载后再获取 (待验证)
  • audio 和 video 元素通过 canplaythrough 事件判断是否可以进行播放

MediaRecorder ​

ondataavailable 触发时机

  • 媒体流结束
  • MediaRecorder.stop()
  • MediaRecorder.start(timeslice): 指定 timeslice 会按时触发
ts
async function createRecorder(stream: MediaStream, download) {
  const options = {
    audioBitsPerSecond: 128000,
    videoBitsPerSecond: 2500000,
    mimeType: "video/webm; codecs=vp9",
  };
  // const constraints = {
  //   audio: true,
  //   video: true,
  // };
  const recorder = new MediaRecorder(stream, options);
  recorder.onstart = ev => console.log("开始录屏");
  recorder.onpause = ev => console.log("暂停录屏");
  recorder.onstop = ev => console.log("停止录屏");
  const recordedChunks: Blob[] = [];
  recorder.ondataavailable = ev => {
    console.log(ev);
    if (ev.data.size > 0) {
      recordedChunks.push(ev.data);
      download(recordedChunks);
    } else {
      // ...
    }
  };
  return recorder;
}
const recorder = createRecorder(stream, download);
recorder.start();
recorder.stop();

资源下载 ​

js
function download(recordedChunks: Blob[]) {
  var blob = new Blob(recordedChunks, {
    type: "video/webm",
  });
  var url = URL.createObjectURL(blob);
  var a = document.createElement("a");
  document.body.appendChild(a);
  a.href = url;
  a.download = "test.webm";
  a.click();
  URL.revokeObjectURL(url);
}
js
function checkMimeType() {
  var types = [
    "video/webm",
    "audio/webm",
    "video/webm;codecs=vp8",
    "video/webm;codecs=daala",
    "video/webm;codecs=h264",
    "audio/webm;codecs=opus",
    "video/mpeg",
  ];

  for (var i in types) {
    console.log(types[i], MediaRecorder.isTypeSupported(types[i]));
  }
}