LoginSignup
6
7

More than 3 years have passed since last update.

【Web RTC】Skyway APIを使ってビデオチャット・多人数配信アプリを簡単につくる

Posted at

今回はSkyWayのAPIを使用して初心者でも簡単にビデオチャットのアプリや多人数に配信するようなアプリを簡単につくっていきます。

すでに存在するアプリとしてはapper.inがあるでしょう。

おなじURLに飛ぶだけで遠方とのビデオチャットができるようになる優れものです。が!最近有料化されてしまいまして、不便になってしまいました。。。

ので、代わりに自前で作ってみます。。

目次

  • SkyWay APIとは
  • API Keyの発行
  • skywayのサンプルコードを落としてくる
  • ローカルサーバでテスト / サーバーにデプロイ

SkyWay APIとは


NTTが開発しているWeb RTCという技術を使用したAPIです。
P2P通信というものを使ってWebページから簡単にビデオを使った通信が可能になります。P2Pとはサーバーを介さずに、パソコン1とパソコン2が簡単に通信できるようなものっていうイメージです。

P2P通信って昔結構ニュースになっていました。Winnyっていうソフトが2000年台初期にでてきて、それがこのP2P通信を使っていました。簡単にファイルの交換ができるがゆえに著作権とかを無視してゲームや漫画が落とせるわけですね。
またウイルスも簡単におくれます。便利っちゃむちゃくちゃ便利なんですが、当時は相当問題になりました。
なのでこの技術はどう使うか、なにを共有できるのかに関して注意しなければならないものですね。

ここでP2Pをもちいて生まれたのがWebRTC(Web Real-Time-Communication)という技術で、ここではリアルタイムのコミュニケーションが対象です。
危険なファイルの共有などはできないようになっているので、安全な使い方ができるようになりましたね。
より詳細に知りたい場合は
https://qiita.com/daitasu/items/ae21b16361eb9f65ed43
などを参照してみてください。

API Keyの発行

Skyway APIのホームページに行って新規登録を行ってください。ここで開発者として登録を行います。

Screen-Shot-2019-01-21-at-0.12.59.png

Community Editionを選びましょう。よっぽど大きいサービスとしない限りはこちらの無料版がいいでしょう。

登録したら早速Applicationsのところから create a new Applicationを押して新しいアプリを作る宣言をしましょう。

Screen-Shot-2019-01-21-at-0.14.06.png

これでAPI Keyが発行されました。こちらはソースコードに書いておく必要があります。ので、コピーしておいてください。

15479975767084.png

あとavailable domain(利用可能ドメイン)のところで
localhost
を登録しておくのを忘れないようにしましょう。

skywayのサンプルコードを落としてくる

こちらのgit hubのページにskywayが公開しているサンプルコードがあります。
これらをcloneして自分のPCに落としてきてください。

fullmesh-videochat

ちなみにこれだと多人数向けのビデオチャットになりまして、p2p-broadcastだと配信システムになります。

fullmeshだと多人数で、が想定。SFUというのはP2P通信でありながらも、間にサーバーが入り、自分のパソコンや通信相手のパソコンにかかる負荷を減らしてくれます。
実際fullmeshで3つくらいタブを開いてビデオチャットを開始するとPCがむちゃくちゃ熱くなります(CPUが暴走するので)

Screen-Shot-2019-01-17-at-22.38.47.png

ちなみに普通のp2pだと個人間でのデータ通信となるので、LINEの通話みたいな感じですね。

おまけ:受信モード

受信モードにするとこちらの画面をオフにして、完全に映らないようにすることができます。
script.jsで

script.js
room = peer.joinRoom('mesh_video_' + roomName, {
        mode: 'mesh'
});

とすることで、そのモードにすることができます。

これを工夫すると多人数配信アプリにすることができますね。。。!

おまけ:SFUモード

SFUモードにすると、仲介のサーバが入ってきてCPUの負荷の軽減などをしてくれるようになります。


room = peer.joinRoom('mesh_video_' + roomName, {
        mode: 'sfu'
});

で設定可能

ローカルサーバでテスト / サーバーにデプロイ

MacだったらPythonやRubyのコマンドを使用して、簡単にローカルサーバを立ち上げることができます。

Python3系

python -m http.server 8080

Ruby

ruby -run -e httpd . -p 8080

これで、ローカルのアドレスにアクセスすると、うまくできるようになるかと思います!

この状態だとだれとも通信ができないのでサーバーにデプロイしてみましょう。
HerokuやFirebaseでいいかなと

以上になります。

6
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
7