第15回 HTML5+JS 勉強会� / WebRTC入門+最新動向� / ~本格的な普及が始まる前にマスターしておこう~Read less
![WebRTC入門+最新動向](https://cdn-ak-scissors.b.st-hatena.com/image/square/63e3a6c9fde23b1abce4fa9a10e4bb7f5fd678cf/height=288;version=1;width=512/https%3A%2F%2Fcdn.slidesharecdn.com%2Fss_thumbnails%2Fintro-webrtc-ppt-150802104640-lva1-app6892-thumbnail.jpg%3Fwidth%3D640%26height%3D640%26fit%3Dbounds)
Today were very happy to introduce Socket.IO P2P, the easiest way to establish a bidirectional events channel between two peers with a server fallback to provide maximum reliability. Lets look at the API and build a little chat application. Or check out the repository directly! Socket.IO P2P provides an easy and reliable way to setup a WebRTC connection between peers and communicate using the sock
ShareDrop is a web application inspired by Apple AirDrop service. It allows you to transfer files directly between devices, without having to upload them to any server first. It uses WebRTC for secure peer-to-peer file transfer and Firebase for presence management and WebRTC signaling. ShareDrop allows you to send files to other devices in the same local network (i.e. devices with the same public
WebRTCは、ブラウザや専用アプリ同士でリアルタイムに映像、音声、データを送受信できる画期的な新技術です。SkyWayを使えば、サーバを準備することなく簡単に、WebRTCを使ったアプリが開発できます。
The PeerJS library PeerJS simplifies WebRTC peer-to-peer data, video, and audio calls. PeerJS wraps the browser's WebRTC implementation to provide a complete, configurable, and easy-to-use peer-to-peer connection API. Equipped with nothing but an ID, a peer can create a P2P data or media stream connection to a remote peer. Downloads Setup Include the library with a script tag <script src="https://
このエントリは ドワンゴ Advent Calendar の21日目の記事です。あと4日!完走できるといいですね。 前々から、技術的にはできるはずだよなーと思っていたものを、Advent Calendar 駆動で作った話をします。ちなみに作者はドワンゴに所属しておりますが、あくまでも個人として開発をしましたので、開発されたものはドワンゴとは無関係です。 作ったもの 表題のとおり、ブラウザだけでニコ生の生主に凸できる Chrome Extension です。生主と視聴者の両者がこの拡張を Chrome にインストールしていれば、それ以外のものは一切不要で生主に凸ができます。 生主側の画面の例をいくつか貼っておきます。 歴史的経緯 もともとニコ生には、ニコ電という生主と視聴者が会話できるシステムがありました。しかしながらこのシステムは、視聴者側が携帯電話を使って電話を掛けることになるため通話料
こんにちは! がねこまさしです。これから数回に渡って、WebRTCについて書かせていただきます。 内容は2013年10月にNode学園祭2013で発表したプレゼンを、再構成したものになる予定です。 ※こちらの記事は2014年に書かれました。2016年6月現在のアップデート記事がありますので、そちらもご参照ください。 WebRTCとは? WebRTCとは”Web Real-Time Communication”の略で、Webブラウザ上でビデオ/オーディオの通信や、データ通信を行うための規格です。HTML5で新しく策定されたもので、複数の技術の連携で成り立っています。 ちなみに策定には複数の団体が絡んでいています。 API → WWW ビデオ/オーディオのコーデック → IETF WebRTCで何ができるの? WebRTCには大きく分けて2つの要素があります。 カメラ、マイクといったメディアへ
ずっと興味はあったし、追っていたんですが手は出せていなかったWebRTCについてやっと学ぶことが出来ました。 ハイパフォーマンス ブラウザネットワーキング ―ネットワークアプリケーションのためのパフォーマンス最適化 作者: Ilya Grigorik,和田祐一郎,株式会社プログラミングシステム社出版社/メーカー: オライリージャパン発売日: 2014/05/16メディア: 大型本この商品を含むブログ (2件) を見る ハイパフォーマンスブラウザネットワーキングという本(以下、HPBN)がありまして、会社の中で輪読会していました。みんなで一つの章を担当しながら話すというスタイルでやっていました。 そこで僕が紹介したWebRTCの話です。 基本的にWebRTCの中でやっていることを深く説明した資料になっています。 HPBNの資料だけで分からなかったところはWebRTCミートアップの資料や先人た
マイクから音声を取得(音声録音)して、音声再生する復唱アプリ「Kiri!Talk」をWebRTCとWeb Audio APIを使って開発しました。 WebRTCは、ブラウザ間でボイスチャット、ビデオチャット、ファイル共有ができ、Web Audio APIは、音声データを色々加工することができます。 JavaScriptのみで簡単にこんな処理ができるなんてすごい時代になったと思いつつ、勉強がてらアプリを作ったという経緯です。 まだ一部ブラウザしか対応していませんが、後々はスマホ等携帯端末のブラウザにも対応して、ブラウザのみで何でもできる時代が来るのではと期待しています。 今回は、作ったアプリで音声録音と音声再生を行ったので、その処理方法を説明します。 ただ、勉強がてら作ったので「まぁ動いたからいいや」というレベルで、ちょっと不明点ややっつけのままコードを書いた箇所があります。 ので、
さてさて、東京Node学園 13時限目を開催しました。 今回はSocket.IO v1.0がリリースされたため、それの話をメインに。 後はLTでは、social-cms-backendの話、titaniumの話、gulpの話、chest.jsの話をしてもらいました。 togetterはこちら 東京Node学園13時限目 - Togetterまとめ Socket.IO v1.0 introduction というわけで、自分の発表資料。engine.ioの解説からbinary supportの話、scalabilityの話、socket.io-emitterの話と細かなTipsについて広く浅くをメインに説明しました。 Binary support ってことで、カメラから画像を取得してbroadcastするアプリを作り、それのDEMOをしてみました。 URL公開しておくので、試しにみてみたい方は
今日のポストはWebRTCについて。Webでリアルタイム通信サービスを実現するためのAPIです。ブラウザで、plug-inを使わずにテレビ電話サービスを作ることが出来るようになります。 WebRTCってなーに? WebRTCのプロジェクトページの冒頭で、WebRTCを以下のように定義しています。 WebRTC is a free, open project that enables web browsers with Real-Time Communications (RTC) capabilities via simple Javascript APIs. The WebRTC components have been optimized to best serve this purpose. ベタに訳すると「WebRTCはオープンなプロジェクトです。簡単な複数の Javascript
$('#example').photobooth().on("image",function( event, dataUrl ){ $( "#gallery" ).append( '<img src="' + dataUrl + '" >'); }); container = document.getElementById( "example" ); gallery = document.getElementById( "gallery" ); myPhotobooth = new Photobooth( container ); myPhotobooth.onImage = function( dataUrl ){ var myImage = document.createElement( "img" ); myImage.src = dataUrl; gallery.appendChi
What is it? SimpleCV is an open source framework for building computer vision applications. With it, you get access to several high-powered computer vision libraries such as OpenCV – without having to first learn about bit depths, file formats, color spaces, buffer management, eigenvalues, or matrix versus bitmap storage. This is computer vision made easy. from SimpleCV import Camera # Initialize
最近のブラウザはgetUserMediaという機能でJavaScriptからカメラを操作してリアルタイムに動画を読んだりできるようなので、画像認識のデモ的なものを作ってみた。 表紙検索 PCのGoogle Chrome、Opera、AndroidのOpera Mobileの場合 動画が読めるといっても実際のところ一部のブラウザでしか使えなかったので段階的に対応してみた。 まず、PCのGoogle ChromeとOpera、AndroidのOpera Mobileの最新バージョンが全ての機能が使えるブラウザです。 これらのブラウザで hyoushi.me というドメインを開くと、サイトのトップに「カメラ起動」というでかいボタンが表示されています。 IS05 + Opera Mobile (僕はウェブカメラを持っていないのでこれはIS05 + Opera Mobileのキャプチャです) カメラ
HTML5の味見しちゃうよ(1) Web RTC、Face.jsとJSARToolkitのお味は? シーエー・モバイル 市川 未吏 2012/5/11 Web RTC、Face.jsとJSARToolkitを試した。JavaScriptを使って、Webカメラで顔認識とARをしよう HTML5とか勉強会の分科会発足! 日々めまぐるしい進化を遂げているWebの世界。その世界に身を置き、興味を惹かれるものは多々あれど、なかなか実践するのは難しいものです。私ももちろん、例外ではありません。 Web先端技術味見部は、気になるあの技術をどこよりも早く取り上げる勉強会です。10人前後の少人数の参加者全員で、気になるフレームワークやAPIなどを味見していきます。 先日開催された、その第0回、第1回の様子を以下にお伝えします。 その名もWeb最先端技術味見部 最初に取り上げたのは「Web RTC」。Web
You are here Face detection using HTML5, javascript, webrtc, websockets, Jetty and OpenCV Through HTML5 and the corresponding standards, modern browsers get more standarized features with every release. Most people have heard of websockets that allows you to easily setup a two way communication channel with a server, but one of the specifications that hasn't been getting much coverage is the webrt
http://mohayonao.herokuapp.com/theremin WebRTCを使えばJavaScriptからWebカメラとか使えるらしいので、自然の成り行きとしてテルミンを作ってみた。Google Chrome Canary buildで使える。 Google Chrome Canary buildじゃない人(普通のChrome, FireFoxを使っている人)にはFlash経由で動くやつを用意した。これは jQueryのプラグイン を使っている。ただし激重。 カメラを起動して右手で音程、左手で音量を操作できる。手の位置の検出はWebWorkerを使って行っている。RGBをHSVに変換してから各ピクセルごとに肌色判定して肌色の集まっているあたりが手だろうという超手抜き処理。 楽器としては致命的に反応が鈍い。悲しい。 Flashのカメラは事前にカメラを使って良いか許可が必要だ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く