大疆上云api直播问题

阳雨阳雨

于 2025-07-09 16:59:24 发布

阅读量434

点赞数 10

CC 4.0 BY-SA版权

文章标签：无人机

本文链接：https://blog.csdn.net/weixin_45003375/article/details/149227808

上云api直播我用的是gb28181

首先要搭建一套流媒体平台，这个流媒体平台选择的是ZLMediaKit（有点坑，和大疆的jswebrtc不是一套）当然也可以选择srs（这个js和大疆是一套但是我没试过）

搭建完成后先配置前后端的gb28181配置文件

配置完成之后尝试推流，发现在流媒体平台可以播放，但是上云api中不能播放，调用play/报错

对比发现ZLMediaKit平台给的拉流地址拼接的并不是真正的拉流地址

于是先从流媒体平台拷贝一个rtc的拉流地址先写死（测试）

返回的地址正确但是前端依旧报错地址依旧不是我想要的地址

跟踪发现这套js帮我们做了处理，再次把地址固定不经处理，还是播放不了，网上了解要不就是换流媒体播放器要不就只能修改播放器组件，没办法只能把流媒体播放器的js拷贝过来（ZLMRTCClient.js）

然后自定义一个ZLMediaKit WebRTC播放器

// ZLMediaKit WebRTC播放器
const playWithZLMediaKit = (videoElement: HTMLVideoElement, url: string) => {
  console.log('使用ZLMediaKit播放:', url)

  // 停止之前的播放器
  if (zlmPlayer) {
    zlmPlayer.close()
    zlmPlayer = null
  }

  // 检查ZLMediaKit是否已加载
  if (typeof window.ZLMRTCClient === 'undefined') {
    console.error('ZLMediaKit库未加载')
    message.error('ZLMediaKit库未加载')
    return
  }

  // 创建ZLMediaKit播放器
  const { Endpoint, Events } = window.ZLMRTCClient

  zlmPlayer = new Endpoint({
    element: videoElement,
    zlmsdpUrl: url,
    debug: true,
    recvOnly: true,
    audioEnable: true,
    videoEnable: true
  })

  // 监听事件
  zlmPlayer.on(Events.WEBRTC_ON_REMOTE_STREAMS, (stream: MediaStream) => {
    console.log('收到远程流:', stream)
    videoElement.srcObject = stream
    videoElement.play().catch(console.error)
    message.success('播放成功')
  })

  zlmPlayer.on(Events.WEBRTC_OFFER_ANWSER_EXCHANGE_FAILED, (error: any) => {
    console.error('WebRTC信令交换失败:', error)
    message.error(`播放失败: ${error.msg || error.message || 'WebRTC信令交换失败'}`)
  })

  zlmPlayer.on(Events.WEBRTC_ON_CONNECTION_STATE_CHANGE, (state: string) => {
    console.log('连接状态变化:', state)
    if (state === 'failed' || state === 'disconnected') {
      message.error('连接失败或断开')
    }
  })

  zlmPlayer.on(Events.WEBRTC_ICE_CANDIDATE_ERROR, (error: any) => {
    console.error('ICE候选错误:', error)
  })
}

运行保存就能够正常推流拉流在页面中播放