ビデオチャットを作成

はじめに

「SOBAフレームワーク・クラウド Video SDK」は、Web会議システムをはじめ、ビデオ通話システムやビデオチャットシステムなど、ビジネス利用可能なビジュアルコミュニケーションシステムを簡単に開発するためのSDKです。

このページではSOBAフレームワーク・クラウド Video SDKとはどのようなものか？どのように使うものなのか？などが分かるように解説し最終的にビデオチャットを作成します。

【作成ステップ】

STEP1 – はじめに

STEP2 – 開発者アカウントの設定

STEP3 – Webサーバーの構築

STEP4 – アプリケーションの登録

STEP5 – テキストチャットを表示する

STEP6 – ビデオチャットを作成する

開発者アカウントの設定

1「無料トライアル」ページ内の、新規ユーザー登録をクリックします。

2上から任意の「メールアドレス」と「パスワード」「パスワード（確認）」を入力し、「ユーザー登録」ボタンをクリックします。

32で入力した「メールアドレス」宛に、「アカウントの確認」のメールが送信されているのを確認します。

4受信したメール本文内の「アカウントの確認」をクリックし、アカウントを確認したら、ユーザー登録は完了です。

※利用制限の解除について

初期登録後、パーツを利用できる時間に制限があります。画面上部の「現在このアカウントではパーツを利用できる時間に制限があります。プロフィールの名前もしくは会社名を入力していただくことで制限が解除されます。」の表示内にある「プロフィールを設定する」ボタンをクリックします。

プロフィール設定欄の「名前」と「会社名（任意）」を入力し、「変更を保存」ボタンをクリックします。
「変更は正常に保存されました。」と表示されたら、利用制限の解除となります。

Webサーバーの構築

ここではWindowsのローカル環境にはじめてSOBAフレームワーク・クラウド Video SDKを利用される方むけにWebサーバーを立てる方法を解説します。

すでにWebサーバーが構築されている方はこの項目はスキップして頂いても問題ありません。

1Windows11ではコントロールパネルを開いて、「プログラム」の項目をクリックすると「Windowsの機能の有効化または無効化」の項目がありますので、そこをクリックします。

2「Windowsの機能」のダイアログが表示されますので、「インターネットインフォメーションサービス」にチェックを入れてOKをクリックします。設定後、再起動をしてください。

3再起動後にブラウザを起動させ「http://localhost」を表示させると IIS7 が起動しているのが分かります。

ページが表示されたらIISのインストールが成功しwebサーバー起動した状態になります。

但し、この状態ですとhttpsでアクセスができません。

4SSLで通信（https）を利用するために、「インターネットインフォーメンションサービス（IIS）マネジャー」を起動します。

はじめに自己証明書を作成するため、「サーバー証明書」をクリックします。

5ウィンドウの右にある「自己署名入り証明書の作成… 」を選択します。

6表示された「自己署名入り証明書の作成」ダイアログの「署名書のフレンドリ名を指定してください」欄に適当な名前を入力してOKをクリックします。
これで自己証明書の作成が完了となります。

7つぎにサイトにIIS での証明書とポート 443 の関連付けを行います。

SSLの設定を行うために、「インターネットインフォーメンションサービス（IIS）マネジャー」左のリストから「Default Web Site」（赤枠）を選択し、右のリストにあるサイトの編集から「バインド…」（橙枠）をクリックします。

8「サイトバインド」ダイアログが表示されますので、「追加」をクリックします。

9「サイトバインドの追加」ダイアログが表示されますので、「https」を選択、先程設定したSSL証明書を選択し「OK」をクリックします。
以上で、Webサーバーの構築、SSLの設定まだが完了します。

ブラウザでhttpsでアクセスすると、保護されていない通信と表示されますが、アクセスできるのが確認できると思います。

アプリケーションの登録

1はじめにホストの設定などアプリケーションを登録しないと、パーツを発行する事ができないので、アプリケーションの登録を行います。

フレームワーク・クラウドにログイン後、画面の上にあるメニューから「アプリケーション」をクリックします。

2表示された「アプリケーション」ページの右端に「アプリケーションを登録」ボタンがありますのでクリックします。
※ 初めは何も登録されていないため、「No applications」と表示されています。

3「アプリケーションを登録」の各項目を入力し、「登録する」をクリックします。

「ウェブサイト」は、「https://」から始まる内容を入力していください。アクセス元を登録して、そこのホストからしか使えないようにしています。ドメインを持っている場合はドメインを記載しても良いですし、IPアドレスでも問題ありません。

※上記の「Webサーバーの構築」から試された方は外部からのアクセスは関係なく、ローカルのLANで対応するため、PCのローカルIPアドレスを入力してください。

4アプリケーションの登録が完了しました。

登録が完了すると、「アプリケーション」ページに追加した内容が表示されます。

テキストチャットを表示させる

上記にてフレームワーク・クラウドのパーツを発行するまでの準備が完了し、ここからはパーツを使ってウェブサイトを作っていきます。

1アプリケーションの一覧に登録したアプリケーションをクリックします。※ここでは「テスト」です。

2パーツを作成するには「チャンネル」タブをクリックします。

3「チャットを作成」「スライドを作成」「画面共有を作成」のボタンがありますので「チャットを作成」をクリックします。

4「ウィジェットHTML」が出力され、このコードがチャットのウィジェットコードになります。

5取得したコードをウェブサイトに設置します。

こちらでは、あらかじめIISに簡単なウェブサイトを作ったものに、取得したコードを設置しました。
C:\inetpub\wwwroot の中を編集したり、別のディレクトリをサイトに追加することもできますが、ここではIISのことは省略します。

ソースは以下のとおりです。（全角にしてます）

＜ｈｔｍｌｘｍｌｎｓ＝”ｈｔｔｐ：／／ｗｗｗ．ｗ３．ｏｒｇ／１９９９／ｘｈｔｍｌ” ｌａｎｇ＝”ｊａ”＞
＜ｈｅａｄ＞
＜ｔｉｔｌｅ＞ビデオチャットを作成してみた＜／ｔｉｔｌｅ＞
＜／ｈｅａｄ＞
＜ｂｏｄｙ＞
＜ｐ＞＜ｉｍｇｓｒｃ＝”ｔｏｐ＿ｂｎ１．ｊｐｇ” ／＞＜／ｐ＞
＜ｈ１＞テストサイト＜／ｈ１＞
＜ｐ＞チャットを表示してみました。＜／ｐ＞
＜ｈｒ／＞
＜ｆｏｏｔｅｒ＞
ＳＯＢＡＰｒｏｊｅｃｔ．ｉｎｃ
＜／ｆｏｏｔｅｒ＞
＜／ｂｏｄｙ＞
＜／ｈｔｍｌ＞

上記タグ内の「このチャットを表示してみました」の下に、先ほど発行したフレームワーク・クラウドのチャットのウィジェットHTMLを貼り付けます。

そしてWebサーバーの構築にて作成したサーバー内の「http:localhost」を表示させてみるとチャットが表示されます。

別のパソコンからIPアドレスでアクセスをすると、同じように表示されてチャットする事ができます。

このように非常に簡単にチャットをWebサイトに搭載することが可能です。

ビデオチャットを作成する

ここではパーツを利用するwebサイトは既に登録済みで話を進めます。

プラットフォーム登録前にフレームワーククラウドのチャンネルの内容を見てもWebRTCのパーツを作成するボタンがありません。

SOBAフレームワーク・クラウド Video SDKのWebRTCのパーツを利用するためにはWebRTCの外部ベンダーのサービスに登録する必要があります。

WebRTC登録タブをクリックするとWebRTCプラットフォームのAPIキーを入力する画面が表示されます。現在はNTT Communications が運営しているSkyWayのサービスに対応していますので、SkyWayに登録してAPIキーを入力する画面まで解説します。

1SkyWayのサービスに開発者登録します。

詳細な登録方法は割愛しますが、ここで注意する点は一つのメールアドレスで登録できるドメインは5つまでと言う点です。

https://webrtc.ecl.ntt.com/

2SkyWayにログインしてAPIキーを発行します。

APIキーはひとつのキーに複数のドメインを割り当てる事も各APIキーにそれぞれドメインを割り当てる事も可能です。
※SOBAフレームワーク・クラウド Video SDKのアプリケーションに複数のアドレスやドメインを登録されている場合、SkyWayのAPIキーに複数の同じドメインを割り当てる必要があります。

SOBAフレームワーク・クラウド Video SDKのウェブサイトは必ずウェブサイトの登録が必要ですが、複数登録する事もできます。※今回は2つ登録しています。

これをSkyWayのAPIキー設定でドメインを指定する時はSOBAフレームワーク・クラウド Video SDKの登録アプリケーションのwebサイトのドメインを記載するので、今の例の場合だと上のようになります。
※SOBAフレームワーク・クラウド Video SDKのアプリケーションに複数のアドレスやドメインを登録されている場合、SkyWayのAPIキーに複数の同じドメインを割り当てる必要があります。