9. キャリア型通信 Over The Top Webブラウザ型
手段の例
市場
ユーザ
メリット
事業者
メリット
利用方法
固定電話
携帯電話
(TV放送)
Skype, WebEx
(Youtube,
Ustream)
WebRTC
インフラを持つ
キャリアが支配
キャリアに縛られない
独自の仕組みを提供
する少数のベンダー
が参加可能
特別な仕組みは不要
誰でも参加可能
世界中の人と
会話できる
世界中の人と無料/
安価で会話できる
専用アプリ無しで
会話できる
×
限定的なAPI提供
一部連携可能
完全にプログラマブル
部品として利用可能
単独で利用
ユーザが組み合わせて
利用
製品/サービスに
組み込んで利用
http://www.slideshare.net/mganeko/2013-web-rtctechcross/6 を改変して引用
11. Media Capture and Streams
(getUserMedia)
ブラウザからマイクやカメラにアクセス
利用範囲はWebRTC以外とも
音声処理(with Web Audio API)
ボイスチェンジャー etc.
画像処理(with Canvas)
顔検出 etc.
顔認識ができるようになるのも時間の問題か?
14. <!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>
解説用に書いたコードです。 ベンダープレフィックスがないため動きません。
15. <!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要素
16. <!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>
解説用に書いたコードです。 ベンダープレフィックスがないため動きません。
ユーザメディアの取得開始
17. <!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>
解説用に書いたコードです。 ベンダープレフィックスがないため動きません。
取得するユーザメディアは
カメラとマイク
18. <!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>
解説用に書いたコードです。 ベンダープレフィックスがないため動きません。
ユーザメディア取得時の動作を指定
19. <!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>
解説用に書いたコードです。 ベンダープレフィックスがないため動きません。
ビデオ要素の取得
ユーザメディアの指定
再生開始
20. <!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>
解説用に書いたコードです。 ベンダープレフィックスがないため動きません。
