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

Posted 2023-03-14

【中文标题】client.join() 导致 ReferenceError: window is not defined

【英文标题】：client.join() results in ReferenceError: window is not defined

【发布时间】：2021-05-10 09:49:58

【问题描述】：

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

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(), channelName, user_id, (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>
    );

【问题讨论】：

尝试在useEffect 中动态导入依赖于window 的agora-rtc 库，如下所示：Dynamically import abcjs in Next.js。

【参考方案1】：

当然看起来 next.js 正在尝试执行 s-s-r。

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