Agora SDK x Next.js

はじめに

Next.jsの人気が高まっているということで、Agora SDKでも動作するかサンプルコードを書いてみました。
Next.jsについての詳しい知見はあまり持っていませんので、お見苦しい書き方があるかもしれませんがご了承ください。

サンプルコード

サンプルコードはこちらAgoraIO-NextJSに公開しております。
機能としては、単純に自映像を表示してパブリッシュするだけのものとなっています。

構成

構成はいたってシンプルで、実装はすべてVideoComponents.jsにまとまっています。

実装内容

index.js

import dynamic from 'next/dynamic'
const DynamicComponent = dynamic(() =>
  import('../components/VideoComponent').then((mod) => mod.VideoComponent), { ssr: false }
)

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

index.jsではSSRを無効にする実装をしています。AgoraSDKがWindowオブジェクトを利用している為、 ここでSDKをimportするとwindow is not definedが発生してしまいます。よって、SDKの実装についてはcomponentにまとめています。
（AgoraSDK以外にも依存ライブラリが原因でこのエラーに遭遇する場合もよくありそうです）
公式ドキュメントの解説はこちらにあります。

components/VideoComponent.js

import AgoraRTC from "agora-rtc-sdk-ng";

let rtc = {
    localAudioTrack: null,
    localVideoTrack: null,
    client: null
};

let options = {
    appId: YOUR APP ID,
    channel: "nextjs",
    token: null,
    uid: 123456
};

async function join(){
    rtc.client = AgoraRTC.createClient({ mode: "rtc", codec: "vp8" });
    await rtc.client.join(options.appId, options.channel, options.token, options.uid);
    rtc.localAudioTrack = await AgoraRTC.createMicrophoneAudioTrack();
    rtc.localVideoTrack = await AgoraRTC.createCameraVideoTrack();
    rtc.localVideoTrack.play("local_video");
    await rtc.client.publish([rtc.localAudioTrack, rtc.localVideoTrack]);
}

export function VideoComponent() {
    return (
        <div>
            <h2>Agora Video Web SDK Quickstart Next.js</h2>
            <div>
                <div>
                    <button type="button" id="join" onClick={() => join()} >JOIN</button>
                </div>
                <div id="local_video" style={{width: '320px', height: '240px'}}></div>
            </div>
        </div>
    )
}

Joinボタンとビデオ表示領域だけ用意したシンプルなHTMLと、カメラマイク取得してパブリッシュするというシンプルな実装になっています。
以下のような実行結果になります。

無事に動作してくれました。
Windowオブジェクトの取り扱いがポイントとなりそうです。

最後に

agora.ioに関するお問い合わせはこちらから