【爆速！】5分でビデオチャットを構築する

【爆速！】5分でビデオチャットを構築する:

この記事は SkyWay Advent Calendar 2018 の8日目の記事です。

はじめに

一昔前は、ビデオチャット構築に莫大なコストが掛かっていましたが、今は便利なSDKやAPIがたくさんあります。

今回はSkyWayさんのAPIを使うことで爆速でビデオチャットを構築してみます。

ビデオチャット構築

まずはSkyWayにアクセスしてください。

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

新規登録からCommunity Editionの無料で新規登録を選択します。

Community Editionは無料で利用出来ます。(2018/12/8時点)

名前、メールアドレス、パスワードを入力して登録します。

入力したメールアドレス宛に認証メールが届きますので、そちらをクリックして認証します。

メール認証したら、ログインをして開発者用ダッシュボードに進みます。

新しくアプリケーションを追加するを選択してください。

アプリケーション説明文にvideochat、利用可能ドメイン名にlocalhostを入力します。

アプリケーションを作成するとAPIキーが取得出来ます。

次にSkyWay公式のGitHubからサンプルコードを入手します。

https://github.com/skyway/skyway-js-sdk/tree/master/examples/fullmesh-videochat

ファイルをそれぞれ開き、index.html、script.js、style.cssをコピーします。

gitが使える方はこちらから、クローンしてexample/fullmesh-videochatを使用してOKです。

script.js内5行目のkeyを先ほど取得したAPIキーに置き換えます。
注意

開発時のため、直接APIキーを入力していますが、公開する時は適切な場所に入力し保護する必要があります。

script.js

/* eslint-disable require-jsdoc */ 
$(function() { 
  // Peer object 
  const peer = new Peer({ 
    key:   "Your API Key", 
    debug: 3, 
  }); 

動作確認

サンプルコードを保存しているディレクトリでローカルサーバーを立ち上げます。

$ ruby -run -e httpd . -p 8080 

ブラウザ上でlocalhost:8080にアクセスします。

「マイク」と「カメラ」の使用許可を求めるポップアップが表示されると思うので、「許可」ボタンをクリックしましょう。

ルーム名を入力し、Joinボタンをクリックしてみてください。
注意

同じルーム名を使用した場合、知らない人と接続する可能性があります。

もう一つブラウザを立ち上げ先程と同じルーム名を入力しJoinします。

このように２画面になれば成功です。

もし上手くいかない場合は、ローカルサーバーが２つ立ち上がっていないか、アラートの警告が出ていないか、Consoleにエラーが出力されていないか確認してみてください。

これでビデオチャットが使えるようになりました。

コードについて詳しく知りたい方は公式ドキュメントを参照してみてください。

あとはサーバーにデプロイすれば使用出来るようになります！

終わりに

簡単にビデオチャットが構築出来ました。

APIやライブラリを使えば簡単に色々なものが実装できるようになっています。

そしてFirebaseへのデプロイ方法や、Firebaseを使ったチャット機能も簡単に実装することが出来ます。

今回の記事はこちらの本の一部抜粋です。

WebAPIアプリケーション「超」入門　FirebaseとAPIによるWeb会議システム制作 Kindle版

HTML、CSS、JavaScriptだけでプログラミング初学者でも制作しやすい内容になっています。

もしご興味あれば購読して頂ければ嬉しいです。

最後まで読んで頂きありがとうございました。