You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
この投稿はHTML5 Advent Calendar 2012の5日目の投稿です。 Chrome 21が夏にリリースされて、普通のStable版でもWebRTCが使えるようになりました。 そこで、 Webカメラで読み取ったQRコードの画像をデコードして、音楽を奏でるWebアプリを作ってみました。 HTML5 と Web カメラで QRコード 読み取り HTML5が絡むのはWebRTC(Webカメラ)の読み取りの他は、Video、Canvas、Audioと基本的なヤツだけなんですが、 Flashを使わなくても、こんなのできるよ、ということで。 処理の流れは、こんな感じです。 ①WebRTC初期化(Webカメラのみ要求) ②Video要素のSrcにWebRTCのメディアストリームを設定 ③VideoのキャプチャをCanvasに転写 ④CanvasのバイトデータをZXing(QRデコーダ)に渡す
WebRTCは変化が速いのできちんとキャッチアップしているPeerJSとEasyRTCがよさそうです。 ただし、EasyRTCはなぜかサンプルのビデオチャットが真っ黒になってうまく動きませんでした。原因は調べていません。 ICEサーバー 上記のOSSにはICEサーバーは含まれておらず、だいたいstun.l.google.com:19302というGoogleのSTUNサーバーをデフォルトで指定しています。 本番で動かすにはICEサーバーも自前で立てるのが望ましいです。 ICEサーバーは元々いろいろなOSSがあります。 表にまとめるのは力尽きたので、リストで。一番上のがいいんじゃないかなってなんとなく思っています。 rfc5766-turn-server - High-performance free open source TURN and STUN Server implementatio
こんにちは! がねこまさしです。これから数回に渡って、WebRTCについて書かせていただきます。 内容は2013年10月にNode学園祭2013で発表したプレゼンを、再構成したものになる予定です。 ※こちらの記事は2014年に書かれました。2016年6月現在のアップデート記事がありますので、そちらもご参照ください。 WebRTCとは? WebRTCとは”Web Real-Time Communication”の略で、Webブラウザ上でビデオ/オーディオの通信や、データ通信を行うための規格です。HTML5で新しく策定されたもので、複数の技術の連携で成り立っています。 ちなみに策定には複数の団体が絡んでいています。 API → WWW ビデオ/オーディオのコーデック → IETF WebRTCで何ができるの? WebRTCには大きく分けて2つの要素があります。 カメラ、マイクといったメディアへ
WebRTCを使ったコミュニケーションアプリを作る機会があったので、今回はWebRTC関連のライブラリの使い方とサンプルアプリを紹介したいと思います。 WebRTCとは? WebRTCはリアルタイムコミュニケーションアプリを作成するためのAPIです。具体的には以下のような機能がJavaScriptの知識さえあれば簡単に実装できます。 テキストチャット ビデオチャット ボイスチャット ファイル共有 スクリーン共有(Chromeのみ) WebRTC用のライブラリはいくつかあるようですが、比較的実績のあるという「PeeJS」を使うことにします。 ライブラリのダウンロード 以下のサイトからライブラリをダウンロードします。 http://peerjs.com/ ピアサーバーの準備 ピアサーバー(シグナリングサーバー)はオープンソースを利用して自前で構築することも可能ですが、今回はPeerJSのクラウ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く