如何在Safari中捕获HTML video标签的音视频流？

你提到的HTMLMediaElement.captureMediaStream()是非标准的旧API，Safari确实未提供支持，但针对HLS源的场景，有几种替代方案可以尝试：

1. 使用标准的HTMLMediaElement.captureStream() #

首先要明确：Safari 14.1及以上版本已经支持标准的captureStream()方法，这和你用的旧版非标准captureMediaStream()不是同一个API。如果你的目标Safari版本达标，可以直接替换使用：

const videoEl = document.querySelector('video');
if ('captureStream' in videoEl) {
  // 捕获视频+音频流
  const mediaStream = videoEl.captureStream();
  // 后续可将流用于录制、直播等操作
}

需要注意的细节：

• 如果HLS流来自跨域地址，必须确保服务器配置了正确的CORS响应头，同时video元素要设置crossOrigin="anonymous"，否则会因为同源限制捕获失败
• 受DRM保护的HLS流无法通过此方法捕获，DRM会阻止内容提取

2. 通过Canvas间接捕获（兼容旧版Safari） #

如果需要支持14.1以下的Safari版本，Canvas捕获是最稳定的替代方案：
原理是将video的画面逐帧绘制到Canvas，再从Canvas捕获MediaStream，音频部分则可以单独通过videoEl.captureStream()（如果版本支持）或者其他方式处理：

const videoEl = document.querySelector('video');
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

// 同步Canvas尺寸与视频实际分辨率
canvas.width = videoEl.videoWidth;
canvas.height = videoEl.videoHeight;

// 循环绘制视频帧到Canvas
function drawVideoFrame() {
  ctx.drawImage(videoEl, 0, 0, canvas.width, canvas.height);
  requestAnimationFrame(drawVideoFrame);
}
// 开始绘制
drawVideoFrame();

// 捕获Canvas的媒体流（仅包含视频）
const canvasStream = canvas.captureStream(30); // 30为目标帧率，可按需调整

// 若需要音频，尝试从video直接捕获（Safari 11+支持音频捕获）
let audioTrack;
if ('captureStream' in videoEl) {
  const videoStream = videoEl.captureStream();
  audioTrack = videoStream.getAudioTracks()[0];
  if (audioTrack) {
    canvasStream.addTrack(audioTrack);
  }
}

这种方法的局限性：

• 视频帧绘制会有轻微延迟
• 若视频有DRM保护，Canvas绘制会被限制，只能得到黑屏

3. 基于MSE重封装HLS（复杂度较高） #

如果上述方法都不满足需求，可以考虑自己解析HLS分段，通过MediaSource Extensions（MSE）将片段喂给video元素，之后再用captureStream()捕获。这种方法需要手动处理HLS的播放逻辑（比如解析m3u8、加载ts片段、解码等），开发成本较高，适合对媒体流有高度自定义需求的场景。

通用注意事项 #

所有媒体捕获操作必须在用户主动交互（比如点击按钮）的回调中触发，浏览器的安全政策不允许无用户交互的情况下捕获媒体流。

内容的提问来源于stack exchange，提问作者Anthony