如何创建MediaStreamTrack并将其添加至MediaStream

1. 从设备获取轨道并添加到流 #

最常见的场景是通过摄像头、麦克风等设备获取媒体轨道，再将其添加到MediaStream中：

// 请求用户授权获取摄像头和麦克风
navigator.mediaDevices.getUserMedia({ video: true, audio: true })
  .then(originalStream => {
    // 从原始流中提取视频、音频轨道
    const videoTrack = originalStream.getVideoTracks()[0];
    const audioTrack = originalStream.getAudioTracks()[0];

    // 创建新的空MediaStream
    const targetStream = new MediaStream();
    // 将轨道添加到目标流
    targetStream.addTrack(videoTrack);
    targetStream.addTrack(audioTrack);

    // 示例：将流绑定到页面的video元素播放
    const videoEl = document.getElementById('player');
    videoEl.srcObject = targetStream;
  })
  .catch(err => {
    console.error('获取媒体设备失败:', err);
  });

2. 创建自定义MediaStreamTrack #

如果需要生成自定义内容的轨道（比如Canvas绘制的动态画面），可以通过以下方式实现：

方式一：从Canvas捕获轨道 #

// 创建Canvas并绘制基础内容
const canvas = document.createElement('canvas');
canvas.width = 640;
canvas.height = 480;
const ctx = canvas.getContext('2d');

// 动态更新Canvas内容
function drawFrame() {
  ctx.fillStyle = `hsl(${Date.now() % 360}, 80%, 60%)`;
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  requestAnimationFrame(drawFrame);
}
drawFrame();

// 从Canvas捕获媒体流（30帧/秒），提取视频轨道
const canvasStream = canvas.captureStream(30);
const customVideoTrack = canvasStream.getVideoTracks()[0];

// 创建流并添加自定义轨道
const customStream = new MediaStream();
customStream.addTrack(customVideoTrack);

// 播放自定义流
const videoEl = document.getElementById('custom-player');
videoEl.srcObject = customStream;

方式二：使用MediaStreamTrackGenerator（现代浏览器支持） #

这是更灵活的自定义轨道创建方式，适合生成程序化的媒体内容：

// 创建视频轨道生成器
const trackGenerator = new MediaStreamTrackGenerator({ kind: 'video' });
const writer = trackGenerator.writable.getWriter();

// 每帧生成视频帧并写入轨道
setInterval(async () => {
  const canvas = document.createElement('canvas');
  canvas.width = 640;
  canvas.height = 480;
  const ctx = canvas.getContext('2d');
  
  ctx.fillStyle = `rgb(${Math.random()*255}, ${Math.random()*255}, ${Math.random()*255})`;
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  
  // 将Canvas转为VideoFrame并写入轨道
  const frame = new VideoFrame(canvas);
  await writer.write(frame);
  frame.close(); // 释放帧资源
}, 1000/30);

// 添加到MediaStream
const customStream = new MediaStream();
customStream.addTrack(trackGenerator);

核心API说明 #

• new MediaStream(): 创建一个空的媒体流实例
• MediaStream.addTrack(track): 将指定的MediaStreamTrack添加到流中
• navigator.mediaDevices.getUserMedia(constraints): 请求用户授权，获取包含设备轨道的媒体流
• HTMLCanvasElement.captureStream(fps): 从Canvas捕获动态内容，生成包含视频轨道的媒体流
• MediaStreamTrackGenerator: 用于创建自定义媒体轨道的API，支持写入自定义VideoFrame/AudioData

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