2020-04-03に投稿

オンラインコワーキングスペース AirCommute 誰でもウェブカメラで一緒にリモートワークができます

ここ1か月で社会が激動の変化を迎えましたが、みなさまいかがお過ごしでしょうか。私はCrieitで1か月前に開催されたweb1weekという企画で、一緒にリモートワークをする人を探すための掲示板を作りました。
https://crieit.net/boards/web1week-202003/1bd7b1c10179e9c61e480d4db4767cf4
そこそこ需要があり、今回はその延長で『誰でも一緒にリモートワークができるビデオ会議システム』を作ったので紹介します。

オンラインコワーキングスペース AirCommute
https://air-commute.com/

スクリーンショット

特徴

カメラの映像をやりとりする部分はWebRTCを使ったP2P通信で、中央サーバーを経由することなく利用者間で直接接続します。オンライン状態のユーザーの中から数人を選んで相互に仕事中のカメラの映像を写すことができます。
実際のコワーキングスペースに例えると、目の前の数人を視界に入れるイメージです。他の利用者と合わないと思ったら部屋から退出するのではなくその窓を閉じることで対応できます。

技術

引き続きFirestore+Vue.jsを使って効率的に開発することができました。Realtime Databaseでオンライン状態を登録しています。 https://firebase.google.com/docs/firestore/solutions/presence?hl=ja

WebRTCでP2P通信に必要な情報をFirestoreで交換する部分は https://webrtc.org/getting-started/firebase-rtc-codelab を参考にしましたが、コードが不完全でFirestore初心者の私はここでかなり時間を取られた。

あとは1対1の通信を多対多に拡張、Vue.jsに移植、UXを整えるという順でモチベーションのために常に動作する状態を維持しながら開発しました。
プロトタイプの段階の開発は手探り感が楽しいです。

デザイナーがいないので自力で作ったロゴ
ロゴ

リモートワークのメリット

孤独に作業するより仲間と一緒にやった方がサボらないし集中力が上がり、なにより心強くてメンタルによいと思います。
在宅でカメラ越しに一緒にリモートワークをする人がいればZoomなどの既存のビデオ会議ツールを使えばいいのですが、所属組織でビデオ会議グループがなかったり時間が合わないなどの関係で一緒にやる仲間がいない場合には、現実の場合と同じくコワーキングスペースを使うのが現実的でしょう。

オンラインコワーキングスペースとして

誰でもカメラ越しに一緒にリモートワークをできます。時間を決めずに立ち寄れて、いつ行っても誰かがいて、出入り自由というような気軽な雰囲気を目指しています。
個人開催のオンラインコワーキングスペースにありがちな招待制で厳しいルールを作らなくていいように、一つの部屋全員でカメラ映像を共有するのではなく、好きな数人を選んで相互に写すゆるいつながりからなる仕組みにしました。
コワーキングスペースのもう一つの魅力である異業種交流的な機会を増やせるように各ユーザーがアピール広告を掲げられたら良いので、とりあえずのところテキストを載せられるようにしました。将来的に画像かリッチテキストを載せられればと思います。
気軽さという点から専用アプリをインストールすることなくブラウザから使えるように、またアカウント登録なしで利用できるようにしました。
ワークに限らず勉強や作業など、幅広くご活用いただければと思います。

使い方

ウェブカメラが必要。ブラウザ(Chrome推奨)でサイトを開き、メールアドレスでアカウント登録をするかツイッター連携でもログインできます。
また登録なしで名前だけでもログインできるので、ちょっと利用したい場合はこちらからご利用ください(アピール広告は載せられません)
カメラを開いた後、オンラインのユーザーに対して『オファーをする』をクリックして、相手が『オファーを受け入れる』をクリックするとビデオ通話が始まります。
サーバーを介しないP2P通信ですが、企業内などファイヤーウォールの条件によっては通信できないことがあります。ご了承ください。
窓が開いている間はチャットができるので、あいさつなどのコミュニケーションはここでどうぞ。また人の写った窓の大きさは自由に変えられます。
最初は人がいないかもしれませんが、誰かがログインするまでしばらく待ってみてください。

環境について

パソコン版Chrome推奨。iPhone版Chromeではカメラが使えません。Android版Chromeは一応使えますが窓の大きさが変えられない問題があります。
Firefoxでは通信の確立/終了のイベントが取れないのでチャット画面がうまく出ないのと、ビデオ通話終了時に窓が自動で閉じません。
Edgeは手元の環境ではカメラ映像のストリームをPeerConnectionに乗せるところで失敗。
iPhone版Safariは動画の再生が自動で始まらないので使用不可。

最後に

経済活動を止めるな!

https://air-commute.com/

ツイッターでシェア
みんなに共有、忘れないようにメモ

国崎犀考

フロントエンドエンジニア。ワクワクするものを作りたい。

Crieitは誰でも投稿できるサービスです。 是非記事の投稿をお願いします。どんな軽い内容でも投稿できます。

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

有料記事を販売できるようになりました!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください。
ボードとは?

コメント