イベント、ウェビナーなどで大人数の参加する Room を作成する (大人数イベント配信機能)

/*
 * Copyright 2022 RICOH Company, Ltd. All rights reserved.
 */

import * as LSSDK from './ricoh-ls-sdk.js';
import { Credentials } from './credential.js';

const $ = document.querySelector.bind(document);

class Base {
  lsTracks = [];
  client = null;

  constructor() {
    // 中略
  }

  accessToken(CLIENT_SECRET, room_spec) {
    /*
    注意: 本関数はサンプル専用ですので実運用では使用できません。
    実運用に際しては、AccessTokenはバックエンドサーバ内で生成し、
    CLIENT_SECRETを隠蔽してください。
    */
    const header = {
      alg: 'HS256',
      cty: 'JWT',
    };
    const now = Math.floor(Date.now() / 1000); // sec(epoch)
    const payload = {
      nbf: KJUR.jws.IntDate.get((now - 60 * 30).toString()),
      exp: KJUR.jws.IntDate.get((now + 60 * 30).toString()),
      connection_id: btoa(Math.random()).replace(/=/g, ''),
      room_id: 'room1',
      room_spec: room_spec,
    };
    const accessToken = KJUR.jws.JWS.sign(null, header, payload, CLIENT_SECRET);
    return accessToken;
  }

  // 引数sendingとreceivingに、enabledキーで送受信機能の有無を指定します
  // sending.enabledをtrueにすると送信可能になります
  // receiving.enabledをtrueにすると受信可能になります
  // この例ではsendingがtrueでreceivingがfalseのため、送信専用Clientになります
  async start(
    lsTracks,
    meta = '',
    sending = { enabled: true },
    receiving = { enabled: false },
  ) {
    this.lsTracks = lsTracks;

    const access_token = this.accessToken(Credentials.CLIENT_SECRET, {
      type: 'sfu_large', // RoomSpec.typeにsfu_largeを指定します
      max_connections: 100, // 上限である300以下であれば任意の値を指定可能です
    });
    try {
      const option = { localLSTracks: this.lsTracks };
      if (meta !== '') option.meta = meta;
      if (Object.keys(sending).length !== 0) option.sending = sending;
      if (Object.keys(receiving).length !== 0) option.receiving = receiving;
      if (Credentials.SIGNALING_URL)
        option.signalingURL = Credentials.SIGNALING_URL;
      this.client.connect(Credentials.CLIENT_ID, access_token, option);
    } catch (e) {
      console.error(e);
      $('#error').innerText = `Error: ${e.detail.error}`;
    }
    $('#start').disabled = true;
    $('#stop').disabled = false;
  }

  stop() {
    // 中略
  }

  dllog() {
    // 中略
  }
}

export { Base };

...
<script src="../src/ls-conf-sdk.js"></script>
...
<script>
let frame = null;
async function createAndJoin() {
  try {
    frame = window.LSConferenceIframe.create(
      document.getElementById('frame-container'),
      {
        defaultLayout: 'presentation',
        toolbar: {
          isHidden: false
        },
        subView: {
          menu: {
            isHidden: false,
            isHiddenRecordingButton: true,
            isHiddenSharePoVButton: true
          }
        }
      }
    );
  } catch(error) {
    console.error('create failed: ', error.detail.type);
    return;
  }

  frame.addEventListener('error', (event) => {
    console.error(`Error occurred, ${event.message}`);
  });

  let accessToken = null;
  try {
    accessToken = await createAccessToken();
  } catch(error) {
    console.error('createAccessToken failed: ', error.detail.type);
    return;
  }

  try {
    await frame.join({
      clientId: 'hoge',
      acccessToken: accessToken,
      connectionId: 'connectionId',
      connectOptions: {
        username: 'huga'
        enableVideo: false,
        enableAudio: false,
        mode: 'viewer'
      }
    });
    console.log('Join success');
  } catch(error) {
    console.error('Join failed: ', error.detail.type);
  }
}

async function leave() {
  if (frame == null) {
    console.error('leave failed: iframe is not created.');
    return
  }

  try {
    await frame.leave();
    console.log('Leave success');
  } catch(error) {
    console.error('Leave failed: ', error.detail.type);
  }
}
</script>
...
<div>
  <button id="join-meeting" onclick="createAndJoin()">
    join meeting
  </button>
  <button id="leave-meeting" onclick="leave()">
    leave meeting
  </button>
  <div id="frame-container">
  </div>
</div>
...

import { addMinutes, getUnixTime } from 'date-fns';
import express, { NextFunction, Request, Response, Router } from 'express';
import { body } from 'express-validator';
import jwt from 'jsonwebtoken';

import { LS_CLIENT_SECRET } from '../app';

const router: Router = express.Router();
router.use(express.json());

const generateToken = async (secret: string, req: Request): Promise<string> => {
  const { room_id, connection_id, bitrate_reservation_mbps } = req.body;
  const payload = {
    nbf: getUnixTime(new Date()),
    exp: getUnixTime(addMinutes(new Date(), 3)),
    connection_id: connection_id,
    room_id: room_id,
    room_spec: {
      type: 'sfu_large', // RoomSpec.typeにsfu_largeを指定します
      max_connections: 300, // 上限である300以下であれば任意の値を指定可能です
      media_control: {
        bitrate_reservation_mbps: Number(bitrate_reservation_mbps),
      },
    },
  };
  return jwt.sign(payload, secret, { algorithm: 'HS256' });
};

const accessTokenValidator = [
  body('connection_id', 'invalid connection_id').notEmpty(),
  body('room_id', 'invalid room_id').notEmpty(),
];

router.post(
  '/access_token',
  accessTokenValidator,
  async (req: Request, res: Response, _next: NextFunction) => {
    const access_token = await generateToken(LS_CLIENT_SECRET, req);
    res.json(access_token);
  },
);

export default router;