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

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

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

はじめに

一昔前は、ビデオチャット構築に莫大なコストが掛かっていましたが、今は便利なSDKやAPIがたくさんあります。
今回はSkyWayさんのAPIを使うことで爆速でビデオチャットを構築してみます。

ビデオチャット構築

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

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

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

1.jpg

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

2.jpg

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

3.jpg

入力したメールアドレス宛に認証メールが届きますので、そちらをクリックして認証します。
メール認証したら、ログインをして開発者用ダッシュボードに進みます。

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

4.jpg

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

5.jpg

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

6.jpg

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

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

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

7.jpg

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ボタンをクリックしてみてください。
注意
同じルーム名を使用した場合、知らない人と接続する可能性があります。

8.jpg

もう一つブラウザを立ち上げ先程と同じルーム名を入力しJoinします。
このように2画面になれば成功です。

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

9.jpg

これでビデオチャットが使えるようになりました。
コードについて詳しく知りたい方は公式ドキュメントを参照してみてください。

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

終わりに

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

APIやライブラリを使えば簡単に色々なものが実装できるようになっています。
そしてFirebaseへのデプロイ方法や、Firebaseを使ったチャット機能も簡単に実装することが出来ます。
今回の記事はこちらのnoteの一部抜粋です。

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

Screen Shot 2020-05-22 at 1.02.12.png

HTML、CSS、JavaScriptだけでプログラミング初学者でも制作しやすい内容になっています。
もしご興味あれば購読して頂ければ嬉しいです。

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

admin-guild
「Webサービスの運営に必要なあらゆる知見」を共有できる場として作られた、運営者のためのコミュニティです。
https://admin-guild.slack.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
ユーザーは見つかりませんでした