React+Node环境下mediasoup消费者视频流无法播放问题

环境背景 #

我正在用React + Node开发流媒体网站，采用mediasoup作为WebRTC SFU。已按步骤完成worker创建、RTP能力获取、device实例化、发送/接收Transport的创建与连接流程，但消费者端视频始终无法正常播放。

核心问题 #

调用connectRecvTransport后无报错，能拿到合法的params对象与MediaStreamTrack实例，但绑定到video标签后视频无法播放。

相关代码与日志 #

connectRecvTransport实现代码 #

const connectRecvTransport = async () => {
    await socket.emit('consume', {
        rtpCapabilities: deviceRef.current.rtpCapabilities
    }, async({ params }) => {
        console.log('hit')
        if(params.error){
            console.log('Cannot Consume')
            return
        }
        console.log(params)
        consumer = await consumerTransport.consume({
            id: params.id,
            producerId: params.producerId,
            kind: params.kind,
            rtpParameters: params.rtpParameters
        })
        const {track} = consumer;
        console.log(track)
        remoteVideoRef.current.srcObject = new MediaStream([track])
        socket.emit('consumer-resume')
    })
}

控制台打印的params对象 #

{
    "id": "9f565ba7-73b1-4b7f-ae52-3af43a717ab1",
    "producerId": "3620d506-0cf3-4279-9c6c-53b6c4a0126d",
    "kind": "video",
    "rtpParameters": {
        "codecs": [
            {
                "mimeType": "video/VP8",
                "payloadType": 101,
                "clockRate": 90000,
                "parameters": {},
                "rtcpFeedback": [
                    {
                        "type": "transport-cc",
                        "parameter": ""
                    },
                    {
                        "type": "ccm",
                        "parameter": "fir"
                    },
                    {
                        "type": "nack",
                        "parameter": ""
                    },
                    {
                        "type": "nack",
                        "parameter": "pli"
                    }
                ]
            },
            {
                "mimeType": "video/rtx",
                "payloadType": 102,
                "clockRate": 90000,
                "parameters": {
                    "apt": 101
                },
                "rtcpFeedback": []
            }
        ],
        "headerExtensions": [
           ***Bunch Of Headers
        ],
        "encodings": [
            {
                "ssrc": 392839613,
                "rtx": {
                    "ssrc": 392839614
                }
            }
        ],
        "rtcp": {
            "cname": "Cu6bT4SfZU86sWTI",
            "reducedSize": true
        },
        "mid": "0"
    }
}

Video标签代码 #

<video ref={remoteVideoRef} autoPlay playsInline style={{ width: '50%' }}></video>

控制台打印的Track信息（片段） #

MediaStreamTrack {kind: 'video', id: 'cf9c835b-7ef4-42a7-808f-e520afc96664', label: 'cf9c835b-7ef4-42a7-808f-e520afc96664', enabled: true, muted: false, …}

已尝试的配置调整 #

调整了WebRtcTransport的listenIps参数：

const WebRtcTransport_options ={
  listenIps : [
    {
      ip: '0.0.0.0',
      announcedIp: '127.0.0.1'
    }
  ],
  enableUdp: true,
  enableTcp: true,
  preferUpd: true
}

关键排查点与修复建议 #

1. 修正consumer-resume的参数缺失：当前代码中socket.emit('consumer-resume')未传递consumer ID，mediasoup服务端无法识别需要恢复的消费者，需改为：

   socket.emit('consumer-resume', { consumerId: params.id })
   

   同时服务端需接收该ID并调用consumer.resume()方法。

2. 确认consumer transport连接状态：在调用consume前，打印consumerTransport.connectionState与consumerTransport.closed，确保Transport已完成连接，避免在未就绪状态下创建消费者。

3. 添加consumer事件监听：监听异常事件排查流中断问题：

   consumer.on('trackended', () => console.log('consumer track ended'));
   consumer.on('transportclose', () => console.log('consumer transport closed'));
   consumer.on('pause', () => console.log('consumer paused'));
   

4. 检查视频流实际数据：通过Chrome DevTools的Media面板查看视频流的帧率、比特率指标，如果没有数据，说明SFU未向客户端转发视频流，需排查服务端生产者到消费者的路由逻辑。

5. 修正listenIps拼写错误：preferUpd应为preferUdp，拼写错误会导致UDP优先配置失效，可能影响传输稳定性。

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