オンライン診療・商談・ビデオ会議サービスの技術選定はこれだ！WebRTCエキスパートが1ヶ月以内で構築する最新テクニックを紹介😎

$ yarn add @opentok/client
# or
$ npm install @opentok/client --save

import OT, { Session, Event, Connection, Stream } from "@opentok/client";

type SessionDisconnectedEvent = Event<"sessionDisconnected", Session> & {
  reason: string;
};

type ConnectionCreatedEvent = Event<"connectionCreated", Session> & {
  connection: Connection;
};

type ConnectionDestroyedEvent = Event<"connectionDestroyed", Session> & {
  connection: Connection;
  reason: string;
};

type StreamCreatedEvent = Event<"streamCreated", Publisher> & {
  stream: Stream;
};

type Handler = {
  handleError?: Function;
  onConnectionCreated?: Function;
  onConnectionDestroyed?: Function;
  onSessionDisconnected?: Function;
  onConnected?: Function;
  onPublisherCompleted?: Function;
  onPublisherConnected?: Function;
};

type Publisher = {
  element: HTMLElement;
  opt: Record<string, unknown>;
};

type Subscriber = {
  element: HTMLElement;
  opt: Record<string, unknown>;
};

export default class VonageService {
  private apiKey: string;
  private sessionId: string;
  private token: string;
  private handleErrorFunction: Function;
  private onConnectionCreated: Function;
  private onConnectionDestroyed: Function;
  private onSessionDisconnected: Function;
  private onConnected: Function;
  private onPublisherCompleted: Function;
  private onPublisherConnected: Function;
  private publisher: Publisher;
  private subscriber: Subscriber;
  private session: Session;

  constructor(
    apiKey: string,
    sessionId: string,
    token: string,
    publisher: Publisher,
    subscriber: Subscriber,
    handler?: Handler
  ) {
    if (OT.checkSystemRequirements() !== 1)
      throw new Error("ご使用のブラウザはWebRTC非対応です。");
    this.handleErrorFunction = handler?.handleError || this.defaultHandleError;
    this.onConnectionCreated =
      handler?.onConnectionCreated || this.defaultHandler;
    this.onConnectionDestroyed =
      handler?.onConnectionDestroyed || this.defaultHandler;
    this.onSessionDisconnected =
      handler?.onSessionDisconnected || this.defaultHandler;
    this.onConnected = handler?.onConnected || this.defaultHandler;
    this.onPublisherCompleted =
      handler?.onPublisherCompleted || this.defaultHandler;
    this.onPublisherConnected =
      handler?.onPublisherConnected || this.defaultHandler;
    this.sessionId = sessionId;
    this.publisher = publisher;
    this.subscriber = subscriber;
    this.apiKey = apiKey;
    this.token = token;
    this.session = OT.initSession(this.apiKey, this.sessionId);
  }

  public get getSession(): Session | undefined {
    return this.session;
  }

  public connect() {
    const handleError = this.handleErrorFunction;
    const onConnectionCreated = this.onConnectionCreated;
    const onConnectionDestroyed = this.onConnectionDestroyed;
    const onSessionDisconnected = this.onSessionDisconnected;
    const onConnected = this.onConnected;
    const onPublisherCompleted = this.onPublisherCompleted;
    const publish = () => {
      const publisher = OT.initPublisher(
        this.publisher.element,
        this.publisher.opt,
        (err) => {
          if (err) {
            handleError();
          } else {
            onPublisherCompleted();
          }
        }
      );
      this.session.publish(publisher, (err) => {
        if (err) {
          handleError();
        } else {
          this.onPublisherConnected();
        }
      });
    };
    const subscribe = (event: StreamCreatedEvent) => {
      function handleError(error: any) {
        if (error) {
          alert(error.message);
        }
      }
      this.session.subscribe(
        event.stream,
        this.subscriber.element,
        this.subscriber.opt,
        handleError
      );
    };
    this.session.on({
      streamCreated: function (event: StreamCreatedEvent) {
        subscribe(event);
      },
      connectionCreated: function (event: ConnectionCreatedEvent) {
        onConnectionCreated(event);
      },
      connectionDestroyed: function (event: ConnectionDestroyedEvent) {
        onConnectionDestroyed(event);
      },
      sessionDisconnected: function sessionDisconnectHandler(
        event: SessionDisconnectedEvent
      ) {
        if (event.reason == "networkDisconnected")
          throw new Error("Your network connection terminated.");
        onSessionDisconnected(event);
      },
    });
    this.session.connect(this.token, function (error) {
      if (error) {
        handleError(error);
      } else {
        publish();
        onConnected();
      }
    });
  }

  public disconnect() {
    this.session.disconnect();
  }

  private defaultHandleError(error?: any): void {
    if (error) throw new Error(error);
  }

  private defaultHandler(event: any): void {
    console.info(event);
  }
}

<template>
  <div>
    <div id="publisher-view" />
    <div id="subscriber-view" />
  </div>
</template>

import {
  defineComponent,
  onMounted,
  useContext,
  ref,
} from "@nuxtjs/composition-api";
import _ from "lodash";
import VonageService from "~/services/vonageService";

export default defineComponent({
  middleware: "authenticated",
  onMounted(() => {
    const connectionCount = ref(0); // 接続人数
    const context = useContext();
    const start = async () => {
      // TODO: セッションIDはWEBサーバーで作成し取得すること
      const sessionId = "XXXX";
      // TODO: トークンはWEBサーバーで作成し取得すること
      const token = "XXXX";

      const onConnectionCreated = () => {
        console.log("onConnectionCreated on vue file.");
        connectionCount.value++;
      };
      const onConnectionDestroyed = () => {
        console.log("onConnectionDestroyed on vue file.");
        connectionCount.value--;
      };
      const onSessionDisconnected = () => {
        console.log("onSessionDisconnected on vue file.");
        connectionCount.value--;
      };
      const onConnected = () => {
        console.log("onConnected on vue file.");
        connectionCount.value = 0;
      };
      const onPublisherCompleted = () => {
        console.log("onPublisherCompleted on vue file.");
      };
      const onPublisherConnected = () => {
        console.log("onPublisherConnected on vue file.");
      };
      const publisher = {
        element: document.getElementById("publisher-view") as HTMLElement,
        opt: {
          insertMode: "append",
          width: "calc(50vw - 15px)",
          height: "calc(100% - 40px)",
        },
      };
      const subscriber = {
        element: document.getElementById("subscriber-view") as HTMLElement,
        opt: {
          insertMode: "append",
          width: "calc(50vw - 15px)",
          height: "calc(100% - 40px)",
        },
      };
      const apiKey = context.$config.VONAGE_API_KEY; // nuxt.config.jsへ要設定(publicRuntimeConfigプロパティー)
      const vonageService = new VonageService(
        apiKey,
        sessionId,
        token,
        publisher,
        subscriber,
        {
          onPublisherCompleted,
          onPublisherConnected,
          onConnectionCreated,
          onConnectionDestroyed,
          onSessionDisconnected,
          onConnected,
        }
      );
      vonageService.connect();
    });
    return {};
  }
});