client.join() 导致 ReferenceError: window is not defined

如何解决client.join() 导致 ReferenceError: window is not defined

我想使用 AgoraRTC SDK 通过 React 和 Next.js 开发一个视频通话应用。

AgoraRTC.createClient()、AgoraRTC.createStream()、client.init() 成功。

然而，client.join() 没有成功，出现以下错误。

ReferenceError: window is not defined

根据我的消息来源，以下条件分支解决了这个错误，但这些方法没有解决它。

if (process.browser) {}

或

if (typeof window !== "undefined") {}

脚本如下。

import React,{ useEffect } from 'react'
import styled from 'styled-components'
import { useLocation } from 'react-router-dom'
import AgoraRTC from 'agora-rtc-sdk'
import { RtcTokenBuilder,RtcRole } from 'agora-access-token'

const Live: React.FC = () => {
    const appID = "**********";
    const channelName = '**********';
    const user_id = useLocation().search.substr(6);

    useEffect(() => {
        async () => {
            const token = await function(){
                const appCertificate = "**********";
                const role = RtcRole.PUBLISHER;
                const expirationTimeInSeconds = 36000;
                const currentTimestamp = Math.floor(Date.now() / 1000);
                const privilegeExpiredTs = currentTimestamp + expirationTimeInSeconds;
                const token = RtcTokenBuilder.buildTokenWithUid(appID,appCertificate,channelName,user_id,role,privilegeExpiredTs);
                return token
            };
            
            let client = AgoraRTC.createClient({
                mode: "rtc",codec: "vp8",});
            
            let localStream = AgoraRTC.createStream({
                audio: false,video: true,});

            client.init(appID);

            client.join(token(),(uid) => {
                localStream.init(()=>{
                    localStream.play("me");
                    client.publish(localStream,handleError);
                },handleError);
                client.on("stream-added",function(evt){
                    client.subscribe(evt.stream,handleError);
                });
                client.on("stream-subscribed",function(evt){
                    let stream = evt.stream;
                    let streamId = String(stream.getId());
                    addVideoStream(streamId);
                    stream.play(streamId);
                });
                client.on("stream-removed",function(evt){
                    let stream = evt.stream;
                    let streamId = String(stream.getId());
                    stream.close();
                    removeVideoStream(streamId);
                });
                client.on("peer-leave",function(evt){
                    let stream = evt.stream;
                    let streamId = String(stream.getId());
                    stream.close();
                    removeVideoStream(streamId);
                });
            },handleError);
        }
    });

    return (
        <Container>
            <div id="me"></div>
            <div id="container"></div>
        </Container>
    );
};

const Container = styled.div`
    ...
`

export default function Index(){
    return (
        <div>
            <Live />
        </div>
    );
}

解决方法

看起来 next.js 正在尝试做 SSR。

有一些很好的答案on this thred，你都试过了吗？