Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
WebRTC シグナリングサービス Ayame Lite の使い方

WebRTC シグナリングサービス Ayame Lite の使い方

日時:2019-09-12
作:時雨堂
バージョン:19.09.1
url:https://ayame-lite.shiguredo.jp/beta

概要

WebRTC を P2P で利用する際に主に使われるシグナリングサーバを提供するサービス Ayame Lite の使い方を書いてきます。サインアップしなくても使えますので、まずは触ってみてください。

目的

一人で Ayame Lite を利用して WebRTC を P2P で体験するというのが目標です。

Ayame Lite にサインアップ場合に必要なもの

サインアップには GitHub アカウントが必要になります。 https://github.com/ でアカウントを作成してください。

事前にインストールが必要なもの

Ayame SDK を簡単に利用するには Node.jsYarn が必要になりますので、インストールしておてください。

Windows の場合

誰かがコメントしてくれるまで待ってます。

macOS の場合

homebrew を利用している場合は brew install node yarn でインストールされます

まずは繋いで見る

シグナリングサーバだけを利用するのであればサービスへのサインアップすら不要です。 Ayame Web SDK のサンプルを使ってすぐにビデオチャットが体験可能です。

Ayame Lite のシグナリングサーバ URL:

wss://ayame-lite.shiguredo.jp/signaling

ビデオチャットといえば双方向です。Ayame Web SDK のサンプルでは双方向のサンプルを用意しています。

Ayame Web SDK サンプルを動かしてみる

Ayame Web SDK サンプルにはすでに Ayame Lite がシグナリング URL として指定されています。

$ git clone git@github.com:OpenAyame/ayame-web-sdk-samples.git
$ cd ayame-web-sdk-samples
$ yarn install
$ yarn serve

ブラウザに自動で開きます。

https://i.gyazo.com/cc60001279973133092ea5fdb7404504.png

双方向受信(sendrecv) を2つ開いてください。ブラウザは最新の Chrome / Firefox / Safari / Edge (chromium based) であれば正常に動作します。

Chrome の画面

https://i.gyazo.com/6ecb1879f265885de9c0e33d123260aa.png

Safari の画面

https://i.gyazo.com/800e43136f5018c277451d2495ec53ef.png

ここではルーム ID をデフォルトで利用していますが、ルーム ID をデフォルトから推測しづらい値に変更してください。ルーム ID を変更するには URL パラメータで指定します。

URL パラメータでルーム ID を指定する:

http://localhost:3000/sendrecv.html?roomId=ayame-lite-test-room

getUserMedia の確認ポップアップが出ますので 許可 を押してください。

Chrome での getUserMedia 利用の確認ポップアップ

https://i.gyazo.com/3b75076953db6e752d775e546858f6d2.png

Safari での getUserMedia 利用の確認ポップアップ

https://i.gyazo.com/b77b80a72d106e5e57ebd9fc0f45e17c.png

双方に配信ができていれば成功です。

https://i.gyazo.com/ae6ba40536a7dd48ba17adf9da45e37f.png

ルーム認証を利用する

ルーム ID を「推測しづらい値」を利用する事から、「認証」に変更してみましょう。

Ayame Lite へのサインアップ

まずは GitHub アカウントでサインアップをしてください。

https://ayame-lite.shiguredo.jp/beta

Sign up or Sign in GitHub をクリックしてください

https://i.gyazo.com/8a81376e1b2a984ce04db626df8b4e96.png

Ayame では GitHub の公開情報しか利用しませんので安心してください。

https://i.gyazo.com/ed79086b84c9fc494970c9df9b1d570f.png

サインアップが成功すると、シグナリング URL とシグナリングキーが提供されます。

https://i.gyazo.com/18d15cf54740b61356231f27f3c9bfc6.png

このシグナリングキーは再生成済みですでに利用できないのでご安心ください

ルーム ID を決める

さて、次はこのシグナリングキーを利用してルームに認証をかけてみます。

まずルーム ID は GitHub アカウントの ID を先頭に指定する必要があります。

ここでは voluntas という GitHub ID を指定します。 その後 @ を間に挟んでスキなルーム ID を指定してください。

http://localhost:3000/sendrecv.html?roomId=voluntas@ayame-lite-test-room

シグナリングキーの指定

さらにシグナリングキーを指定します。

http://localhost:3000/sendrecv.html?roomId=voluntas@ayame-lite-test-room&key=_fxBuiA6KeGZ8Ib59VSK5fUjIT6AxqT8FRc0KGvoV_tIdLJ8

このシグナリングキーも再生成済みですでに利用できないのでご安心ください

あとは接続してみる

これで voluntas@ayame-lite-test-room に対してはシグナリングキーを知らないとアクセスができなくなりました。

https://i.gyazo.com/9046703a8251f30aefa0c0ee46e863be.png

接続ログを確認する

直近 5 件の接続ログを確認することができます。うまく接続できないな?とおもったら接続ログを確認してみてください。

https://i.gyazo.com/af5988322cfe0e906dbc8984378c4dbd.png

Ayame Lite のアカウントを削除する

もし今後、 Ayame Lite を利用しないのであればアカウントを削除できます。

サインインした一番したにアカウントの削除があります。

https://i.gyazo.com/380c807a2a00630d5f0bf328fc21556a.png

Ayame Lite の Discord

この資料をみてわからない所がでてきたら Discord で質問してみてください。

https://discord.gg/z6EJu3d

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.