動画チャットできるWEB会議システムを開発する

こんにちは。松井です。

コロナの影響もあって、リモート飲み会や、テレビだとリモート収録みたいなもものを頻繁に見かけるようになった気がします。

クライアントさんがビデオ動画を用いたリモートでのビジネスを行いたいという事で、提案ベースで動画チャットシステムを開発しています。

無料でもあるのですがBtoCモデルのビジネスの場合、URL発行→URLから入室→チャットというかなりシンプルなものでないとハードルが上がります。

スマホからのアクセスはアプリインストールが必要という課題

問題は、アプリのインストールです。

無料の動画ビデオチャットは、Zoom, Whereby(旧appear.in), Skype , Googleのハングアウトなどあるのですが、SP⇄PC間になると全て受取手側は、アプリのインストールが必要だったりするのが課題です。

ちなみにPC間であればWhereby, skypeのweb会議システムはインストール不要です。どちらも、ルーム名を作成しURLを発行し入室するだけのシンプルなモデル。PC間で大丈夫という方はお勧めです。ただし管理者は、アカウントの発行が必要です。

まだ途中なのですが、スラックの自分のチャンネルに情報をたくさん投げていて溜まってきたのでブログを書くことにしました。

SkyWayでweb会議システムがhtmlレベルで作成できる

web会議システムでさくっと開発したいならSkyWayが便利です。サイト上にデモまでつけてくれています。

サイト内のGitHubからファイルをダウンロードして、サーバーやサーバーレスの FireBaseHEROKUなどにアップすればすぐに使うこともできます。

ちなみにファイル構造もシンプルで、html,css,jsファイルで構成されています。

webRTC系の記事も充実

webRTCとは、Web Real-Time Communicationsの略称で、動画チャットなどをプラグインなしにブラウザだけで実現する事を指します。

今回は、SkyWayをベースにしてカスタマイズしながら自作しています。結構記事も豊富なので、作ってみたいという方にはお勧めです。Qiitaも一覧を作成してくれています。

参考記事

WebRTC関連の記事等へのリンクまとめ

SkyWayを使ってWebRTC開発【入門ハンズオン】

記事もサービスも参考になりました。
誰でも簡単にビデオ通話できる「オンライン帰省.com」作ってみた【Webサービス】

WebRTC Platform SkyWay ハンズオン SFU編

SkyWayを使いこなすために – How to use SkyWay (WebRTC)

ただ正直動くだけだと、GitHubをインストールするだけなので簡単なんですが、そのまま使うことはあまりないので、カスタマイズする必要がありますが、色々やろうと思うとちょっと複雑な印象です。

最後に

現在の機能としては

  • ✅ルームを作成して入室/退出
  • ✅ルーム名を知っていれば入室できる
  • ✅PC⇄SP間インストール不要
  • ✅音声や画面のON/OFF
  • ✅URL共有

ができているので機能できる状態です。

ただ入室画面を別ページで持ちたかったり、受け取り側のハードルを下げるため、管理者が作成したルームネームが入ったURLを開けば即入室できる、よりカンタンでシンプルなものを作りたいと思っています。

これからも、画面共有をして何かを一緒に行うことますます増えてくると思うので、この機会にでも作っておきたいです。

またお問い合わせ後の初回打ち合わせも今後は、開発したビデオ動画で行いたいなと思っています。

松井 貴史

松井 貴史

RUBY DESIGN. 代表 WEBサービス・業務システムのソフトウェアに特化したWEB制作を行ってます。絶賛リモートチーム募集→WEB•UIデザイナー募集中! 福岡在住 大阪/名古屋 居住経験あり 熊本県宇土出身 http://stand.fmやってます!

類似記事

デザイナー体験の授業をしてきました。

アイコンだけで伝わらない場合の解決方法

【未経験OK!転職をサポート!】WEB制作の個人レッスン生徒募集 開始 !

1つのドメインで複数のサイトを作成する(サブドメインで新規サイトを表示する)