SkyBeje開発記

SkyWayを使ったブラウザ間通信アプリを開発しています

Webサービスを公開しました

自己紹介

岩手に住んでるアラフォープログラマです。
SkyBejeというWebRTC(SkyWay)を使ったサービスを開発しています。

SkyBejeについて

少人数向けですが、ブラウザのみでチャット+ライブキャストできるサービスです。アカウント登録やインストール作業が不用なので、気軽に利用できます。招待URLで接続するタイプのサービスです。
 

スクリーンショット

以下は、オフラインのオセロゲーム、スクリーンシェア機能でライブキャストしています。石を置く場所を皆で相談しながら、AIと対戦しているという状況です。

f:id:iwatendo:20170811133201p:plain

※ライブキャスト上にカーソルアイコン置けるので、それで石を置く位置を伝えてます。
※上記は「WZebra」という、かなり強いAIを搭載しているフリーソフトです。

実装した機能の一覧

・チャット機能 / ライブキャスト機能
・複数アイコン登録、複数アクター(アバター)の登録機能
・ライブキャスト上にカーソル表示できる機能
・スクリーンシェア機能(現在実装中、近日中に公開します)
Android端末のカメラやマイクを使ってのライブキャスト
・簡易BOT機能
音声認識での文字入力(Chromeのドラフト機能の為、将来的に使えなくなる可能性あり)

SkyBejeの利用用途

ゲーム(オンライン/オフライン問わず)を一緒に楽しむ場として利用する、創作活動の場として利用する、パソコンの操作説明やオンライン家庭教師的なサービスで利用する、などの使い方を想定しています。

※だたし、SkypeやLINEのような連絡する手段としては使えませんし、ニコニコ動画YouTubeライブのような大規模なライブ配信はできません。また、ユーザーの環境や使い方にもよりますが、大人数での利用はできません。(2~8人程度での利用を想定しています)

SkyBejeの特徴

SkyBejeは、外部のサーバーにデータを保存せずに、個々のブラウザのDB(IndexedDB)に各種データを保存します。また、ブラウザ上に擬似的なサーバーを立てて処理します。(これをSkyBejeではホームインスタンスと呼びます)

ホームインスタンスは、マストドンで言うインスタンスと同じようなものですが、外部のサーバー上に設置されるものではなく、ブラウザ上に小さなインスタンスを構築するイメージです。但し、ブラウザ上で動作しているのため、ブラウザを閉じると「ホームインスタンス」は消滅してしまいます。

ですが、自分の名前やアイコン等は、自分自身のブラウザのDB(IndexedDB)に保持するため、誰が立てたホームインスタンスであっても登録したアイコン等はそのまま使用できます。

GitHubWikiに、もう少し詳しい説明を書きました。
ホームインスタンスについて Architecture · iwatendo/skybeje Wiki · GitHub
セキュリティについて Security · iwatendo/skybeje Wiki · GitHub

 

アルファ版としてサービスを公開しました

実験的なサービスですが、よかったら試してみてください。
以下のURLから利用できます。(但し、Google Chrome専用です)

https://skybeje.net/

バグ報告や、ご意見やご要望等を歓迎します。

ただし、致命的な問題があった場合、機能を削除したり、DB構造(IndexedDBのデータ構造)を変更する可能性があります。登録したデータが利用できなくなる可能性もありますが、ご了承願います。

今後実装予定の機能

GitHubのIssueに登録してます。
発覚したバグ等も、ここに追加していきます。

Issues · iwatendo/skybeje · GitHub

 

 以下、SkyBejeの使い方について

トップページの「始める」ボタンを押すと、以下のようなページが表示されます。
f:id:iwatendo:20170811193456p:plain

 「ホームインスタンスの起動」を押す事で、ブラウザ上にインスタンスが起動します。

 

招待URLが表示されるので、招待したいメンバーにURLを伝えます。(後で伝えても良いですし、一人で試す場合は招待しなくても大丈夫です) 

f:id:iwatendo:20170811193500p:plain

ここはサーバー的な役割を果たしているページなので、あなた自身も「クライアント起動」ボタンを押してクライアントを起動させます。

 

サイドのメニューに「クライアント」が追加されて表示が切り替わります。招待されたメンバーも同じ画面が表示されます。(但し、招待された側は「ホーム」の表示がありません)
f:id:iwatendo:20170811193506p:plain

初回起動の場合、プロフィールの名前が「名前未設定」となっているので、左下の「プロフィール」ボタンを押して、表示名の変更やアイコンを登録します。

 

 

アイコンは何個でも登録でき、アイコンを切替えて発言する事ができます。*1

f:id:iwatendo:20170817221856p:plain

 

サイドのメニューから「ホーム」に戻ると、登録した名前が「エントランス」という枠内に表示されていると思います。(「エントランス」や「リビング」はルーム名称で、変更可能です)
f:id:iwatendo:20170811193533p:plain

誰がどの部屋にいるか、ここで確認できます。

 

招待されたメンバーが接続すると、ここに名前が追加されます。(接続したメンバーはエントランスに配置されます)

 

部屋は追加する事もできます。

f:id:iwatendo:20170817222019p:plain

ルーム内に表示されているメンバーは、ドラック&ドロップでルーム移動する事ができます。

 

f:id:iwatendo:20170811193544p:plain

チャットの内容は、同一ルーム内のメンバーにしか見えません。

 

 

最後に、ライブキャストについての説明をします。
一番下の真ん中あたりの「ライブキャスト」ボタンを押すと以下のようなダイアログが表示されます。

f:id:iwatendo:20170811193557p:plain

初回実行時は、カメラとマイクの使用許可の確認でると思うので必要に応じて許可を出してください(ライブキャストしない場合は拒否しても問題ないです。ただし、後で使用したいと思った場合には、サイトへのブロック設定を解除する必要があります)

 

使用するカメラとマイクを選択して「ライブキャスト」ボタンを押す事で配信開始されます。

※現状ではスクリーンシェア機能は未実装の為、仮想Webカメラ(NDC:ニコ生デスクトップキャプチャー)でデスクトップを表示しています。近日中にChrome Extensionを利用して、ブラウザのみでデスクトップの配信をできるようにする予定です)

 

プレビューの下のオプション「接続ユーザーのカーソル表示許可」にチェックをいれておくと、ライブキャスト上の画面をクリックする事により、自身のアイコンを配置する事ができます。このアイコンは他のメンバーからも見えます。 

f:id:iwatendo:20170811193609p:plain

複数人がライブキャストした場合、「ON AIR」のアイコンが増えるので、見たい人のアイコンを選択する事で表示が切り替わります。

※将来的には、複数人の表示もできるようにしたいと考えています。
※現バージョンでも、別窓でライブキャストを表示させる機能があり、それを利用すれば複数のライブキャストを同時に見ることは可能です。

 

その他、アンドロイド端末からも、ライブキャストする事が可能です。

「ライブキャスト」ボタンの右の「モバイル」ボタンを押すとQRコードが表示されます。 このQRコードをアンドロイド端末で読み込む事により、アンドロイド端末からもライブキャストをする事が可能です。

 

f:id:iwatendo:20170811193629p:plain

 

現段階では、アンドロイド端末のカメラとマイクを使ってライブキャストするだけですが、将来的にはもっとスマホタブレットと連動する機能を実装していきたいと考えています。*2*3

 

f:id:iwatendo:20170811193641p:plain

Nexus7(2013)を使用して、ライブキャストしています。

上記はこんな感じで写してます。
f:id:iwatendo:20170811193652p:plain

※アンドロイドのバージョンが古い場合、デバイスの切替ができない場合があるようです。デバイスを選択後「配信」→「停止」→「配信」とする事で動作するケースもあるようです。うまくいかない場合は試してみてください。

 

ちなみに「人狼」を置いているのは、このサービスを使って「人狼」をやってみたいと考えているためです。ゲーム進行手順は考える必要はありそうですが、参加者募って試してみたいと思っています。(テストも兼ねて)

 

最後に

説明していない機能についてや、今後実装したい機能についてなど、書きたい事がまだまだ沢山ありますが、機能追加や不具合修正をしながら、追々書いていきたいと思います。

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

*1:ブラックジャックによろしく 佐藤秀峰氏の画像を使わせていただいてます

*2:現状iPhoneiPadには対応していません

*3:iOS11でSafariがWebRTCに対応するらしいので、iPhoneiPadからも利用できるようにしたいです