Help us understand the problem. What is going on with this article?

OSSを使って独自のWeb会議アプリ(SkyWay Conf)を立てる方法

今日はWebRTCプラットフォームSkyWay(以下、SkyWay)の中の人として記事を書きます。

SkyWayのデモアプリとして公開していた、 SkyWay Conference (以下、SkyWay Conf)というWeb会議アプリのソースコードを、オープンソースソフトウェア(以下、OSS)として公開しました。

新型コロナウイルス感染症の影響で、様々なコミュニケーションがオンラインで行われるようになりました。誰もが、オンラインで、取りたい時に自由にコミュニケーションが取れるように、SkyWayとして出来ることを考えた結果、今回のOSS公開に至りました。詳しくは、 SkyWay公式のお知らせをご覧下さい。

この記事では

  • SkyWay Community Editionと組み合わせたSkyWay Confの動かし方
  • 利用する上での注意点
  • FAQ

について解説します。

SkyWay Confの動かし方

SkyWay Confをローカル環境で動かす手順を解説します。

1. SkyWay Community Editionへの登録

SkyWayにまだアカウントを持っていない方は、以下のサイトから登録を行って下さい。
https://console-webrtc-free.ecl.ntt.com/users/registration

skyway_regist.png

メールアドレス、パスワードを入力して登録すると、入力したメールアドレスにアクティベーションメールが届きます。そのメールのリンクをクリックすることで登録が完了します。

2. アプリケーション(APIキー)の作成

ログインしたら「新しくアプリケーションを追加する」をクリックしてアプリケーション(APIキー)を作成して下さい。
skyway_dash_add_apikey.png

入力項目 設定 説明
アプリケーション説明文 SkyWay Confのテスト用 アプリケーションにつける説明文で、ダッシュボードでの表示のみに利用されます。128文字以内で指定してください。
利用可能ドメイン名 localhost 作成するアプリケーションで利用するドメイン名を入力します。ここでは localhost と入力します。この場合、 http://localhost にWebアプリをホスティングして利用することが出来ます。
TURNを利用する 有効 TURNサーバは、ファイアウォールを経由する等の理由によりP2P通信ができない場合でも、メディアやデータをリレーすることにより通信を可能とします。 有効にした場合、SDK並びにブラウザが利用するかどうかを自動判別します。
SFUを利用する 有効 SFUとは、P2PではなくSFUというメディアサーバを経由して映像や音声の送受信を行う技術です。 SkyWay Confでsfuルームを利用する場合は有効にします。
listAllPeers APIを利用する 無効 listALLPeers APIを使用する場合は有効にします。 SkyWay Confでは利用しないため無効にします。
APIキー認証を利用する 無効 APIキーの不正利用を防止するための認証機能を利用する場合は有効にします。SkyWay Confは対応していないため無効にしますが、SkyWay Confをベースに商用サービスを開発される場合などは機能追加することをオススメします。

3. APIキーを控える

アプリケーション作成後、表示されているAPIキーを控えて下さい。
skyway_dash_top_apikey.png

注: SkyWay Community Editionでは、TURNとSFUに月500GBまでの利用制限があります。現在までの利用量はダッシュボードで確認できます。

4. SkyWay Confのソースコードをダウンロード

GitHubのリポジトリからソースコードをダウンロードして下さい。

$ git clone https://github.com/skyway/skyway-conf.git

4. APIキーの追記

以下の通り、ソースコードにAPIキーを追記して下さい。
src/conf/utils/skyway.ts

import Peer, { SfuRoom } from "skyway-js";

export const initPeer = (forceTurn: boolean): Promise<Peer> => {
  return new Promise((resolve, reject) => {
    const peer = new Peer({
      key: "688602ed-6f20-443c-b869-2a55997f5790", //ここにAPIキーを追記
      debug: 2,
      config: {
        iceTransportPolicy: forceTurn ? "relay" : "all",
      },
    });

5. 実行

以下のコマンドを実行して、必要なパッケージをインストールして下さい。

$ npm install

パッケージのインストールが完了したら以下のコマンドでビルドと開発用Webサーバを起動します。

$ npm run dev

以下のURLにアクセスして動作確認して下さい。
http://localhost:9000/webpack-dev-server/

注: SkyWay Confで利用している navigator.mediaDevices.getUserMedia は、localhost以外のサイトでは、TLS/SSLにより保護されたサイトでしか利用できません。そのため、コンソールに出てくる http://0.0.0.0:9000/webpack-dev-server/ では動作確認できませんので、ご注意下さい。

Webサーバへのデプロイ

以下のコマンドを実行して、プロダクション環境用にビルドを行って下さい。

$ npm run build

docs フォルダに生成された以下のファイルを、ご自身で管理されているサーバにアップロードしてお使い下さい。

image/
conf.bundle.js
conf.html
index.bundle.js
index.html
vendor.bundle.js

注: SkyWayのダッシュボードの「利用可能ドメイン」にご自身のサーバのドメイン名を登録して下さい。
注: TLS/SSLにより保護されたサイトでお使い下さい。
注: 公開サーバにアップロードすると誰でも利用可能な状態になりますので、アクセス制限や認証を行って下さい。

SkyWay Confの動作要件

動作確認済みブラウザ

  • Google Chrome 最新の安定版 (v81以上)
  • Firefox 最新の安定版 (v75以上)
  • Safari 最新の安定版(v13以上)
  • Microsoft Edge 最新の安定版( Chromium版 v79以上 )

Android Chrome、Mobile Safari(iOS,iPadOS)でも利用可能ですが、画面UIはモバイルデバイスに最適化されていないため使いにくい場合があります。Android Firefoxについてはデバイスの選択がうまく動作しない不具合があるためご利用はお控えください。

利用に必要なもの

  • USBカメラ
  • スピーカー・マイク

注: マイク入力が利用できないPCでは利用できません(エラーが出て会議室に入室できません) 。PC側でマイクを無効にしている場合も同様ですので、ご注意下さい。

使い方

SkyWayの公式サイト「SkyWay Conferenceの使い方」をご覧下さい。

FAQ

Q. 何人まで参加できますか?

mesh の場合は、4名程度とお考えください。
sfu の場合は、PCの利用で一部屋15名程度が目安です。映像をミュートするとPCの負荷が下がるためより多くの人数で会議ができます。

Q.通信内容はエンドツーエンドで暗号化(E2EE)されますか?

mesh の場合は参加者同士でエンドツーエンドで暗号化されます。
sfu の場合はSFUサーバで復号化するためE2EEでは有りません。SFUサーバ内で復号化されたデータは再びサーバ内で暗号化され相手に送信されるため、インターネット上を復号化されたデータが流れるわけでは有りません。また、SkyWayのSFUサーバでは通信内容の記録は一切行っておりません。

e2ee.png

Q. 第三者が勝手に会議に参加することを防ぐことが出来ますか?

SkyWay Confとしては、RoomIDがわかれば参加することが出来てしまいます。対策としては、RoomIDを複雑なものにするか、SkyWay ConfのホスティングサーバにBasic認証やIPアドレス制限をかける等、外部からアクセスされないような対策をとって下さい。

Q. SkyWay Confのビルド方法やWebサーバへの設置に関してサポートを受けることは出来ますか?

OSSですので公式のサポートは提供していません。

Q. GithubのIssueやPullRequestには対応してくれますか?

対応しません。不具合修正や機能追加を行いたい場合は、ご自身でリポジトリをForkして行って下さい。

yusuke84
WebRTCに関わり7年目。NTTコミュニケーションズでWebRTCプラットフォームSkyWayのソリューションアーキテクト兼DevRel担当をやっています。
https://twitter.com/Tukimikage
nttcommunications
NTTコミュニケーションズは、お客さまのデジタルトランスフォーメーション実現に貢献する「DX Enabler™」として、ICTの活用によるお客さまの経営課題の解決やスマートな社会の実現に取り組みます。
https://www.ntt.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした