rui live note

WordPress、PHP、子育て、ブログ、将棋、コワーキング、子育て、群馬等に関する日々感じたことを書いているブログです

*

WebRTCで動画チャットできる「PERARI」というWebサービスを作りました

      2015/04/02   CakePHP, Web, Webサービス, 開発 , ,

  • このエントリーをはてなブックマークに追加
  • Pocket

※この投稿は「WebRTC Advent Calendar 2014」の3日目の記事です。

WebRTC を使って世界中の人と動画チャットができるかもしれない「PERARI」というWebサービスを作ったので紹介させて頂きます!

PERARI って何?

PERARI

「PERARI」は、WebRTC を活用してブラウザ上で動画・音声チャットができる Web サービスです。

チャットの相手はそのときサイトにアクセスしている人の中から、全くランダムで決められます!世界中のどこかの誰かと繋がるかもしれないドキドキ感、見知らぬ海外の人と会話する楽しさ、そんな体験ができるサービスにできるといいなあ、と思っています。

なお、ユーザー登録など事前の手続きは何もありません。Web カメラとマイク、それから WebRTC に対応したブラウザ(Google ChromeFirefoxOperaの各最新版)があれば、すぐにサービスを利用できます。もちろん無料ですよ。

利用イメージ

例えばこんな利用シーンを想定しています。

  • ネイティブの外国人と実践的な語学学習に
  • 世界中に友だちが欲しい
  • 自分が関心のある国の人と話をしてみたい

とはいえ特にルールは決まっていません。面白半分で使ってみるのも全然いいですし、お好きな使い方をして頂ければと!

操作方法

PERARI の操作方法を簡単に説明します。

まず、TOPページの右側にある欄から「名前」「国名」「メッセージ」を入力して「Start」をクリックします。

操作方法

画面が切り替わったら、ブラウザの上部にカメラ・マイクのアクセス許可ボタンが表示されるので、「許可」をクリックします。(※これは Google Chrome での例ですので、ブラウザによって表示は異なります。)

操作方法

相手になる人を探し始めます。(このときサイトにアクセスしている人が探す対象ですので、他に誰もいない場合はいつまでも相手が見つかりません・・・。)

操作方法

誰かが見つかると、その相手の「名前」「国名」「メッセージ」が表示されます。その方でよければ「OK」を、別の相手がよければ「NO」をクリックします。(お互いで「OK」が選ばれるまでは、動画チャットは始まりません。)

操作方法

「OK」した相手との動画チャットが始まります!(※人物写真はイメージです。)

操作方法

主な使用技術

PERARI で使われている主な技術はこちらの通りです。

PeerJS

WebRTC の仕組みを利用するために PeerJS を使いました。ブラウザからWebカメラ・マイクを取り扱ったり、ブラウザ間のPeer to Peerによるリアルタイム通信を簡単に実現できる、とってもナイスなライブラリです。

jQuery+CakePHP+MySQL

フロントエンドは jQuery、バックグラウンドは CakePHP、DB は MySQL という自分的には枯れた、他の方から見てもあまり面白みの無い構成になっています。いずれも勉強がてらに新しい技術を使いたかったんですが、諸事情により時間的余裕が無かったので結局いつも使ってるものに落ち着いたという。。

Gumby

cssフレームワークは Gumby。最近は何をやるにも Bootstrap ばかりだったので、少し気分を変えてみました。

今後の課題

まだまだ機能も足りないし、色々不具合も残っていたりして課題山積みな感じなのですが、まずは優先的に対応したい点をメモしておきます。

  • テキストチャット機能を付けたい(動画チャットだけではつらい)
  • サイト内の英語をなんとかしたい(Google翻訳に頼った英文なので)
  • PeerJSサーバを立てる(今後利用者が増えたときに備えて)
  • 諸々把握している不具合対応

何はともあれ、目下最大の課題はほとんどサイトにアクセスが無いということです。人がいなければ繋がれる相手もいないというわけで・・・w 今後は何とか利用者を増やしていきたいです。

もし使って頂いた方がいましたら、率直なご意見ご要望などお知らせ頂けると大変嬉しいです!

まとめ

何だか WebRTC Advent Calendar の記事の割には単なるサービス紹介になってしまった感がありますが・・・WebRTC を使うとブラウザでこんなことが簡単にできてしまう!という一例として、見ている方にその面白さ、魅力が少しでも伝わっているようですと幸いです。

というわけでそんな「PERARI」ですが、よろしければみなさんもぜひ使ってみてください!

ad

この記事が気に入ったらシェアしてもらえると嬉しいです!

  • このエントリーをはてなブックマークに追加
  • Pocket
  • follow us in feedly
  • RSS

  関連記事

プログラミング
ウィンドウのスクロール位置を保持したままページ遷移する方法

ウィンドウのスクロール位置を保持したままページ遷移する方法を調べていまして、ざっ …

Analytics
2014年6月のアクセス数レポートを報告しておきましょう

さて、前月に引き続いて当ブログの6月のアクセス数レポートを公開してみたいと思いま …

Windows Azure
Windows Serverの動作検証をするにはAzureが便利過ぎるのでその仮想マシン作成手順をまとめてみました

Web系メインで仕事していると割合としてはかなり少ないものの、たまに出会うことが …

FacebookとTwitter連携
FacebookページとTwitterの連携は非公開時も行われるようなので注意

Facebookの投稿をTwitterに連携する機能はとても便利ですよね。自分も …

トンネリング
MacでSSHトンネル作ってサーバにFileZillaでファイル転送する方法

以前、Windows で開発していた頃はよくやっていたのですが、何気に Mac …

WordPressと高校野球
高校野球界ではサイトの31%がWordPressで作られている(かも)

智弁学園、甲子園初優勝おめでとうございます!というわけで、今年のセンバツも終わっ …

LINE Notify
手軽にLINEにメッセージ通知できるLINE Notifyを試してみました

先日の「LINE DEVELOPER DAY 2016」で発表された LINE …

アクセス解析
先月の結果は?2015年4月のAnalyticsアクセス数レポートです。

毎月公開しております当ブログのアクセス解析レポート、2015年4月分を紹介します …

Facebook
Facebookで自分のなりすまりアカウントが出たっぽいのでスパム報告をしておきました

Facebookでスパムアカウントによるなりすまり友達申請が目立ってきていますが …

phpDocumentor2
phpDocumentor2を試してみたのでそのセットアップ手順など

・phpDocumentor しばらくぶりにサイトを見たら新しいphpDocum …