*

socket.ioとwebRTCでビデオチャット

公開日: : 最終更新日:2014/01/30 投稿者:raru node, WebRTC, web技術

現在作成したいものがあるために、その予行演習として
nodeのsocket.ioとwebRTC機能を使ってルーム機能付きビデオチャットを作成しています。

現在見た目のセンスのなさと白黒っぷりを無視すれば概ね完成しています。
あとは退室時にwebRTCのPeerConnectionによって接続されたクライアントのマッチング表を更新する作業が残っています。

一旦動作する形になったらまとめて役に立つ形でまとめたいと思っているところです。
やっぱり動くし映像出るので楽しいです。
自分の顔が映るだけなので、微妙な感じもしますけどね。

毎日1〜2時間でコツコツ作業しています。

socket.ioのことを当時あまり知らなかった僕は無駄な実装を多くしていたことを知りました。
冷静に考えれば当たり前なんですけどね、思考停止しすぎていましたね。
便利だと思った機能としては以下

・socket.set(“name”, value)形式のsetterがある
・socket.idでユニークなidが取得出来る
・room機能がある
・broadcast/multicast機能が備わっている

自分でソケットなど管理用のクラス(っぽいもの)を作成していたり
ユニークIDを生成する関数を作ったり
特定のグルーピングを自分でしたり
その中の人に通信することを自前で作ったり
上記機能を簡易ではありますが、自分で頑張ってたのでとっても無駄な時間を過ごしました。

またルーム内の人を一覧したりと基本的に管理したいデータには当然ながらアクセスできます。

唯一僕の理解力がたらずに良く分からないのが、getterがcallback型なこと。
socket.get(“name”, function(err, data){
})
という形なんですよねぇ。普通に値をくれればいいのにね?
そして第一引数は現在さらっと無視しています。そのうち調べます。

またwebRTCというウェブ上を探すと、役に立ちそうで微妙に役に立たない情報ばかりでてくる技術。
これもおいおい備考録したいところです。

peerConnectionにstreamをaddするタイミングが微妙に気持ち悪かったりしました(僕は
コネクションが成立してからそこにストリームを追加すると思いきや、それだと通信が上手く確率できないというか、映像が送れなかったりしました。
最初っから追加しておくものみたいです。

また、微妙に良く分からなかったのが
getUserMediaで起動したマイクやカメラの止め方。
探してもあまり出て来ないのでapiを見たところ,stopという関数がありました。
そのまんまですね。

getUserMediaで取得したstreamオブジェクトに対して
stream.stop()でカメラが停止します。
感覚的に気持ち悪いと感じたのは僕だけなんですかね。
ストリームはストリームであってカメラオブジェクトじゃないですからね。
気にしたら負けでしょうかね。もしくはなんか考え方が違うか。

将来的にはSTUNサーバを自分で構築したいです。
googleさんが公開してるサーバが止まったら困るので。

関連記事

no image

node v0.11.8 npm エラー

webRTCとnodeを使っていろいろと作ろうとしているのですが、開発中に少し悩んだので備忘録

記事を読む

no image

Laravelでbladeを利用したViewを作成

今回はLaravelで採用されているviewテンプレートのBladeを利用して画面を作成してみます。

記事を読む

no image

Javascript パターン

最近更新を行なえるほど技術を追っていませんが、日々の電車での移動時間に本を読んでいます。 2駅乗っ

記事を読む

no image

Mac OS X (Yosemite) にLaravelをインストール

Max OS 10.10(yosemite)にPHPフレームワークのLaravelをインストールして

記事を読む

no image

Facebookから日本語でデータ取得 (※だたしlocationは除く

Facebook Graph APIを通して取得したデータがローマ字や英語で困ることがあります。

記事を読む

no image

MAMPでLaravelを動作させる

先日laravelをMAMPのhtdocsに配置しましたが、当然それでは動かなかったので設定しました

記事を読む

no image

WebRTC + Node によるルーム機能付きビデオチャット 2

前回の続き こちらは前回の記事の続きになります。 また前回の記事にコメントを頂いたのですが、

記事を読む

no image

PHPのcURLを利用してAPIをGET/POSTで叩く

PHPからcURLを利用してhttpのget, postで問い合わせを行ってみます。 今回はYAH

記事を読む

no image

IEとchromeでbeforeunloadをaタグのhrefに反応させずに利用……できなかった

今回beforeunloadが面倒な動きをしていたので調査&ある程度都合よくしてみました。 してみ

記事を読む

no image

PHPでXMLをnamespaceを利用したxpathでnode取得

PHPでxmlを読み込んでxpathでnodeを取得して見たいと思います。 今回はyahooの形態

記事を読む

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

PAGE TOP ↑