More Related Content Similar to HTML5によるリアルタイムコミュニケーション WebRTCの概説 Similar to HTML5によるリアルタイムコミュニケーション WebRTCの概説 (20) 13. HTML5 = HTML5 + CSS + JS
広義
狭義 マークアップ言語の仕様
従来のHTMLの改訂
新しいAPIも含まれる
バズワード(マーケティング用語)
26. OSの機能をWebに
OSの機能が、ブラウザを介してサイト
に提供される
アドレス帳 ネットワーク情報 バッテリー状態 通知
ストリーム メディアデータ オーディオ ビデオ 字幕
Webカメラ マイク Audioの波形操作
2D(ラスター,ベクター) 3DCG 音声入力 音声合成
暗号化 ファイルシステム データベース スレッド
通信(WebSocket,TCP,UDP) Bluetooth
加速度センサ 傾きセンサ ジャイロ バイブレーション
GPS 電子コンパス 温度センサ 湿度センサ 気圧センサ
環境光センサ 近接センサ 磁気センサ etc.
ネット接続が前提のもの・仕様策定中のもの・WebOS向けのものも含まれています。
42. キャリア型通信 Over The Top Webブラウザ型
手段の例
市場
ユーザ
メリット
事業者
メリット
利用方法
固定電話
携帯電話
(TV放送)
Skype, WebEx
(Youtube,
Ustream)
WebRTC
インフラを持つ
キャリアが支配
キャリアに縛られない
独自の仕組みを提供
する少数のベンダー
が参加可能
特別な仕組みは不要
誰でも参加可能
世界中の人と
会話できる
世界中の人と無料/
安価で会話できる
専用アプリ無しで
会話できる
×
限定的なAPI提供
一部連携可能
完全にプログラマブル
部品として利用可能
単独で利用
ユーザが組み合わせて
利用
製品/サービスに
組み込んで利用
http://www.slideshare.net/mganeko/2013-web-rtctechcross/6 を改変して引用
44. Media Capture and Streams
(getUserMesia)
ブラウザからマイクやカメラにアクセス
利用範囲はWebRTC以外とも
音声処理(with Web Audio API)
ボイスチェンジャー etc.
画像処理(with Canvas)
顔検出 etc.
顔認識ができるようになるのも時間の問題か?
47. <!DOCTYPE html>
<video id="video" />
<script>
navigator.getUserMedia(
{video: true, audio: true},
function(stream) {
var video = document
.getElementById('video');
video.src = window.URL
.createObjectURL(stream);
video.play();
}
);
</script>
解説用に書いたコードです。 ベンダープレフィックスがないため動きません。
48. <!DOCTYPE html>
<video id="video" />
<script>
navigator.getUserMedia(
{video: true, audio: true},
function(stream) {
var video = document
.getElementById('video');
video.src = window.URL
.createObjectURL(stream);
video.play();
}
);
</script>
解説用に書いたコードです。 ベンダープレフィックスがないため動きません。
ビデオ要素の表示と
Script要素
49. <!DOCTYPE html>
<video id="video" />
<script>
navigator.getUserMedia(
{video: true, audio: true},
function(stream) {
var video = document
.getElementById('video');
video.src = window.URL
.createObjectURL(stream);
video.play();
}
);
</script>
解説用に書いたコードです。 ベンダープレフィックスがないため動きません。
ユーザメディアの取得開始
50. <!DOCTYPE html>
<video id="video" />
<script>
navigator.getUserMedia(
{video: true, audio: true},
function(stream) {
var video = document
.getElementById('video');
video.src = window.URL
.createObjectURL(stream);
video.play();
}
);
</script>
解説用に書いたコードです。 ベンダープレフィックスがないため動きません。
取得するユーザメディアは
カメラとマイク
51. <!DOCTYPE html>
<video id="video" />
<script>
navigator.getUserMedia(
{video: true, audio: true},
function(stream) {
var video = document
.getElementById('video');
video.src = window.URL
.createObjectURL(stream);
video.play();
}
);
</script>
解説用に書いたコードです。 ベンダープレフィックスがないため動きません。
ユーザメディア取得時の動作を指定
52. <!DOCTYPE html>
<video id="video" />
<script>
navigator.getUserMedia(
{video: true, audio: true},
function(stream) {
var video = document
.getElementById('video');
video.src = window.URL
.createObjectURL(stream);
video.play();
}
);
</script>
解説用に書いたコードです。 ベンダープレフィックスがないため動きません。
ビデオ要素の取得
ユーザメディアの指定
再生開始
53. <!DOCTYPE html>
<video id="video" />
<script>
navigator.getUserMedia(
{video: true, audio: true},
function(stream) {
var video = document
.getElementById('video');
video.src = window.URL
.createObjectURL(stream);
video.play();
}
);
</script>
解説用に書いたコードです。 ベンダープレフィックスがないため動きません。
