How can I use SendBirdCall in NextJS 13

Sendbird Voice/Video Calls JavaScript
, ,
1

[Problem/Question]

Environment: AppRouter (SSR)

Error: SendBirdCall needs 'window' in global

[SDK Version]
Latest

[Reproduction Steps]

// app/page.tsx
...
export default function page() {
  // Initialize the SendBirdCall instance to use APIs in your app.
  SendBirdCall.init(APP_ID)

  // The USER_ID below should be unique to your Sendbird application.
  const authOption = { userId: USER_ID, accessToken: ACCESS_TOKEN };

  SendBirdCall.authenticate(authOption, (result, error) => {
    if (error) {
        // Handle authentication failure.
    } else {
        // The user has been successfully authenticated and is connected to 
  the Sendbird server.
        //...
    }
  });

  // Establishing websocket connection.
  SendBirdCall.connectWebSocket()
    .then(/* Succeeded to connect */)
    .catch(/* Failed to connect */);

  return (
    <div></div>
  )
}

[Frequency]
Only init method call

[Current impact]
Error

2

Hello @ybhwang,

As sendbird-calls is client-side library you can make use of Dynamic Import, Next.js feature to import JavaScript library dynamically as below which should be working as expected.

/* CallsTestPage.js: page using sendbird-calls */
import { useEffect } from 'react'
import SendbirdCalls from 'sendbird-calls'

function CallsTestPage() {
  useEffect(() => {
    SendbirdCalls.init(APPID)
  }, [])

  return <div>CallsTestPage</div>
}

/* Home.js: page using CallsTestPage */
export default CallsTestPage

'use client'

import dynamic from 'next/dynamic'

const CallsTestPage = dynamic(() => import('./CallsTestPage'), { ssr: false })

export default function Home() {
  return <CallsTestPage />
}