Vue.js 将Agora.io与nuxt.js集成时出错创建的钩子中出现错误：“0”；ReferenceError:未定义AGORATC"；

我正在将Agora Web SDK与nuxt.js集成

我已经包含了我需要的所有方法，并且我的页面具有以下方法和生命周期挂钩：

methods: {
        streamInit(uid, attendeeMode, videoProfile, config) {
            let defaultConfig = {
                streamID: uid,
                audio: true,
                video: true,
                screen: false
            };

            switch (attendeeMode) {
                case "audio-only":
                    defaultConfig.video = false;
                    break;
                case "audience":
                    defaultConfig.video = false;
                    defaultConfig.audio = false;
                    break;
                default:
                case "video":
                    break;
            }
            let stream = AgoraRTC.createStream(merge(defaultConfig, config));
            stream.setVideoProfile(videoProfile);
            return stream;
        },

        subscribeStreamEvents() {
            let rt = this;
            rt.client.on("stream-added", function(evt) {
                let stream = evt.stream;
                console.log("New stream added: " + stream.getId());
                console.log("At " + new Date().toLocaleTimeString());
                console.log("Subscribe ", stream);
                rt.client.subscribe(stream, function(err) {
                    console.log("Subscribe stream failed", err);
                });
            });

            rt.client.on("peer-leave", function(evt) {
                console.log("Peer has left: " + evt.uid);
                console.log(new Date().toLocaleTimeString());
                console.log(evt);
                rt.removeStream(evt.uid);
            });

            rt.client.on("stream-subscribed", function(evt) {
                let stream = evt.stream;
                console.log("Got stream-subscribed event");
                console.log(new Date().toLocaleTimeString());
                console.log("Subscribe remote stream successfully: " + stream.getId());
                console.log(evt);
                rt.addStream(stream);
            });

            rt.client.on("stream-removed", function(evt) {
                let stream = evt.stream;
                console.log("Stream removed: " + stream.getId());
                console.log(new Date().toLocaleTimeString());
                console.log(evt);
                rt.removeStream(stream.getId());
            });
        },

        removeStream(uid) {
            this.streamList.map((item, index) => {
                if (item.getId() === uid) {
                    item.close();
                    let element = document.querySelector("#ag-item-" + uid);
                    if (element) {
                        element.parentNode.removeChild(element);
                    }
                    let tempList = [...this.streamList];
                    tempList.splice(index, 1);
                    this.streamList = tempList;
                }
            });
        },

        addStream(stream, push = false) {
            let repeatition = this.streamList.some(item => {
                return item.getId() === stream.getId();
            });
            if (repeatition) {
                return;
            }
            if (push) {
                this.streamList = this.streamList.concat([stream]);
            } else {
                this.streamList = [stream].concat(this.streamList);
            }
        },

        handleCamera(e) {
            e.currentTarget.classList.toggle("off");
            this.localStream.isVideoOn()
                ? this.localStream.disableVideo()
                : this.localStream.enableVideo();
        },

        handleMic(e) {
            e.currentTarget.classList.toggle("off");
            this.localStream.isAudioOn()
                ? this.localStream.disableAudio()
                : this.localStream.enableAudio();
        },

        switchDisplay(e) {
            if (
                e.currentTarget.classList.contains("disabled") ||
                this.streamList.length <= 1
            ) {
                return;
            }
            if (this.displayMode === "pip") {
                this.displayMode = "tile";
            } else if (this.displayMode === "tile") {
                this.displayMode = "pip";
            } else if (this.displayMode === "share") {
                // do nothing or alert, tbd
            } else {
                console.error("Display Mode can only be tile/pip/share");
            }
        },

        hideRemote(e) {
            if (
                e.currentTarget.classList.contains("disabled") ||
                this.streamList.length <= 1
            ) {
                return;
            }
            let list;
            let id = this.streamList[this.streamList.length - 1].getId();
            list = Array.from(
                document.querySelectorAll(`.ag-item:not(#ag-item-${id})`)
            );
            list.map(item => {
                if (item.style.display !== "none") {
                    item.style.display = "none";
                } else {
                    item.style.display = "block";
                }
            });
        },

        handleExit(e) {
            if (e.currentTarget.classList.contains("disabled")) {
                return;
            }
            try {
                this.client && this.client.unpublish(this.localStream);
                this.localStream && this.localStream.close();
                this.client &&
                this.client.leave(
                    () => {
                        console.log("Client succeed to leave.");
                    },
                    () => {
                        console.log("Client failed to leave.");
                    }
                );
            } finally {
                this.readyState = false;
                this.client = null;
                this.localStream = null;
                // redirect to index
                this.$router.push("/");
            }
        }
    },

    created() {
        let $ = this;
        // init AgoraRTC local client
        $.client = AgoraRTC.createClient({ mode: $.transcode });

        $.client.init($.appId, () => {
            console.log("AgoraRTC client initialized");
            $.subscribeStreamEvents();
            $.client.join($.appId, $.channel, $.uid, uid => {
                console.log("User " + uid + " join channel successfully");
                console.log("At " + new Date().toLocaleTimeString());
                // create local stream
                // It is not recommended to setState in function addStream
                $.localStream = this.streamInit(uid, $.attendeeMode, $.videoProfile);
                $.localStream.init(
                    () => {
                        if ($.attendeeMode !== "audience") {
                            $.addStream($.localStream, true);
                            $.client.publish($.localStream, err => {
                                console.log("Publish local stream error: " + err);
                            });
                        }
                        $.readyState = true;
                    },
                    err => {
                        console.log("getUserMedia failed", err);
                        $.readyState = true;
                    }
                );
            });
        });
    },

    mounted() {
        this.$nextTick(() => {
            // add listener to control btn group
            let canvas = document.querySelector("#ag-canvas");
            let btnGroup = document.querySelector(".ag-btn-group");
            canvas.addEventListener("mousemove", () => {
                if (global._toolbarToggle) {
                    clearTimeout(global._toolbarToggle);
                }
                btnGroup.classList.add("active");
                global._toolbarToggle = setTimeout(function() {
                    btnGroup.classList.remove("active");
                }, 2000);
            });
        });
    },

    beforeUpdate() {
        let $ = this;
        // rerendering
        let canvas = document.querySelector("#ag-canvas");
        // pip mode (can only use when less than 4 people in channel)
        if ($.displayMode === "pip") {
            let no = $.streamList.length;
            if (no > 4) {
                $.displayMode = "tile";
                return;
            }
            $.streamList.map((item, index) => {
                let id = item.getId();
                let dom = document.querySelector("#ag-item-" + id);
                if (!dom) {
                    dom = document.createElement("section");
                    dom.setAttribute("id", "ag-item-" + id);
                    dom.setAttribute("class", "ag-item");
                    canvas.appendChild(dom);
                    item.play("ag-item-" + id);
                }
                if (index === no - 1) {
                    dom.setAttribute("style", `grid-area: span 12/span 24/13/25`);
                } else {
                    dom.setAttribute(
                        "style",
                        `grid-area: span 3/span 4/${4 + 3 * index}/25;
      z-index:1;width:calc(100% - 20px);height:calc(100% - 20px)`
                    );
                }
                item.player.resize && item.player.resize();
            });
        } else if ($.displayMode === "tile") {
            // tile mode
            let no = $.streamList.length;
            $.streamList.map((item, index) => {
                let id = item.getId();
                let dom = document.querySelector("#ag-item-" + id);
                if (!dom) {
                    dom = document.createElement("section");
                    dom.setAttribute("id", "ag-item-" + id);
                    dom.setAttribute("class", "ag-item");
                    canvas.appendChild(dom);
                    item.play("ag-item-" + id);
                }
                dom.setAttribute("style", `grid-area: ${tile_canvas[no][index]}`);
                item.player.resize && item.player.resize();
            });
        } else if ($.displayMode === "share") {
            // screen share mode (tbd)
        }
    },

    beforeDestroy () {
        this.client && this.client.unpublish(this.localStream);
        this.localStream && this.localStream.close();
        this.client &&
        this.client.leave(
            () => {
                console.log("Client succeed to leave.");
            },
            () => {
                console.log("Client failed to leave.");
            }
        );
    }

My nuxt.config.js的插件声明为：

{
    src: "~/plugins/agora.js",
    ssr: false
}

---

加载页面时的应用程序未定义AGORATC。如何将此AgoraRTC添加到我的nuxt.js应用程序中？

Agora仅在客户端工作，完全独立于服务器，因此您需要在nuxt.config.js中将模式定义为client，如下所示：

{ src: '~/plugins/agora.js', mode: 'client' },

---

在您的

mounted

和

created

中，将您的代码包装在

if（process.client）{…}

中，以确保您位于客户端谢谢，这很有效

{ src: '~/plugins/agora.js', mode: 'client' },