React应用集成Quickblox WebRTC时onCallListener监听器不生效问题

问题核心排查与解决方案 #

1. 监听器触发逻辑理解错误 #

你当前代码中先调用QB.webrtc.createNewSession是主动发起通话的逻辑，该操作不会触发onCallListener，这个监听器只有在接收远端其他用户发起的来电时才会回调。如果你是要测试接收通话，需要用另一个账号的设备向当前登录账号发起通话，才能触发该监听器。

2. 监听器注册时机错误 #

你当前的代码是在创建主动通话会话之后才注册onCallListener，远端来电如果在监听器注册完成前到达，就会丢失事件。你需要在QB初始化完成、用户登录成功之后，第一时间注册所有WebRTC相关监听器，不要和主动通话逻辑耦合。
React函数组件中建议用useEffect来注册，确保仅挂载一次：

import { useEffect, useRef } from 'react'

const CallComponent = () => {
  const callSessionRef = useRef(null)
  const mediaParams = {
    audio: true,
    video: true,
    options: {
      muted: true,
      mirror: true,
    },
    elemId: "myVideoStream"
  }

  useEffect(() => {
    // 组件挂载时注册监听器，确保在来电前完成注册
    QB.webrtc.onCallListener = function(session, extension) {
      callSessionRef.current = session
      console.log('收到来电')
      session.getUserMedia(mediaParams, function (error, stream) {
        if (error) {
          console.error('获取媒体流失败', error)
        } else {
          session.accept(extension)
          session.attachMediaStream("videoStream", stream)
        }
      })
    }

    // 组件卸载时清除监听器，避免内存泄漏
    return () => {
      QB.webrtc.onCallListener = null
      if (callSessionRef.current) {
        callSessionRef.current.stop({})
      }
    }
  }, [])

  // 主动发起通话的逻辑单独抽离
  const handleStartCall = () => {
    const calleesIds = [4104]
    const sessionType = QB.webrtc.CallType.VIDEO
    const additionalOptions = {}
    callSessionRef.current = QB.webrtc.createNewSession(calleesIds, sessionType, null, additionalOptions)
    // 主动发起通话不需要等onCallListener，直接获取媒体流、发起呼叫
    callSessionRef.current.getUserMedia(mediaParams, (error, stream) => {
      if (error) {
        console.error(error)
        return
      }
      callSessionRef.current.attachMediaStream("myVideoStream", stream)
      callSessionRef.current.call({})
    })
  }

  return <button onClick={handleStartCall}>发起通话</button>
}

3. 其他必查项 #

• 确认QB初始化时已正确配置WebRTC模块，仅聊天功能正常不代表WebRTC模块已初始化完成
• 确认当前登录的用户ID和发起通话的对方填写的被叫ID一致
• 确认运行环境为HTTPS（localhost本地开发除外），否则WebRTC权限会被浏览器拦截
• 确认已提前向用户申请麦克风、摄像头权限，权限被拒也会导致通话相关回调不触发

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