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

  関連記事

WordPressが使える無料レンタルサーバー
WordPressが簡単に使える無料レンタルサーバーを試してみた

先日公開した「pigeon」は、サイトを作る人も利用する人もいかに簡単に扱えるか …

Twitterカード
こんな簡単に機能改善!WordPressブログにTwitterカードを設定してみました

自分のブログにTwitterカードの設定をしてみた。 – @YuG_ …

ロボット
コンピュータは不完全情報ゲームをも超えるのか?人狼エージェント開発プロジェクトが始動している模様。

昨年、今年と将棋の電王戦で、コンピュータ将棋ソフトがプロ棋士を次々に負かしたこと …

コワーキングスペース
ふと気付いたらATNDが色々進化していた件

イベント情報管理サービスとして老舗の ATND、自分も主催イベントがあるとよく利 …

棋士データベース
将棋棋士データベースで遊ぶ(1)〜棋士データをスクレイピング〜

※この記事は「将棋 Advent Calendar 2016 – A …

ダミー画像
Web制作に役立つダミー画像生成Webサービスまとめ

画面のモックやワイヤーフレームを作る時に、さくっとダミー画像を付けられると便利で …

OGP
FacebookのOGPキャッシュをクリアする方法(手動・自動対応)

Web サイトやブログでメタタグに指定した OGP 設定を Facebook が …

Eコマース
EC-CUBEにGoogleアナリティクスのeコマーストラッキングを埋め込む設定方法

Google Analytics の eコマーストラッキング機能を使用すると、サ …

linkwighin
WordPressの関連記事表示に便利なLinkWithinプラグインを入れてみた。

LinkWithin WordPressで関連記事を表示するのにとても便利なプラ …

20141201_tinypng
ブログ画像の御用達!JPG、PNGに対応可能な画像ファイルサイズ圧縮Webサービス3選

ブログの見栄え、読みやすさを向上させるのに画像はとても効果的ですが、画像が増える …