Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
60
Help us understand the problem. What is going on with this article?

More than 1 year has passed since last update.

@kolife

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

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

はじめに

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

ビデオチャット構築

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

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

1.jpg

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

2.jpg

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

3.jpg

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

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

4.jpg

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

5.jpg

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

6.jpg

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

ファイルをそれぞれ開き、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だけでプログラミング初学者でも制作しやすい内容になっています。
もしご興味あれば購読して頂ければ嬉しいです。

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

60
Help us understand the problem. What is going on with this article?
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
60
Help us understand the problem. What is going on with this article?