如何不创建video标签从URL获取MediaStream，统一处理摄像头与本地视频流

可行性说明 #

你期望的统一调用逻辑思路完全可行，仅需要修正一处属性使用错误：MediaStream类型的流对象不能直接赋值给video标签的src属性，需要赋值给srcObject属性，修正后上层不需要感知流的来源差异。

最优实现方案 #

核心思路是将「webcam流获取」和「本地视频流捕获」的差异逻辑全部封装在底层函数内，对外返回统一的MediaStream实例，上层直接使用即可，不需要额外处理不同来源的适配逻辑。
本地视频场景不需要创建可见的、挂载到DOM的video标签，仅需要创建内存中的video元素处理即可，不会额外增加页面DOM负担。

完整代码实现 #

/**
 * 统一获取webcam或本地视频的媒体流
 * @param {'webcam'|'local'} sourceType 流来源类型
 * @param {File} [file] 本地视频文件，sourceType为local时必填
 * @returns {Promise<MediaStream>} 统一的媒体流实例
 */
async function getStreamFromLocalVideoOrWebcam(sourceType, file = null) {
  if (sourceType === 'webcam') {
    // webcam场景直接返回原生媒体流
    return await navigator.mediaDevices.getUserMedia({
      video: true,
      audio: true
    })
  }

  if (sourceType === 'local' && file instanceof File) {
    // 本地视频场景创建内存video元素，不需要插入DOM
    const offscreenVideo = document.createElement('video')
    offscreenVideo.muted = false // 如需保留音频设为false
    offscreenVideo.loop = true // 按需配置是否循环播放

    // 加载本地视频文件
    offscreenVideo.src = URL.createObjectURL(file)
    await offscreenVideo.play()

    // 捕获视频流
    const stream = offscreenVideo.captureStream()
    // 将video实例挂载到流上，避免被GC回收导致流中断
    stream._referenceVideo = offscreenVideo

    return stream
  }

  throw new Error('无效的来源类型或缺少本地视频文件参数')
}

调用示例 #

async function initPlayer() {
  // 按需选择流来源，上层无需关心底层差异
  //  webcam场景调用
  // const stream = await getStreamFromLocalVideoOrWebcam('webcam')
  // 本地视频场景调用，file为input[type=file]获取的File对象
  // const stream = await getStreamFromLocalVideoOrWebcam('local', file)
  
  const stream = await getStreamFromLocalVideoOrWebcam('webcam')
  // 注意这里使用srcObject属性赋值
  document.querySelector('#yourVideoTag').srcObject = stream
}

注意事项 #

• 流使用完毕后需要手动销毁避免内存泄漏：先调用stream.getTracks().forEach(track => track.stop())停止所有轨道；如果是本地视频流，还需要调用URL.revokeObjectURL(stream._referenceVideo.src)释放临时URL资源
• 本地视频的播放、倍速、进度调整等操作直接操作stream._referenceVideo即可，改动会同步到捕获的流中

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