Zoom Meeting SDK + Reactでミーティング即時開催アプリを作ってみた

はじめに

この記事は、Zoom Meeting SDKをReactアプリに組み込んで、実際にローカルで自身のZoomアカウントを使ってミーティング開催してみるところまでのメモ・備忘録です。
導入から実装までは以下の記事を参考にしています。

App.js

import React from "react";

import "./App.css";
import { BrowserRouter, Route } from "react-router-dom";
import ZoomMeeting from "./components/ZoomMeeting";

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Route
          path="/zoom/:meeting_number/:pass_word"
          component={ZoomMeeting}
        />
      </BrowserRouter>
    </div>
  );
}

export default App;

この実装ではreact-router-domのルーティング機能を使ってURLのパスパラメータから必要なZoom IDを受け取ってURLアクセスの時点で即時開催できるようにしています。

ZoomMeeting.jsx

import React from "react";

import "../App.css";
import { ZoomMtg } from "@zoomus/websdk";

ZoomMtg.setZoomJSLib("https://source.zoom.us/2.9.7/lib", "/av");
ZoomMtg.preLoadWasm();
ZoomMtg.prepareWebSDK();
ZoomMtg.i18n.load("jp-JP"); // ここでUIの言語が変更できる
ZoomMtg.i18n.reload("jp-JP"); // ここでUIの言語が変更できる

function ZoomMeeting(props) {
  const meetingNumber = props.match.params.meeting_number;
  const passWord = props.match.params.pass_word;
  console.log(meetingNumber);
  console.log(passWord);

  var signatureEndpoint = "http://localhost:4000"; // https://github.com/zoom/meetingsdk-sample-signature-node.jsのエンドポイント
  var sdkKey = "SDKキー";
  var role = 1; // host開催が1 でクライアント開催が0 1なら開始前の時刻でも強制開始可能
  var leaveUrl = "http://localhost:3000/zoom/" + meetingNumber + "/" + passWord; // ミーティングを終了・退出後にリダイレクトされるページ指定
  var userName = "ようすけ";
  var userEmail = "[e-mail]";
  // var passWord = "12345678";
  var registrantToken = "";
  function getSignature(e) {
    e.preventDefault();

    fetch(signatureEndpoint, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        meetingNumber,
        role: role,
      }),
    })
      .then((res) => res.json())
      .then((response) => {
        startMeeting(response.signature);
      })
      .catch((error) => {
        console.error(error);
      });
  }

  function startMeeting(signature) {
    document.getElementById("zmmtg-root").style.display = "block";

    ZoomMtg.init({
      leaveUrl: leaveUrl,
      success: (success) => {
        console.log(success);

        ZoomMtg.join({
          signature: signature,
          meetingNumber, // パスパラメータから取ってきたmeetingNumber
          userName: userName,
          sdkKey: sdkKey,
          userEmail: userEmail,
          passWord,
          tk: registrantToken,
          success: (success) => {
            console.log(success);
          },
          error: (error) => {
            console.log(
              error,
              "もし無効なmeetingNumberを入れるとここでキャッチされるので"
            );
            props.history.goBack(); // 一旦エラーハンドリングはブラウザバックのみにする
            // TODO: ERROR HANDRING
          },
        });
      },
      error: (error) => {
        console.log(error);
      },
    });
  }
  return (
    <main>
      <h1>ミーティングを開始する</h1>
      <button onClick={getSignature}>ミーティングに参加する</button>
    </main>
  );
}

export default ZoomMeeting;

前段の参考記事の解説にもありますが、Zoom SDKを使っての会議開催にはSignatureトークンが必要です。
そのトークンをを生成するAPIが↓になります。※リファレンスから持ってきたものです

これをlocalhost:4000で立ち上げてlocalhost:3000のReactから叩きに行って取得しています。

参考：https://marketplace.zoom.us/docs/sdk/native-sdks/web/#sample-apps

以上です