*

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

要求されたアクションを実行するには、WordPress が Web サーバーにアクセスする必要があります。

wordpressの更新を行おうとした時の上記のエラーが発生した場合に、いくつか対策方法があります。

記事を読む

no image

MAMPでLaravelを動作させる

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

記事を読む

no image

Facebook APIを試してみました

Facebook APIが気になったのでちょっと試してみました。 まず私が勘違いしていたこと

記事を読む

no image

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

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

記事を読む

no image

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

現在googleで調べても日本語では微妙にかゆいところに手が届かないWebRTCと Socket.

記事を読む

no image

Javascript パターン

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

記事を読む

no image

node-http-proxyでsocket.ioが通らない

お金が無いので複数サーバも借りられず、複数ドメインも取得出来ないために サブドメインによるサイト振

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

Message

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

PAGE TOP ↑