client.join() results in ReferenceError: window is not defined

Question

I would like to develop a video call app by React and Next.js using AgoraRTC SDK.

AgoraRTC.createClient(), AgoraRTC.createStream(), client.init() are success.

However, client.join() is not a success and the following error has occurred.

ReferenceError: window is not defined

According to my sources, the following conditional branches resolve this error, but these methods did not resolve it.

if (process.browser) {}

OR

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

The script is as follows.

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>
    );
}

Try dynamically importing the `agora-rtc` libs that depend on `window` inside your `useEffect`, as showed here: [Dynamically import abcjs in Next.js](https://stackoverflow.com/a/67416572/1870780). — juliomalves, May 11 '21 at 14:45

score 1 · Answer 1 · answered May 10 '21 at 10:19

1

Sure looks like next.js is trying to do SSR.

There are some pretty good answers on this thred, have you tried all of them?

answered May 10 '21 at 10:19

Kewei Jiang

163
4

client.join() results in ReferenceError: window is not defined

1 Answers1