Agora React SDK直播支持RTSP协议可行性及转码报错咨询

问题描述 #

使用Agora React SDK结合RTSP链接开展直播业务时遇到报错：

chunk-K5SOP2KC.js?v=4001314d:8961 Uncaught (in promise) AgoraRTCException: AgoraRTCError INVALID_OPERATION: [LiveStreaming] no transcoding config found, can not start transcoding streaming task

相关代码：

const agoraEngine = useRTCClient(AgoraRTC.createClient({ codec: "h264", mode: 'live' }));

 useJoin({
    appid: config.appId,
    channel: config.channelName,
    token: config.rtcToken,
    uid: config.uid,
  });

 usePublish([localCameraTrack,localMicrophoneTrack])

agoraEngine.setClientRole("host");
agoraEngine.setLiveTranscoding({width : 600 , height: 360,backgroundColor: 0x000000,  videoBitrate: 400,lowLatency: false})
agoraEngine.startLiveStreaming("rtsp://sampleurl/samplekey",true)

咨询两个问题：

1. Agora React SDK是否支持RTSP协议直播？
2. 如何解决上述转码配置错误？

解答 #

1. RTSP协议支持情况 #

Agora React/Web RTC SDK不支持直接推流到RTSP地址。Web端SDK仅支持推流到RTMP/RTMPS格式的CDN地址。如果需要输出RTSP流，需通过以下方式实现：

• 使用Agora Server SDK（如Node.js/Java版本）接收RTC流后转推到RTSP网关；
• 通过Agora云转码服务将RTC流转为RTMP流，再借助第三方工具（如FFmpeg）将RTMP流转为RTSP流。

2. 转码配置错误的解决方法 #

报错的核心原因是：

• 代码执行时机错误：useJoin和usePublish是异步Hook，同步调用后续推流方法时，频道可能还未加入、轨道未发布完成；
• 转码配置不完整：缺少必要参数（如帧率、用户布局配置），导致SDK无法识别有效转码规则。

修正后的代码示例

import { useEffect } from 'react';
import { useRTCClient, useJoin, usePublish } from 'agora-rtc-react';
import AgoraRTC from 'agora-rtc-sdk-ng';

const YourLiveComponent = () => {
  const agoraEngine = useRTCClient(AgoraRTC.createClient({ codec: "h264", mode: 'live' }));

  const { isJoined } = useJoin({
    appid: config.appId,
    channel: config.channelName,
    token: config.rtcToken,
    uid: config.uid,
  });

  const { isPublished } = usePublish([localCameraTrack, localMicrophoneTrack]);

  useEffect(() => {
    if (isJoined && isPublished) {
      const startStreaming = async () => {
        try {
          await agoraEngine.setClientRole("host");
          // 完善转码配置，添加必填参数
          await agoraEngine.setLiveTranscoding({
            width: 600,
            height: 360,
            backgroundColor: 0x000000,
            videoBitrate: 400,
            videoFrameRate: 15, // 必填：视频帧率
            lowLatency: false,
            // 必填：指定转码画面中的用户布局（单主播需包含自身UID）
            transcodingUsers: [{
              uid: config.uid,
              x: 0,
              y: 0,
              width: 600,
              height: 360
            }]
          });
          // 替换为合法的RTMP/RTMPS推流地址
          await agoraEngine.startLiveStreaming("rtmp://your-valid-cdn-url", true);
          console.log("推流启动成功");
        } catch (err) {
          console.error("推流失败:", err);
        }
      };

      startStreaming();
    }
  }, [isJoined, isPublished, agoraEngine, config]);

  return <div>Your Live Component</div>;
};

关键修复点

• 用useEffect监听isJoined和isPublished状态，确保异步操作完成后再执行推流；
• 补充转码配置的必填参数：videoFrameRate（帧率）和transcodingUsers（用户画面布局）；
• 替换推流地址为RTMP/RTMPS格式，RTSP地址无法被Web SDK识别。

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