Nuxt 2集成Agora RTC SDK NG时插件未识别问题求助

问题核心 #

Agora RTC SDK NG 不是Vue插件，它没有实现Vue插件要求的install方法，所以你用Vue.use(AgoraRTC)会直接触发"插件未定义"或引用错误。

正确集成步骤 #

1. 修改插件文件 (~/plugins/agora.js)

不要用Vue.use()，而是将SDK挂载到Vue原型或通过Nuxt的inject方法全局注入：

方式1：挂载到Vue原型

import Vue from 'vue'
import AgoraRTC from 'agora-rtc-sdk-ng'

// 组件内可通过 this.$AgoraRTC 访问SDK
Vue.prototype.$AgoraRTC = AgoraRTC

方式2：Nuxt官方推荐的inject方式

import AgoraRTC from 'agora-rtc-sdk-ng'

export default ({ app }, inject) => {
  // 组件内可通过 this.$AgoraRTC 访问，也可在Vue实例中通过 app.$AgoraRTC 访问
  inject('AgoraRTC', AgoraRTC)
}

2. 保留Nuxt配置 (nuxt.config.js)

你的配置已经正确，确保SDK只在客户端加载（因为WebRTC依赖浏览器API，服务端渲染会报错）：

plugins: [
  {
    src: "~/plugins/agora.js",
    ssr: false,
    mode: 'client'
  }
]

组件内使用示例 #

下面是一个基础的直播流实现Demo：

<template>
  <div class="agora-container">
    <div ref="localVideo" class="video-player"></div>
    <div ref="remoteVideo" class="video-player"></div>
    <button @click="joinChannel">加入直播频道</button>
    <button @click="leaveChannel">退出频道</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      client: null,
      localTracks: null,
      channelName: 'live-demo',
      agoraAppId: '你的Agora App ID',
      token: '你的临时Token或正式Token' // 可从Agora控制台生成临时Token
    }
  },
  async mounted() {
    // 初始化Agora客户端
    this.client = this.$AgoraRTC.createClient({ mode: 'live', codec: 'h264' })

    // 监听远程用户加入事件
    this.client.on('user-joined', async (remoteUser) => {
      await this.client.subscribe(remoteUser, 'video')
      // 播放远程用户视频
      remoteUser.videoTrack.play(this.$refs.remoteVideo)
    })

    // 监听远程用户离开事件
    this.client.on('user-left', (remoteUser) => {
      remoteUser.videoTrack.stop()
    })
  },
  methods: {
    async joinChannel() {
      // 创建本地音视频轨道
      this.localTracks = await this.$AgoraRTC.createMicrophoneAndCameraTracks()
      
      // 加入频道
      await this.client.join(this.agoraAppId, this.channelName, this.token, null)
      
      // 发布本地音视频流
      await this.client.publish(this.localTracks)
      
      // 播放本地视频
      this.localTracks[1].play(this.$refs.localVideo)
    },
    async leaveChannel() {
      // 停止并关闭本地轨道
      if (this.localTracks) {
        this.localTracks.forEach(track => {
          track.stop()
          track.close()
        })
      }
      
      // 退出频道
      if (this.client) {
        await this.client.leave()
      }
      
      this.localTracks = null
    }
  },
  beforeDestroy() {
    // 页面销毁时清理资源
    this.leaveChannel()
  }
}
</script>

<style scoped>
.video-player {
  width: 320px;
  height: 240px;
  border: 1px solid #ccc;
  margin: 10px 0;
}
</style>

常见问题说明 #

• 为什么之前的解构导入import { AgoraRTC } from 'agora-rtc-sdk-ng'会报错？
  因为SDK采用默认导出，不是命名导出，解构会拿到undefined，必须直接导入默认导出import AgoraRTC from 'agora-rtc-sdk-ng'。
• 为什么必须设置ssr: false？
  Agora RTC依赖浏览器的WebRTC API，服务端渲染环境中没有这些API，会导致初始化失败。

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