動画チャットできる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を開けば即入室できる、よりカンタンでシンプルなものを作りたいと思っています。

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

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

松井 貴史
顧問・パートナー型の受託専門WEBデザイナー兼ディベロッパー。UXUI改善運用からWEBシステム開発までワンストップで提供しています。自身でもデザイナー発!個人開発者として日々の気づき、アクション、考え、ノウハウをTwitterで発信中。オンラインゲームSAKETUMA開発

類似記事

ログイン画面を別ページで作成する[webRTCを利用した動画チャットシステム自作編]

個人開発!オンライン飲み会で活躍するオンラインボードゲーム「SAKETUMA」をリリース!

個人開発!オンライン飲み会で活躍するオンラインボードゲーム「SAKETUMA」をリリース!

初めてのサービス開発なら、マッチングサービスから始めると基礎が身につく