puppeteer-stream的ReadableStream如何转换为WebRTC可用MediaStream？

核心问题本质 #

Node原生环境没有内置MediaStream、MediaStreamTrack等WebRTC相关API，且puppeteer-stream输出的是封装好的webm格式ReadableStream，不符合simple-peer的入参要求。有两种成熟的实现方案，按需选择即可：

方案1：服务端转换为MediaStream（适合需要在服务端处理流的场景） #

前置依赖

首先安装Node端WebRTC兼容包，该包实现了标准WebRTC相关接口，simple-peer会自动识别适配：

npm install @koush/wrtc fluent-ffmpeg

实现步骤

1. 用fluent-ffmpeg处理puppeteer-stream输出的ReadableStream，拆分出独立的h264/vp8视频裸流、opus音频裸流。
2. 实例化wrtc.MediaStream，并分别创建视频、音频MediaStreamTrack实例，将ffmpeg输出的裸流片段逐帧喂给对应轨道，再将轨道加入MediaStream实例。
3. 直接将组装好的MediaStream传入simple-peer的addStream方法即可。

简化示例代码

const { MediaStream, MediaStreamTrack } = require('@koush/wrtc')
const ffmpeg = require('fluent-ffmpeg')
const puppeteer = require('puppeteer')
const { getStream } = require('puppeteer-stream')
const Peer = require('simple-peer')

// 省略puppeteer初始化逻辑
const browser = await puppeteer.launch()
const page = await browser.newPage()
const pptrStream = await getStream(page, { audio: true, video: true })

// 初始化MediaStream
const outputStream = new MediaStream()

// 用ffmpeg拆分视频轨道
ffmpeg(pptrStream)
  .outputFormat('h264')
  .videoCodec('copy')
  .noAudio()
  .on('data', (chunk) => {
    // 将h264帧喂给视频track，此处省略帧拆分逻辑
  })
// 音频轨道拆分逻辑同理，最终将track加入outputStream

// 传入simple-peer
const peer = new Peer({ initiator: true, stream: outputStream })

方案2：前端转换（实现更简单、性能损耗更低，推荐） #

无需在服务端做复杂的格式转换，直接通过simple-peer的数据通道传输webm流片段，到前端后再组装为MediaStream播放：

1. 服务端直接监听puppeteer-stream的data事件，将拿到的二进制片段通过peer.send()方法传给前端。
2. 前端接收到流片段后，通过MediaSourceAPI组装为可播放的媒体流，直接绑定到video标签即可。注意首次传输需要先发送webm头信息，前端声明的MIME类型需要和流的编码匹配，例如video/webm; codecs="vp8, opus"。

常见坑点 #

• 如果服务端未安装@koush/wrtc依赖，即使手动构造带有getTracks方法的对象，simple-peer也无法正常处理流传输。
• 传输流时注意控制分片大小，避免数据通道超过最大传输单元导致丢包。

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