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

  関連記事

LINE BOT API
LINE BOT APIを使ってPHPで画像検索BOT作ってみました

先日、1万名先着で trial 公開された LINE BOT API が、巷でず …

アドベントカレンダー
アドベントカレンダー2014の登録が続々始まってます。今年は何に参加しようかな。

もう11月か早いなあ・・・と耽っていたのも束の間、ネット上でははやアドベントカレ …

WordPress管理画面
WordPress管理画面左メニューのレイアウトがChromeで崩れる現象の対策方法

最近、WordPressをいじってると管理画面左メニューのレイアウトが崩れて表示 …

WordPress管理画面
あなたのWordPress管理画面の投稿一覧が見づらい原因はこれかもしれません

長い間 WordPress を使っていると、色々なプラグインを入れたりカスタマイ …

引っ越し
WordPressのサーバ移転した時の以降作業手順まとめ

先日、とあるサイトのWordPressサイトをサーバ移転する作業を行いました。 …

Git
はじめてのgit。githubからブランチのソースをcheckoutするコマンド手順

最近CakePHPを触り始めていて、導入必須プラグインと名高いdebug_kit …

git2xserver
XSERVER に Git をインストールする手順

知人の XSERVER で作業をする機会があったのですが、標準で Git が入っ …

グラフ
PageSpeed Insights でサイト内のリソースだけを対象に分析する方法

先日の改善ネタに引き続き PageSpeed Insights の小ネタです。 …

WordPress
WordPress 3.5.2にアップグレードしました

WordPress 3.5.2 がリリースされていたので、当ブログもアップグレー …

佐藤紳哉
佐藤紳哉七段をもっとイケメンに変身させるChrome拡張を作ってみました

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