Skip to content

Instantly share code, notes, and snippets.

@voluntas voluntas/ayame_lite.rst
Last active Nov 15, 2019

Embed
What would you like to do?
Learn more about clone URLs
Download ZIP
WebRTC シグナリングサービス Ayame Lite 開発ログ
Raw
ayame_lite.rst

時雨堂 WebRTC シグナリングサービス Ayame Lite 開発ログ

日時:2019-09-26
作:時雨堂
バージョン:19.09.06
URL:https://ayame-lite.shiguredo.jp/beta

このサービスに興味がある人はこの資料に Star をつけてもらえると嬉しいです。

Contents

概要

Ayame Lite は WebRTC Signaling Server Ayame を利用した WebRTC の P2P 利用向けの無料で利用できるシグナリングサービスです。

シグナリングサーバ以外に、ルーム認証機能や TURN サーバを提供しています。 将来的にはウェブフックを利用した自前での認証/承認機能が利用可能になる予定です。

目的

このサービスは Ayame をできるだけ多くの人に気軽に利用してもらいたいという思いから、提供しています。

利用する

GitHub アカウントさえあれば、すぐに無料で利用できます。

WebRTC シグナリングサービス Ayame Lite

OpenAyame プロジェクト

Ayame 自体は OpenAyame プロジェクトとして開発しています、詳細は以下をご確認ください。

OpenAyame プロジェクト

方針

このサービスを長く続けていきたいと考えているため、コスト削減を最初から行います。

  • このサービスのための機能を Ayame 側に追加することはしません
  • 無料プランのみで、有料プランは提供しません
  • サポートはベストエフォートでのみ提供します
  • デザインは最低限です
  • 運用保証は行いません
  • 帯域保証は行いません
  • オフラインのイベントには参加しません
  • 機能追加には慎重です
  • 統計機能などの可視化を重視します

ゴール

  • [x] 無料で利用可能
  • [x] 認証なしでの利用
  • [x] GitHub ID ログインした場合はシグナリングキーを利用可能
  • [x] STUN 払い出しの対応
  • [x] TURN 払い出しの対応
  • [ ] ウェブフック設定対応
  • [x] 認証ログ確認機能
  • [ ] TURN 統計確認機能
  • [ ] 冗長化

特徴

ルーム認証機能

ルーム ID に <GitHub ID>@ をつけることで、接続にシグナリングキーを要求します。

認証ログ確認機能

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

支える技術

利用方法

まずはこちらをご覧ください。

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

Ayame Web SDK を利用する

OpenAyame/ayame-web-sdk: Web SDK for WebRTC Signaling Server Ayame

Ayame で利用できる Web SDK が公開されていますので、それを利用してください。

シグナリングキーなし

  • ルーム ID はここでは test-ayame-lite-room としていますが、推測されにくい値を指定してください
const conn = Ayame.connection('wss://ayame-lite.shiguredo.jp/signaling', 'test-ayame-lite');
const startConn = async () => {
    const mediaStream = await navigator.mediaDevices.getUserMedia({audio: true, video: true});
    await conn.connect(mediaStream);
    conn.on('disconnect', (e) => console.log(e));
    conn.on('addstream', (e) => {
        document.querySelector('#remote-video').srcObject = e.stream;
    });
    document.querySelector('#local-video').srcObject = mediaStream;
};
startConn();

これで接続できます。

シグナリングキーあり

  • ルーム ID を <自分の GitHub ID>@<好きな Room ID> のように指定してください
  • 自分のシグナリングキーをオプションで指定してください
const conn = Ayame.connection('wss://ayame-lite.shiguredo.jp/signaling', 'shiguredo@test-ayame-lite');
const signalingKey = 'CO6p4pdJH4n7SfM6dBLIFzpvop9kefkypoDsddoPMhp3m4FX';
const startConn = async () => {
    const mediaStream = await navigator.mediaDevices.getUserMedia({audio: true, video: true});
    await conn.connect(mediaStream, {'key': signalingKey});
    conn.on('disconnect', (e) => console.log(e));
    conn.on('addstream', (e) => {
        document.querySelector('#remote-video').srcObject = e.stream;
    });
    document.querySelector('#local-video').srcObject = mediaStream;
};
startConn();

これで接続できます。

WebRTC Native Client Momo で利用する

shiguredo/momo: WebRTC Native Client Momo

Momo で Ayame が利用できます。

シグナリングキーなし

  • ルーム ID はここでは test-ayame-lite-room としていますが、推測されにくい値を指定してください
./momo --no-audio ayame wss://ayame-lite.shiguredo.jp/signaling test-ayame-lite

シグナリングキーあり

  • ルーム ID を <自分の GitHub ID>@<好きな Room ID> のように指定してください
  • 自分のシグナリングキーをオプションで指定してください

GitHub ID が shiguredo で、 ルーム ID が test-ayame-lite の場合:

./momo --no-audio ayame wss://ayame-lite.shiguredo.jp/signaling shiguredo@test-ayame-lite \
    --signaling-key CO6p4pdJH4n7SfM6dBLIFzpvop9kefkypoDsddoPMhp3m4FX

React Native WebRTC Kit を利用する

OpenAyame/ayame-react-native-sample: React Native sample for WebRTC Signaling Server Ayame

React Native で Ayame が利用できます。時雨堂が開発している React Native WebRTC Kit を利用しています。

shiguredo/react-native-webrtc-kit: React Native 用 WebRTC ライブラリ

ロードマップ

  • ウェブフック機能
    • デフォルトではウェブフック機能はオフにする予定です
    • Ayame 認証はシグナリングキーと GitHub ID (ルーム ID の prefix) の組み合わせしかチェックしません
    • ホスト情報やそれ以外の情報は全てウェブフック機能を利用してご自分で認証を行ってもらいます
    • 認証時と切断時に飛ばすことを可能にする予定です
  • 統計情報の提供
  • authnMetadata 機能
    • 好きな JSON をウェブフック URL に対して投げつけることが可能です
    • {"authnMetadata": ""}
  • authzMetadata 払い出し機能
    • ウェブフック URL から好きな JSON を払い出すことができます
    • これはクライアントに通知されます
    • {"authzMetadata": ""}

Discord

ベストエフォート運用です

Ayame の Discord と同じサーバです。

https://discord.gg/z6EJu3d

進捗

2019-09-18

  • wss://ayame.shiguredo.jp/ws を無効にしました

2019-09-12

  • 支える技術を追記しました

2019-09-11

  • 認証ログ機能を追加しました
    • 直近 5 件の認証ログが確認できます

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

2019-09-01

2019-08-30

2019-08-14

  • オープンベータテスト開始しました
  • オープンベータテスト向けにシグナリングキーありのサンプルを用意

2019-08-10

  • wss://ayame-lite.shiguredo.jp/signaling に変更しました
    • wss://ayame.shiguredo.jp/ws は使えなくなりました

2019-08-09

  • サービス名を Ayame Lite にしました
  • クローズドベータテストの参加募集を開始しました
    • GitHub ID が必要です
    • シグナリングキーが払い出されます
    • ルーム ID に自分の GitHub ID を prefix として利用することでそのルーム ID に認証をかけられます
    • TURN サーバ用の設定が払い出されます
      • Web SDK を使っていれば意識する必要はありません

2019-08-07

  • TURN の払い出し設定を iceServers に変更

2019-07-27

  • 認証サーバの開発を開始しました
    • GitHub アカウントを持ってシグナリングキーを取得することで特定のチャネルにアクセスするには認証が必要になります
  • TURN サーバ連携の開発を開始しました
    • シグナリングキーを利用した場合は TURN サーバで利用できる TURN 向け設定をシグナリングサーバが払い出すようになります

2019-07-13

  • WebRTC Signaling Server Ayame as a Service (仮) を公開しました
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.