SlideShare a Scribd company logo
Chromebook 「だけ」で
WebRTCを動かそう
2015.03.11
インフォコム株式会社
がねこまさし
@massie_g
Chromebook で WebRTC
• Chrome動く
• カメラ、マイクついている
• getUserMeida()できる
• PeerConnectionも使える
• USBカメラも認識する
WebRTC端末として使える
※WebRTC Conference Japan のLTでも言及
– 実際に遠隔作業支援にWebRTCを使ってみた
– http://www.slideshare.net/hondahiroyuki/web-rtc-con
Chromebook 「だけ」で WebRTC
• どんなとき?
– ネットワークにつながらなくても、デモしたい!
問題1: Webサーバー
• 問題1
– getUserMedia()は、file:// では使えない
→ http:// にはWebサーバーが必要
Webサーバー
マッチョな対策
• Chromebookを開発者モードに変更
– 時間かかります
– 初期化されます
– セキュリティ警告多発します
• crouton を導入
– Crouton Integration Chrome Extensionを使うと、
Chrome OSのシェルと同居できるらしい
– http://www.softantenna.com/wp/hard/linux-
in-chrome-os/
• Linuxをインストール
※私は怖くなって、途中で引き返しました
別の方法を探す
• Chrome App というのがある
• Chrome.sockets.tcpServer というのが使える
– https://developer.chrome.com/apps/sockets_tcpS
erver
• なら、Webサーバーも作れるはず!
Webサーバー作りました
• Simple Web Server (Chrome ウェブストアで)
– 非常に簡易的なWebサーバー
– http://goo.gl/4sxGy9
静的なファイルを
数個だけホストできる
http://localhost:3000/
/page1.html ~ /page4.html
/script1.js, /script2.js
/sytle1.css, /style2.css
※こちらを参考にさせていだだきました。どうもありがとうございます!
Chrome Appsで簡易Webサーバ構築 http://blog.asial.co.jp/1267
Appインストールには
ネットワーク接続必要
です。あしからず
DEMO
• SWS 起動
• http://localhost:3000/ に Chromeでアクセス
• SWSの page1.html に、下記内容をコピー
– https://gist.github.com/mganeko/ee1f644b08fdca
6970ca
• http://localhost:3000/page1.html に Chrome
でアクセス
– Start video
ちなみに、もっと良さげなのもあります
• Web Server for Chrome
– http://goo.gl/LI63mj
問題2:シグナリング
• Peer-to-Peer通信の前に、情報交換が必要
– SDP, ICE candidate
• 手動(コピペ)で交換、という手もあるけど…
– http://html5experts.jp/mganeko/5181/
• 今回はWebSocketでやりたい
シグナリング
サーバー
Webサーバー
WebScoketサーバー作りました
• Simple Message Server (Chrome ウェブストアで)
– 非常に簡易的なWebSocketサーバー
– http://goo.gl/ekvQDy
簡易メッセージサーバー、
WebSocketサーバー
・5クライアントまで同時接続
・サーバーメッセージを送信す
ると、他のクライアントに配信
・テキストデータのみ対応
Appインストールには
ネットワーク接続必要
です。あしからず
参考にさせていただきました
どうもありがとうございます!
• Google のサンプル
– Chrome Commando TCP server
– https://github.com/GoogleChrome/chrome-app-
samples/tree/master/samples/tcpserver
• WebSocket サーバの実装とプロトコル解説 (by Jxckさん)
– http://jxck.hatenablog.com/entry/20120725/1343174392
– https://gist.github.com/Jxck/3171239
• RFC 6455 - The WebSocket Protocol (日本語訳)
– http://www.hcn.zaq.ne.jp/___/WEB/RFC6455-ja.html
Simple Message Serverの動き
• 3001/tcpで待ち受け
• Upgradeに対応
• メッセージを送ると、他のクライアントに転送
• 制約
– 対応するメッセージはテキストのみ
– メッセージ長は、16bitまで。64bitには未対応
– フラグメントの分割には未対応
クライアント側のコード抜粋
// WebSocketサーバーに接続
var url = 'ws://localhost:3001/';
var ws = new WebSocket(url);
// SDP送信
var msg = JSON.stringify(sessionDescription);
ws.send(msg);
// ICE Candidate送信
var candidate = {type: "candidate",
sdpMLineIndex: evt.candidate.sdpMLineIndex,
sdpMid: evt.candidate.sdpMid,
candidate: evt.candidate.candidate
};
var msg = JSON.stringify(candidate);
ws.send(msg);
クライアント側のコード抜粋2
ws.onmessage = onMessage;
// メッセージハンドラ
function onMessage(raw_evt) {
var msg = raw_evt.data;
var evt = JSON.parse(msg);
if (evt.type === 'offer') {
// SDP offerを受け取った場合
} else if (evt.type === 'answer' && peerStarted) {
// SDP answerを受け取った場合
} else if (evt.type === 'candidate' && peerStarted) {
// ICE candidate を受け取った場合
}
}
DEMO
• SWS 起動, SMS起動
• SWSのpage2.htmlに、次の内容をコピー
– https://gist.github.com/mganeko/4d0f84c383722
d1fb963
• http://localhost:3000/page2.html
– Chromeの2つのタブで開く
• 通信してみる
– Start video, Start video, Connect
問題3:NAT越え
• NAT越えには、STUN/TURNサーバーが必要
• Chrome.sockets.udp がある
• なら、これも作れるはず!
問題3:NAT越え
• NAT越えには、STUN/TURNサーバーが必要
• Chrome.sockets.udp がある
• なら、これも作れるはず!
→作りません!
今回はChromebook「だけ」なので、NAT越えは発生し
ない
※誰か挑戦してみませんか?
まとめ
• Chromebook「だけ」でWebRTC通信してみた
– Chrome Appを作成
– 簡易Webサーバー、簡易WebSocketサーバー
• もちろん、他のプラットフォームでも利用可能
– Windows, Mac OS X
• 一般的なサーバーアプリ、サーバ言語不要
– No IIS, No Apache, No Nginx, No python, No node.js
• WebRTC体験、ハンズオンにも最適
→ 社内勉強会などで、ぜひ使ってください!
おまけ
ちょっとサーバー側の
ソースを見てみましょう
Web サーバー
ソケット作成、待ち受け
// server
chrome.sockets.tcpServer.create({}, function(createInfo) {
// サーバ用のソケット
serverSocketId = createInfo.socketId;
// 3000番ポートをlisten
chrome.sockets.tcpServer.listen(serverSocketId, '0.0.0.0', 3000, function(resultCode){
if (resultCode < 0) {
console.log("Error listening:" + chrome.runtime.lastError.message);
}
});
});
// socket
chrome.sockets.tcpServer.onAccept.addListener(function(info) {
if (info.socketId === serverSocketId) {
chrome.sockets.tcp.setPaused(info.clientSocketId, false);
}
});
GET Requestの処理
chrome.sockets.tcp.onReceive.addListener(function(info) {
var requestText = ab2str(info.data);
var getpath = splitGetPath(requestText); // GET のパスを取得
var type = getMIMEType(getpath); // パスの拡張子から、MIMEタイプを推定
// --- make response ---
var socketId = info.socketId;
var message = getContentByPath(getpath); // 内容はchrome.storage.localに保存
var utf8message = unescape(encodeURIComponent(message)); // utf8に変換
var responseText = [
' HTTP/1.1 200 OK',
'Content-Type: ' + type,
'Content-Length: ' + utf8message.length,
'',
utf8message
].join("n");
// --- send response ---
chrome.sockets.tcp.send(socketId, str2ab(responseText), function(info) {
if (info.resultCode < 0) { console.log("Error:" + chrome.runtime.lastError.message); }
chrome.sockets.tcp.disconnect(socketId); // 成功しても、すぐに切断する
chrome.sockets.tcp.close(socketId);
});
});
WebSokcet サーバー
コードの一部:データ長16bitまで対応
/**
* Payload Length
* xaaa aaaa second byte
* 0111 1111 mask with 0x7f
* ---------
* 0000 0100 4(4)
* 0111 1110 126(next UInt16)
* 0111 1111 127(next UInt64)
*/
var payloadLength = (secondByte & 0x7f); // 0x00~0x7c → その7bit値が長さ
if (payloadLength === 0x7e) { // 0x7e → 続く16bit値が長さ
console.log('next 16bit is length');
payloadLength = dataView.getUint16(dataOffset);
dataOffset += 2;
}
if (payloadLength === 0x7f) { // 0x7f → 続く64bit値が長さ
console.error('next 64bit is length but not supported');
}
コードの一部:mask処理の可変長対応
var maskingArray = new Uint8Array( [
dataView.getUint8(dataOffset),
dataView.getUint8(dataOffset+1),
dataView.getUint8(dataOffset+2),
dataView.getUint8(dataOffset+3)
]);
dataOffset += 4;
for(payloadIndex = 0, maskOffset=0; payloadIndex < payloadLength;
payloadIndex++, maskOffset = (maskOffset + 1) % 4) { // maskを4バイト毎に繰返す
var applicationByte = dataView.getUint8(dataOffset + payloadIndex);
/**
* unmask the data
* application data XOR mask
*/
var unmaskedByte = applicationByte ^ maskingArray[maskOffset];
applicationText += String.fromCharCode( unmaskedByte );
}
END
ありがとうございました!

More Related Content

What's hot

JIRA / Confluence の 必須プラグインはこれだ
JIRA / Confluence の必須プラグインはこれだJIRA / Confluence の必須プラグインはこれだ
JIRA / Confluence の 必須プラグインはこれだ
Narichika Kajihara
 
【CEDEC2013】20対20リアルタイム通信対戦オンラインゲームのサーバ開発&運営技法
【CEDEC2013】20対20リアルタイム通信対戦オンラインゲームのサーバ開発&運営技法【CEDEC2013】20対20リアルタイム通信対戦オンラインゲームのサーバ開発&運営技法
【CEDEC2013】20対20リアルタイム通信対戦オンラインゲームのサーバ開発&運営技法
モノビット エンジン
 
Unityネットワーク通信の基盤である「RPC」について、意外と知られていないボトルネックと、その対策法
Unityネットワーク通信の基盤である「RPC」について、意外と知られていないボトルネックと、その対策法Unityネットワーク通信の基盤である「RPC」について、意外と知られていないボトルネックと、その対策法
Unityネットワーク通信の基盤である「RPC」について、意外と知られていないボトルネックと、その対策法
モノビット エンジン
 
大規模ゲーム開発における build 高速化と安定化
大規模ゲーム開発における build 高速化と安定化大規模ゲーム開発における build 高速化と安定化
大規模ゲーム開発における build 高速化と安定化
DeNA
 
Steam ゲーム内購入 サーバーサイド実装について
Steam ゲーム内購入 サーバーサイド実装についてSteam ゲーム内購入 サーバーサイド実装について
Steam ゲーム内購入 サーバーサイド実装について
KLab Inc. / Tech
 
MagicOnion入門
MagicOnion入門MagicOnion入門
MagicOnion入門
torisoup
 
Game Development on AWS (ゲーム開発環境を向上させるためのAWS活用術)
Game Development on AWS (ゲーム開発環境を向上させるためのAWS活用術)Game Development on AWS (ゲーム開発環境を向上させるためのAWS活用術)
Game Development on AWS (ゲーム開発環境を向上させるためのAWS活用術)
Amazon Web Services Japan
 
C#でもメタプログラミングがしたい!!
C#でもメタプログラミングがしたい!!C#でもメタプログラミングがしたい!!
C#でもメタプログラミングがしたい!!
TATSUYA HAYAMIZU
 
MagicOnion~C#でゲームサーバを開発しよう~
MagicOnion~C#でゲームサーバを開発しよう~MagicOnion~C#でゲームサーバを開発しよう~
MagicOnion~C#でゲームサーバを開発しよう~
torisoup
 
UE4 MultiPlayer Online Deep Dive 基礎編2 -Traveling- (historia様ご講演) #ue4dd
UE4 MultiPlayer Online Deep Dive 基礎編2 -Traveling-  (historia様ご講演)  #ue4ddUE4 MultiPlayer Online Deep Dive 基礎編2 -Traveling-  (historia様ご講演)  #ue4dd
UE4 MultiPlayer Online Deep Dive 基礎編2 -Traveling- (historia様ご講演) #ue4dd
エピック・ゲームズ・ジャパン Epic Games Japan
 
Next-generation MMORPG service architecture
Next-generation MMORPG service architectureNext-generation MMORPG service architecture
Next-generation MMORPG service architecture
Jongwon Kim
 
[CEDEC 2021] 運用中タイトルでも怖くない! 『メルクストーリア』におけるハイパフォーマンス・ローコストなリアルタイム通信技術の導入事例
[CEDEC 2021] 運用中タイトルでも怖くない! 『メルクストーリア』におけるハイパフォーマンス・ローコストなリアルタイム通信技術の導入事例[CEDEC 2021] 運用中タイトルでも怖くない! 『メルクストーリア』におけるハイパフォーマンス・ローコストなリアルタイム通信技術の導入事例
[CEDEC 2021] 運用中タイトルでも怖くない! 『メルクストーリア』におけるハイパフォーマンス・ローコストなリアルタイム通信技術の導入事例
Naoya Kishimoto
 
Deep-Dive into Scriptable Build Pipeline
Deep-Dive into Scriptable Build PipelineDeep-Dive into Scriptable Build Pipeline
Deep-Dive into Scriptable Build Pipeline
Haruto Otake
 
IL2CPPに関する軽い話
IL2CPPに関する軽い話IL2CPPに関する軽い話
IL2CPPに関する軽い話
Wooram Yang
 
脱Unity!? UE4でVR開発のここが変わった
脱Unity!? UE4でVR開発のここが変わった脱Unity!? UE4でVR開発のここが変わった
脱Unity!? UE4でVR開発のここが変わった
エピック・ゲームズ・ジャパン Epic Games Japan
 
CEDEC2019 大規模モバイルゲーム運用におけるマスタデータ管理事例
CEDEC2019 大規模モバイルゲーム運用におけるマスタデータ管理事例CEDEC2019 大規模モバイルゲーム運用におけるマスタデータ管理事例
CEDEC2019 大規模モバイルゲーム運用におけるマスタデータ管理事例
sairoutine
 
UE4 MultiPlayer Online Deep Dive 実践編2 (ソレイユ株式会社様ご講演) #UE4DD
UE4 MultiPlayer Online Deep Dive 実践編2 (ソレイユ株式会社様ご講演) #UE4DDUE4 MultiPlayer Online Deep Dive 実践編2 (ソレイユ株式会社様ご講演) #UE4DD
UE4 MultiPlayer Online Deep Dive 実践編2 (ソレイユ株式会社様ご講演) #UE4DD
エピック・ゲームズ・ジャパン Epic Games Japan
 
Unityでオンラインゲーム作った話
Unityでオンラインゲーム作った話Unityでオンラインゲーム作った話
Unityでオンラインゲーム作った話
torisoup
 
The Usage and Patterns of MagicOnion
The Usage and Patterns of MagicOnionThe Usage and Patterns of MagicOnion
The Usage and Patterns of MagicOnion
Yoshifumi Kawai
 
Unityで始めるバージョン管理 Git LFS 入門編
Unityで始めるバージョン管理 Git LFS 入門編Unityで始めるバージョン管理 Git LFS 入門編
Unityで始めるバージョン管理 Git LFS 入門編
NAKAOKU Takahiro
 

What's hot (20)

JIRA / Confluence の 必須プラグインはこれだ
JIRA / Confluence の必須プラグインはこれだJIRA / Confluence の必須プラグインはこれだ
JIRA / Confluence の 必須プラグインはこれだ
 
【CEDEC2013】20対20リアルタイム通信対戦オンラインゲームのサーバ開発&運営技法
【CEDEC2013】20対20リアルタイム通信対戦オンラインゲームのサーバ開発&運営技法【CEDEC2013】20対20リアルタイム通信対戦オンラインゲームのサーバ開発&運営技法
【CEDEC2013】20対20リアルタイム通信対戦オンラインゲームのサーバ開発&運営技法
 
Unityネットワーク通信の基盤である「RPC」について、意外と知られていないボトルネックと、その対策法
Unityネットワーク通信の基盤である「RPC」について、意外と知られていないボトルネックと、その対策法Unityネットワーク通信の基盤である「RPC」について、意外と知られていないボトルネックと、その対策法
Unityネットワーク通信の基盤である「RPC」について、意外と知られていないボトルネックと、その対策法
 
大規模ゲーム開発における build 高速化と安定化
大規模ゲーム開発における build 高速化と安定化大規模ゲーム開発における build 高速化と安定化
大規模ゲーム開発における build 高速化と安定化
 
Steam ゲーム内購入 サーバーサイド実装について
Steam ゲーム内購入 サーバーサイド実装についてSteam ゲーム内購入 サーバーサイド実装について
Steam ゲーム内購入 サーバーサイド実装について
 
MagicOnion入門
MagicOnion入門MagicOnion入門
MagicOnion入門
 
Game Development on AWS (ゲーム開発環境を向上させるためのAWS活用術)
Game Development on AWS (ゲーム開発環境を向上させるためのAWS活用術)Game Development on AWS (ゲーム開発環境を向上させるためのAWS活用術)
Game Development on AWS (ゲーム開発環境を向上させるためのAWS活用術)
 
C#でもメタプログラミングがしたい!!
C#でもメタプログラミングがしたい!!C#でもメタプログラミングがしたい!!
C#でもメタプログラミングがしたい!!
 
MagicOnion~C#でゲームサーバを開発しよう~
MagicOnion~C#でゲームサーバを開発しよう~MagicOnion~C#でゲームサーバを開発しよう~
MagicOnion~C#でゲームサーバを開発しよう~
 
UE4 MultiPlayer Online Deep Dive 基礎編2 -Traveling- (historia様ご講演) #ue4dd
UE4 MultiPlayer Online Deep Dive 基礎編2 -Traveling-  (historia様ご講演)  #ue4ddUE4 MultiPlayer Online Deep Dive 基礎編2 -Traveling-  (historia様ご講演)  #ue4dd
UE4 MultiPlayer Online Deep Dive 基礎編2 -Traveling- (historia様ご講演) #ue4dd
 
Next-generation MMORPG service architecture
Next-generation MMORPG service architectureNext-generation MMORPG service architecture
Next-generation MMORPG service architecture
 
[CEDEC 2021] 運用中タイトルでも怖くない! 『メルクストーリア』におけるハイパフォーマンス・ローコストなリアルタイム通信技術の導入事例
[CEDEC 2021] 運用中タイトルでも怖くない! 『メルクストーリア』におけるハイパフォーマンス・ローコストなリアルタイム通信技術の導入事例[CEDEC 2021] 運用中タイトルでも怖くない! 『メルクストーリア』におけるハイパフォーマンス・ローコストなリアルタイム通信技術の導入事例
[CEDEC 2021] 運用中タイトルでも怖くない! 『メルクストーリア』におけるハイパフォーマンス・ローコストなリアルタイム通信技術の導入事例
 
Deep-Dive into Scriptable Build Pipeline
Deep-Dive into Scriptable Build PipelineDeep-Dive into Scriptable Build Pipeline
Deep-Dive into Scriptable Build Pipeline
 
IL2CPPに関する軽い話
IL2CPPに関する軽い話IL2CPPに関する軽い話
IL2CPPに関する軽い話
 
脱Unity!? UE4でVR開発のここが変わった
脱Unity!? UE4でVR開発のここが変わった脱Unity!? UE4でVR開発のここが変わった
脱Unity!? UE4でVR開発のここが変わった
 
CEDEC2019 大規模モバイルゲーム運用におけるマスタデータ管理事例
CEDEC2019 大規模モバイルゲーム運用におけるマスタデータ管理事例CEDEC2019 大規模モバイルゲーム運用におけるマスタデータ管理事例
CEDEC2019 大規模モバイルゲーム運用におけるマスタデータ管理事例
 
UE4 MultiPlayer Online Deep Dive 実践編2 (ソレイユ株式会社様ご講演) #UE4DD
UE4 MultiPlayer Online Deep Dive 実践編2 (ソレイユ株式会社様ご講演) #UE4DDUE4 MultiPlayer Online Deep Dive 実践編2 (ソレイユ株式会社様ご講演) #UE4DD
UE4 MultiPlayer Online Deep Dive 実践編2 (ソレイユ株式会社様ご講演) #UE4DD
 
Unityでオンラインゲーム作った話
Unityでオンラインゲーム作った話Unityでオンラインゲーム作った話
Unityでオンラインゲーム作った話
 
The Usage and Patterns of MagicOnion
The Usage and Patterns of MagicOnionThe Usage and Patterns of MagicOnion
The Usage and Patterns of MagicOnion
 
Unityで始めるバージョン管理 Git LFS 入門編
Unityで始めるバージョン管理 Git LFS 入門編Unityで始めるバージョン管理 Git LFS 入門編
Unityで始めるバージョン管理 Git LFS 入門編
 

Similar to Chromebook 「だけ」で WebRTCを動かそう

これから利用拡大?WebSocket
これから利用拡大?WebSocketこれから利用拡大?WebSocket
これから利用拡大?WebSocket
AdvancedTechNight
 
Node.js x Headless Chrome for WeRTC MCU / Node.js x Chrome headless で、お手軽WebR...
Node.js x Headless Chrome for WeRTC MCU / Node.js x Chrome headless で、お手軽WebR...Node.js x Headless Chrome for WeRTC MCU / Node.js x Chrome headless で、お手軽WebR...
Node.js x Headless Chrome for WeRTC MCU / Node.js x Chrome headless で、お手軽WebR...
mganeko
 
Magic Leap で WebRTC 触ってみた
Magic Leap で WebRTC 触ってみたMagic Leap で WebRTC 触ってみた
Magic Leap で WebRTC 触ってみた
NishoMatsusita
 
Mvc conf session_5_isami
Mvc conf session_5_isamiMvc conf session_5_isami
Mvc conf session_5_isami
Hiroshi Okunushi
 
Webrtc bootcamp handson
Webrtc bootcamp handsonWebrtc bootcamp handson
Webrtc bootcamp handson
mganeko
 
クラウドサービスを使って作る動画サイト?
クラウドサービスを使って作る動画サイト?クラウドサービスを使って作る動画サイト?
クラウドサービスを使って作る動画サイト?
Daichi Isami
 
App012 linux java_にも対応!_azure_service_fabric_を
App012 linux java_にも対応!_azure_service_fabric_をApp012 linux java_にも対応!_azure_service_fabric_を
App012 linux java_にも対応!_azure_service_fabric_を
Tech Summit 2016
 
App012 linux java_にも対応!_azure_service_fabric_を
App012 linux java_にも対応!_azure_service_fabric_をApp012 linux java_にも対応!_azure_service_fabric_を
App012 linux java_にも対応!_azure_service_fabric_を
Tech Summit 2016
 
[Japan Tech summit 2017] DEP 005
[Japan Tech summit 2017] DEP 005[Japan Tech summit 2017] DEP 005
[Japan Tech summit 2017] DEP 005
Microsoft Tech Summit 2017
 
マルチクラウド環境でモビンギはどのようにコンテナを動かしているか
マルチクラウド環境でモビンギはどのようにコンテナを動かしているかマルチクラウド環境でモビンギはどのようにコンテナを動かしているか
マルチクラウド環境でモビンギはどのようにコンテナを動かしているか
Masafumi Noguchi
 
JavaScript And Keywords
JavaScript And KeywordsJavaScript And Keywords
JavaScript And Keywords
uupaa
 
サーバーの初歩的な話セミナー@大阪20120901
サーバーの初歩的な話セミナー@大阪20120901サーバーの初歩的な話セミナー@大阪20120901
サーバーの初歩的な話セミナー@大阪20120901
Masayuki Abe
 
WebSocket + Node.jsでつくるチャットアプリ
WebSocket + Node.jsでつくるチャットアプリWebSocket + Node.jsでつくるチャットアプリ
WebSocket + Node.jsでつくるチャットアプリ
Kohei Kadowaki
 
websocket-survery
websocket-surverywebsocket-survery
websocket-survery
hogemaru_
 
ブラウザからWeb OSへ〜Web - TV連携事例からその可能性を探る〜
ブラウザからWeb OSへ〜Web - TV連携事例からその可能性を探る〜ブラウザからWeb OSへ〜Web - TV連携事例からその可能性を探る〜
ブラウザからWeb OSへ〜Web - TV連携事例からその可能性を探る〜
Kensaku Komatsu
 
Dockerを使ったローカルでの開発から本番環境へのデプロイまで
Dockerを使ったローカルでの開発から本番環境へのデプロイまでDockerを使ったローカルでの開発から本番環境へのデプロイまで
Dockerを使ったローカルでの開発から本番環境へのデプロイまで
Ryo Nakamaru
 
PlayFramework1.2.4におけるWebSocket
PlayFramework1.2.4におけるWebSocketPlayFramework1.2.4におけるWebSocket
PlayFramework1.2.4におけるWebSocket
Kazuhiro Hara
 
Windows Azure for PHP Developers
Windows Azure for PHP DevelopersWindows Azure for PHP Developers
Windows Azure for PHP Developers
fumios
 
Let's begin WebRTC
Let's begin WebRTCLet's begin WebRTC
Let's begin WebRTC
yoshikawa_t
 

Similar to Chromebook 「だけ」で WebRTCを動かそう (20)

これから利用拡大?WebSocket
これから利用拡大?WebSocketこれから利用拡大?WebSocket
これから利用拡大?WebSocket
 
Node.js x Headless Chrome for WeRTC MCU / Node.js x Chrome headless で、お手軽WebR...
Node.js x Headless Chrome for WeRTC MCU / Node.js x Chrome headless で、お手軽WebR...Node.js x Headless Chrome for WeRTC MCU / Node.js x Chrome headless で、お手軽WebR...
Node.js x Headless Chrome for WeRTC MCU / Node.js x Chrome headless で、お手軽WebR...
 
Magic Leap で WebRTC 触ってみた
Magic Leap で WebRTC 触ってみたMagic Leap で WebRTC 触ってみた
Magic Leap で WebRTC 触ってみた
 
Mvc conf session_5_isami
Mvc conf session_5_isamiMvc conf session_5_isami
Mvc conf session_5_isami
 
10th jan 2013_miyazaki
10th jan 2013_miyazaki10th jan 2013_miyazaki
10th jan 2013_miyazaki
 
Webrtc bootcamp handson
Webrtc bootcamp handsonWebrtc bootcamp handson
Webrtc bootcamp handson
 
クラウドサービスを使って作る動画サイト?
クラウドサービスを使って作る動画サイト?クラウドサービスを使って作る動画サイト?
クラウドサービスを使って作る動画サイト?
 
App012 linux java_にも対応!_azure_service_fabric_を
App012 linux java_にも対応!_azure_service_fabric_をApp012 linux java_にも対応!_azure_service_fabric_を
App012 linux java_にも対応!_azure_service_fabric_を
 
App012 linux java_にも対応!_azure_service_fabric_を
App012 linux java_にも対応!_azure_service_fabric_をApp012 linux java_にも対応!_azure_service_fabric_を
App012 linux java_にも対応!_azure_service_fabric_を
 
[Japan Tech summit 2017] DEP 005
[Japan Tech summit 2017] DEP 005[Japan Tech summit 2017] DEP 005
[Japan Tech summit 2017] DEP 005
 
マルチクラウド環境でモビンギはどのようにコンテナを動かしているか
マルチクラウド環境でモビンギはどのようにコンテナを動かしているかマルチクラウド環境でモビンギはどのようにコンテナを動かしているか
マルチクラウド環境でモビンギはどのようにコンテナを動かしているか
 
JavaScript And Keywords
JavaScript And KeywordsJavaScript And Keywords
JavaScript And Keywords
 
サーバーの初歩的な話セミナー@大阪20120901
サーバーの初歩的な話セミナー@大阪20120901サーバーの初歩的な話セミナー@大阪20120901
サーバーの初歩的な話セミナー@大阪20120901
 
WebSocket + Node.jsでつくるチャットアプリ
WebSocket + Node.jsでつくるチャットアプリWebSocket + Node.jsでつくるチャットアプリ
WebSocket + Node.jsでつくるチャットアプリ
 
websocket-survery
websocket-surverywebsocket-survery
websocket-survery
 
ブラウザからWeb OSへ〜Web - TV連携事例からその可能性を探る〜
ブラウザからWeb OSへ〜Web - TV連携事例からその可能性を探る〜ブラウザからWeb OSへ〜Web - TV連携事例からその可能性を探る〜
ブラウザからWeb OSへ〜Web - TV連携事例からその可能性を探る〜
 
Dockerを使ったローカルでの開発から本番環境へのデプロイまで
Dockerを使ったローカルでの開発から本番環境へのデプロイまでDockerを使ったローカルでの開発から本番環境へのデプロイまで
Dockerを使ったローカルでの開発から本番環境へのデプロイまで
 
PlayFramework1.2.4におけるWebSocket
PlayFramework1.2.4におけるWebSocketPlayFramework1.2.4におけるWebSocket
PlayFramework1.2.4におけるWebSocket
 
Windows Azure for PHP Developers
Windows Azure for PHP DevelopersWindows Azure for PHP Developers
Windows Azure for PHP Developers
 
Let's begin WebRTC
Let's begin WebRTCLet's begin WebRTC
Let's begin WebRTC
 

More from mganeko

Google Meet でもバーチャル背景を使いたい (WebRTC Meetup Online)
Google Meet でもバーチャル背景を使いたい (WebRTC Meetup Online)Google Meet でもバーチャル背景を使いたい (WebRTC Meetup Online)
Google Meet でもバーチャル背景を使いたい (WebRTC Meetup Online)
mganeko
 
Amazon Kinesis Video Streams WebRTC 使ってみた
Amazon Kinesis Video Streams WebRTC 使ってみたAmazon Kinesis Video Streams WebRTC 使ってみた
Amazon Kinesis Video Streams WebRTC 使ってみた
mganeko
 
Build Node.js-WASM/WASI Tiny compiler with Node.js
Build Node.js-WASM/WASI Tiny compiler with Node.jsBuild Node.js-WASM/WASI Tiny compiler with Node.js
Build Node.js-WASM/WASI Tiny compiler with Node.js
mganeko
 
Node.jsでつくるNode.js ミニインタープリター&コンパイラー
Node.jsでつくるNode.js ミニインタープリター&コンパイラーNode.jsでつくるNode.js ミニインタープリター&コンパイラー
Node.jsでつくるNode.js ミニインタープリター&コンパイラー
mganeko
 
Skywayのビデオチャットを録画しよう。そう、ブラウザでね
Skywayのビデオチャットを録画しよう。そう、ブラウザでねSkywayのビデオチャットを録画しよう。そう、ブラウザでね
Skywayのビデオチャットを録画しよう。そう、ブラウザでね
mganeko
 
WebRTC mediasoup on raspberrypi3
WebRTC mediasoup on raspberrypi3WebRTC mediasoup on raspberrypi3
WebRTC mediasoup on raspberrypi3
mganeko
 
WebRTC SFU Mediasoup Sample update
WebRTC SFU Mediasoup Sample updateWebRTC SFU Mediasoup Sample update
WebRTC SFU Mediasoup Sample update
mganeko
 
ブラウザでWebRTC - iOSゲートウェイ作ってみた
ブラウザでWebRTC - iOSゲートウェイ作ってみたブラウザでWebRTC - iOSゲートウェイ作ってみた
ブラウザでWebRTC - iOSゲートウェイ作ってみた
mganeko
 
WebRTC SFU mediasoup sample
WebRTC SFU mediasoup sampleWebRTC SFU mediasoup sample
WebRTC SFU mediasoup sample
mganeko
 
Inside of 聖徳玉子 by O2
Inside of 聖徳玉子 by O2Inside of 聖徳玉子 by O2
Inside of 聖徳玉子 by O2
mganeko
 
Node.js with WebRTC DataChannel
Node.js with WebRTC DataChannelNode.js with WebRTC DataChannel
Node.js with WebRTC DataChannel
mganeko
 
WebRTC Build MCU on browser
WebRTC Build MCU on browserWebRTC Build MCU on browser
WebRTC Build MCU on browser
mganeko
 
PeerConnectionリレーとMediaRecorder
PeerConnectionリレーとMediaRecorderPeerConnectionリレーとMediaRecorder
PeerConnectionリレーとMediaRecorder
mganeko
 
ここがつらいよWebRTC - WebRTC開発の落とし穴
ここがつらいよWebRTC - WebRTC開発の落とし穴ここがつらいよWebRTC - WebRTC開発の落とし穴
ここがつらいよWebRTC - WebRTC開発の落とし穴
mganeko
 
WebRTC multitrack / multistream
WebRTC multitrack / multistreamWebRTC multitrack / multistream
WebRTC multitrack / multistream
mganeko
 
WebRTC UserMedia Catalog: いろんなユーザメディア(MediaStream)を使ってみよう
WebRTC UserMedia Catalog: いろんなユーザメディア(MediaStream)を使ってみようWebRTC UserMedia Catalog: いろんなユーザメディア(MediaStream)を使ってみよう
WebRTC UserMedia Catalog: いろんなユーザメディア(MediaStream)を使ってみよう
mganeko
 
WebRTC multistream
WebRTC multistreamWebRTC multistream
WebRTC multistream
mganeko
 
Inside WebM
Inside WebMInside WebM
Inside WebM
mganeko
 
MediaRecorder と WebM で、オレオレ Live Streaming
MediaRecorder と WebM で、オレオレ Live StreamingMediaRecorder と WebM で、オレオレ Live Streaming
MediaRecorder と WebM で、オレオレ Live Streaming
mganeko
 
Infocom webrtc conference japan
Infocom webrtc conference japanInfocom webrtc conference japan
Infocom webrtc conference japan
mganeko
 

More from mganeko (20)

Google Meet でもバーチャル背景を使いたい (WebRTC Meetup Online)
Google Meet でもバーチャル背景を使いたい (WebRTC Meetup Online)Google Meet でもバーチャル背景を使いたい (WebRTC Meetup Online)
Google Meet でもバーチャル背景を使いたい (WebRTC Meetup Online)
 
Amazon Kinesis Video Streams WebRTC 使ってみた
Amazon Kinesis Video Streams WebRTC 使ってみたAmazon Kinesis Video Streams WebRTC 使ってみた
Amazon Kinesis Video Streams WebRTC 使ってみた
 
Build Node.js-WASM/WASI Tiny compiler with Node.js
Build Node.js-WASM/WASI Tiny compiler with Node.jsBuild Node.js-WASM/WASI Tiny compiler with Node.js
Build Node.js-WASM/WASI Tiny compiler with Node.js
 
Node.jsでつくるNode.js ミニインタープリター&コンパイラー
Node.jsでつくるNode.js ミニインタープリター&コンパイラーNode.jsでつくるNode.js ミニインタープリター&コンパイラー
Node.jsでつくるNode.js ミニインタープリター&コンパイラー
 
Skywayのビデオチャットを録画しよう。そう、ブラウザでね
Skywayのビデオチャットを録画しよう。そう、ブラウザでねSkywayのビデオチャットを録画しよう。そう、ブラウザでね
Skywayのビデオチャットを録画しよう。そう、ブラウザでね
 
WebRTC mediasoup on raspberrypi3
WebRTC mediasoup on raspberrypi3WebRTC mediasoup on raspberrypi3
WebRTC mediasoup on raspberrypi3
 
WebRTC SFU Mediasoup Sample update
WebRTC SFU Mediasoup Sample updateWebRTC SFU Mediasoup Sample update
WebRTC SFU Mediasoup Sample update
 
ブラウザでWebRTC - iOSゲートウェイ作ってみた
ブラウザでWebRTC - iOSゲートウェイ作ってみたブラウザでWebRTC - iOSゲートウェイ作ってみた
ブラウザでWebRTC - iOSゲートウェイ作ってみた
 
WebRTC SFU mediasoup sample
WebRTC SFU mediasoup sampleWebRTC SFU mediasoup sample
WebRTC SFU mediasoup sample
 
Inside of 聖徳玉子 by O2
Inside of 聖徳玉子 by O2Inside of 聖徳玉子 by O2
Inside of 聖徳玉子 by O2
 
Node.js with WebRTC DataChannel
Node.js with WebRTC DataChannelNode.js with WebRTC DataChannel
Node.js with WebRTC DataChannel
 
WebRTC Build MCU on browser
WebRTC Build MCU on browserWebRTC Build MCU on browser
WebRTC Build MCU on browser
 
PeerConnectionリレーとMediaRecorder
PeerConnectionリレーとMediaRecorderPeerConnectionリレーとMediaRecorder
PeerConnectionリレーとMediaRecorder
 
ここがつらいよWebRTC - WebRTC開発の落とし穴
ここがつらいよWebRTC - WebRTC開発の落とし穴ここがつらいよWebRTC - WebRTC開発の落とし穴
ここがつらいよWebRTC - WebRTC開発の落とし穴
 
WebRTC multitrack / multistream
WebRTC multitrack / multistreamWebRTC multitrack / multistream
WebRTC multitrack / multistream
 
WebRTC UserMedia Catalog: いろんなユーザメディア(MediaStream)を使ってみよう
WebRTC UserMedia Catalog: いろんなユーザメディア(MediaStream)を使ってみようWebRTC UserMedia Catalog: いろんなユーザメディア(MediaStream)を使ってみよう
WebRTC UserMedia Catalog: いろんなユーザメディア(MediaStream)を使ってみよう
 
WebRTC multistream
WebRTC multistreamWebRTC multistream
WebRTC multistream
 
Inside WebM
Inside WebMInside WebM
Inside WebM
 
MediaRecorder と WebM で、オレオレ Live Streaming
MediaRecorder と WebM で、オレオレ Live StreamingMediaRecorder と WebM で、オレオレ Live Streaming
MediaRecorder と WebM で、オレオレ Live Streaming
 
Infocom webrtc conference japan
Infocom webrtc conference japanInfocom webrtc conference japan
Infocom webrtc conference japan
 

Recently uploaded

論文紹介:BAM-DETR: Boundary-Aligned Moment Detection Transformer for Temporal Sen...
論文紹介:BAM-DETR: Boundary-Aligned Moment Detection Transformer for Temporal Sen...論文紹介:BAM-DETR: Boundary-Aligned Moment Detection Transformer for Temporal Sen...
論文紹介:BAM-DETR: Boundary-Aligned Moment Detection Transformer for Temporal Sen...
Toru Tamaki
 
20240717_IoTLT_vol113_kitazaki_v1___.pdf
20240717_IoTLT_vol113_kitazaki_v1___.pdf20240717_IoTLT_vol113_kitazaki_v1___.pdf
20240717_IoTLT_vol113_kitazaki_v1___.pdf
Ayachika Kitazaki
 
Developer IO 2024 Odyssey SAMを応用したコンピュータビジョンの話
Developer IO 2024 Odyssey  SAMを応用したコンピュータビジョンの話Developer IO 2024 Odyssey  SAMを応用したコンピュータビジョンの話
Developer IO 2024 Odyssey SAMを応用したコンピュータビジョンの話
Shinichi Hirauchi
 
LoRaWAN AI Image Sensorエンドデバイス AIG01カタログ
LoRaWAN AI Image Sensorエンドデバイス AIG01カタログLoRaWAN AI Image Sensorエンドデバイス AIG01カタログ
LoRaWAN AI Image Sensorエンドデバイス AIG01カタログ
CRI Japan, Inc.
 
Imitation learning for robotics 勉強会資料(20240701)
Imitation learning for robotics 勉強会資料(20240701)Imitation learning for robotics 勉強会資料(20240701)
Imitation learning for robotics 勉強会資料(20240701)
Natsutani Minoru
 
【AI論文解説】LLMの事前学習をvisionに適用する手法Autoregressive Image Models
【AI論文解説】LLMの事前学習をvisionに適用する手法Autoregressive Image Models【AI論文解説】LLMの事前学習をvisionに適用する手法Autoregressive Image Models
【AI論文解説】LLMの事前学習をvisionに適用する手法Autoregressive Image Models
Sony - Neural Network Libraries
 
Matsuo-Iwasawa Lab. Research unit Introduction
Matsuo-Iwasawa Lab. Research unit IntroductionMatsuo-Iwasawa Lab. Research unit Introduction
Matsuo-Iwasawa Lab. Research unit Introduction
Matsuo Lab
 
論文紹介:Task-aligned Part-aware Panoptic Segmentation through Joint Object-Part ...
論文紹介:Task-aligned Part-aware Panoptic Segmentation through Joint Object-Part ...論文紹介:Task-aligned Part-aware Panoptic Segmentation through Joint Object-Part ...
論文紹介:Task-aligned Part-aware Panoptic Segmentation through Joint Object-Part ...
Toru Tamaki
 
"ros2rapper", Hardware implimentation of ROS2 communication Protocol without ...
"ros2rapper", Hardware implimentation of ROS2 communication Protocol without ..."ros2rapper", Hardware implimentation of ROS2 communication Protocol without ...
"ros2rapper", Hardware implimentation of ROS2 communication Protocol without ...
たけおか しょうぞう
 
Matsuo-Iwasawa lab. Research Unit Introduction
Matsuo-Iwasawa lab. Research Unit IntroductionMatsuo-Iwasawa lab. Research Unit Introduction
Matsuo-Iwasawa lab. Research Unit Introduction
Matsuo Lab
 
Matsuo-Iwasawa Lab. | Research unit Introduction
Matsuo-Iwasawa Lab. | Research unit IntroductionMatsuo-Iwasawa Lab. | Research unit Introduction
Matsuo-Iwasawa Lab. | Research unit Introduction
Matsuo Lab
 
最速の組織を目指して全社で大規模スクラムを導入してみた話 #dxd2024 #medicalforce
最速の組織を目指して全社で大規模スクラムを導入してみた話 #dxd2024 #medicalforce最速の組織を目指して全社で大規模スクラムを導入してみた話 #dxd2024 #medicalforce
最速の組織を目指して全社で大規模スクラムを導入してみた話 #dxd2024 #medicalforce
chisatotakane
 
Kyndryl Developer Services のご紹介 2024年7月
Kyndryl Developer Services のご紹介  2024年7月Kyndryl Developer Services のご紹介  2024年7月
Kyndryl Developer Services のご紹介 2024年7月
Takayuki Nakayama
 
【JSAI2024】J-NER大規模言語モデルのための固有表現認識における拡張固有表現階層を考慮したベンチマークデータセット.pdf
【JSAI2024】J-NER大規模言語モデルのための固有表現認識における拡張固有表現階層を考慮したベンチマークデータセット.pdf【JSAI2024】J-NER大規模言語モデルのための固有表現認識における拡張固有表現階層を考慮したベンチマークデータセット.pdf
【JSAI2024】J-NER大規模言語モデルのための固有表現認識における拡張固有表現階層を考慮したベンチマークデータセット.pdf
ARISE analytics
 
【AI論文解説】クラスタリングベースアプローチによる大規模データセット自動キュレーション
【AI論文解説】クラスタリングベースアプローチによる大規模データセット自動キュレーション【AI論文解説】クラスタリングベースアプローチによる大規模データセット自動キュレーション
【AI論文解説】クラスタリングベースアプローチによる大規模データセット自動キュレーション
Sony - Neural Network Libraries
 

Recently uploaded (15)

論文紹介:BAM-DETR: Boundary-Aligned Moment Detection Transformer for Temporal Sen...
論文紹介:BAM-DETR: Boundary-Aligned Moment Detection Transformer for Temporal Sen...論文紹介:BAM-DETR: Boundary-Aligned Moment Detection Transformer for Temporal Sen...
論文紹介:BAM-DETR: Boundary-Aligned Moment Detection Transformer for Temporal Sen...
 
20240717_IoTLT_vol113_kitazaki_v1___.pdf
20240717_IoTLT_vol113_kitazaki_v1___.pdf20240717_IoTLT_vol113_kitazaki_v1___.pdf
20240717_IoTLT_vol113_kitazaki_v1___.pdf
 
Developer IO 2024 Odyssey SAMを応用したコンピュータビジョンの話
Developer IO 2024 Odyssey  SAMを応用したコンピュータビジョンの話Developer IO 2024 Odyssey  SAMを応用したコンピュータビジョンの話
Developer IO 2024 Odyssey SAMを応用したコンピュータビジョンの話
 
LoRaWAN AI Image Sensorエンドデバイス AIG01カタログ
LoRaWAN AI Image Sensorエンドデバイス AIG01カタログLoRaWAN AI Image Sensorエンドデバイス AIG01カタログ
LoRaWAN AI Image Sensorエンドデバイス AIG01カタログ
 
Imitation learning for robotics 勉強会資料(20240701)
Imitation learning for robotics 勉強会資料(20240701)Imitation learning for robotics 勉強会資料(20240701)
Imitation learning for robotics 勉強会資料(20240701)
 
【AI論文解説】LLMの事前学習をvisionに適用する手法Autoregressive Image Models
【AI論文解説】LLMの事前学習をvisionに適用する手法Autoregressive Image Models【AI論文解説】LLMの事前学習をvisionに適用する手法Autoregressive Image Models
【AI論文解説】LLMの事前学習をvisionに適用する手法Autoregressive Image Models
 
Matsuo-Iwasawa Lab. Research unit Introduction
Matsuo-Iwasawa Lab. Research unit IntroductionMatsuo-Iwasawa Lab. Research unit Introduction
Matsuo-Iwasawa Lab. Research unit Introduction
 
論文紹介:Task-aligned Part-aware Panoptic Segmentation through Joint Object-Part ...
論文紹介:Task-aligned Part-aware Panoptic Segmentation through Joint Object-Part ...論文紹介:Task-aligned Part-aware Panoptic Segmentation through Joint Object-Part ...
論文紹介:Task-aligned Part-aware Panoptic Segmentation through Joint Object-Part ...
 
"ros2rapper", Hardware implimentation of ROS2 communication Protocol without ...
"ros2rapper", Hardware implimentation of ROS2 communication Protocol without ..."ros2rapper", Hardware implimentation of ROS2 communication Protocol without ...
"ros2rapper", Hardware implimentation of ROS2 communication Protocol without ...
 
Matsuo-Iwasawa lab. Research Unit Introduction
Matsuo-Iwasawa lab. Research Unit IntroductionMatsuo-Iwasawa lab. Research Unit Introduction
Matsuo-Iwasawa lab. Research Unit Introduction
 
Matsuo-Iwasawa Lab. | Research unit Introduction
Matsuo-Iwasawa Lab. | Research unit IntroductionMatsuo-Iwasawa Lab. | Research unit Introduction
Matsuo-Iwasawa Lab. | Research unit Introduction
 
最速の組織を目指して全社で大規模スクラムを導入してみた話 #dxd2024 #medicalforce
最速の組織を目指して全社で大規模スクラムを導入してみた話 #dxd2024 #medicalforce最速の組織を目指して全社で大規模スクラムを導入してみた話 #dxd2024 #medicalforce
最速の組織を目指して全社で大規模スクラムを導入してみた話 #dxd2024 #medicalforce
 
Kyndryl Developer Services のご紹介 2024年7月
Kyndryl Developer Services のご紹介  2024年7月Kyndryl Developer Services のご紹介  2024年7月
Kyndryl Developer Services のご紹介 2024年7月
 
【JSAI2024】J-NER大規模言語モデルのための固有表現認識における拡張固有表現階層を考慮したベンチマークデータセット.pdf
【JSAI2024】J-NER大規模言語モデルのための固有表現認識における拡張固有表現階層を考慮したベンチマークデータセット.pdf【JSAI2024】J-NER大規模言語モデルのための固有表現認識における拡張固有表現階層を考慮したベンチマークデータセット.pdf
【JSAI2024】J-NER大規模言語モデルのための固有表現認識における拡張固有表現階層を考慮したベンチマークデータセット.pdf
 
【AI論文解説】クラスタリングベースアプローチによる大規模データセット自動キュレーション
【AI論文解説】クラスタリングベースアプローチによる大規模データセット自動キュレーション【AI論文解説】クラスタリングベースアプローチによる大規模データセット自動キュレーション
【AI論文解説】クラスタリングベースアプローチによる大規模データセット自動キュレーション
 

Chromebook 「だけ」で WebRTCを動かそう

  • 2. Chromebook で WebRTC • Chrome動く • カメラ、マイクついている • getUserMeida()できる • PeerConnectionも使える • USBカメラも認識する WebRTC端末として使える ※WebRTC Conference Japan のLTでも言及 – 実際に遠隔作業支援にWebRTCを使ってみた – http://www.slideshare.net/hondahiroyuki/web-rtc-con
  • 3. Chromebook 「だけ」で WebRTC • どんなとき? – ネットワークにつながらなくても、デモしたい!
  • 4. 問題1: Webサーバー • 問題1 – getUserMedia()は、file:// では使えない → http:// にはWebサーバーが必要 Webサーバー
  • 5. マッチョな対策 • Chromebookを開発者モードに変更 – 時間かかります – 初期化されます – セキュリティ警告多発します • crouton を導入 – Crouton Integration Chrome Extensionを使うと、 Chrome OSのシェルと同居できるらしい – http://www.softantenna.com/wp/hard/linux- in-chrome-os/ • Linuxをインストール ※私は怖くなって、途中で引き返しました
  • 6. 別の方法を探す • Chrome App というのがある • Chrome.sockets.tcpServer というのが使える – https://developer.chrome.com/apps/sockets_tcpS erver • なら、Webサーバーも作れるはず!
  • 7. Webサーバー作りました • Simple Web Server (Chrome ウェブストアで) – 非常に簡易的なWebサーバー – http://goo.gl/4sxGy9 静的なファイルを 数個だけホストできる http://localhost:3000/ /page1.html ~ /page4.html /script1.js, /script2.js /sytle1.css, /style2.css ※こちらを参考にさせていだだきました。どうもありがとうございます! Chrome Appsで簡易Webサーバ構築 http://blog.asial.co.jp/1267 Appインストールには ネットワーク接続必要 です。あしからず
  • 8. DEMO • SWS 起動 • http://localhost:3000/ に Chromeでアクセス • SWSの page1.html に、下記内容をコピー – https://gist.github.com/mganeko/ee1f644b08fdca 6970ca • http://localhost:3000/page1.html に Chrome でアクセス – Start video
  • 10. 問題2:シグナリング • Peer-to-Peer通信の前に、情報交換が必要 – SDP, ICE candidate • 手動(コピペ)で交換、という手もあるけど… – http://html5experts.jp/mganeko/5181/ • 今回はWebSocketでやりたい シグナリング サーバー Webサーバー
  • 11. WebScoketサーバー作りました • Simple Message Server (Chrome ウェブストアで) – 非常に簡易的なWebSocketサーバー – http://goo.gl/ekvQDy 簡易メッセージサーバー、 WebSocketサーバー ・5クライアントまで同時接続 ・サーバーメッセージを送信す ると、他のクライアントに配信 ・テキストデータのみ対応 Appインストールには ネットワーク接続必要 です。あしからず
  • 12. 参考にさせていただきました どうもありがとうございます! • Google のサンプル – Chrome Commando TCP server – https://github.com/GoogleChrome/chrome-app- samples/tree/master/samples/tcpserver • WebSocket サーバの実装とプロトコル解説 (by Jxckさん) – http://jxck.hatenablog.com/entry/20120725/1343174392 – https://gist.github.com/Jxck/3171239 • RFC 6455 - The WebSocket Protocol (日本語訳) – http://www.hcn.zaq.ne.jp/___/WEB/RFC6455-ja.html
  • 13. Simple Message Serverの動き • 3001/tcpで待ち受け • Upgradeに対応 • メッセージを送ると、他のクライアントに転送 • 制約 – 対応するメッセージはテキストのみ – メッセージ長は、16bitまで。64bitには未対応 – フラグメントの分割には未対応
  • 14. クライアント側のコード抜粋 // WebSocketサーバーに接続 var url = 'ws://localhost:3001/'; var ws = new WebSocket(url); // SDP送信 var msg = JSON.stringify(sessionDescription); ws.send(msg); // ICE Candidate送信 var candidate = {type: "candidate", sdpMLineIndex: evt.candidate.sdpMLineIndex, sdpMid: evt.candidate.sdpMid, candidate: evt.candidate.candidate }; var msg = JSON.stringify(candidate); ws.send(msg);
  • 15. クライアント側のコード抜粋2 ws.onmessage = onMessage; // メッセージハンドラ function onMessage(raw_evt) { var msg = raw_evt.data; var evt = JSON.parse(msg); if (evt.type === 'offer') { // SDP offerを受け取った場合 } else if (evt.type === 'answer' && peerStarted) { // SDP answerを受け取った場合 } else if (evt.type === 'candidate' && peerStarted) { // ICE candidate を受け取った場合 } }
  • 16. DEMO • SWS 起動, SMS起動 • SWSのpage2.htmlに、次の内容をコピー – https://gist.github.com/mganeko/4d0f84c383722 d1fb963 • http://localhost:3000/page2.html – Chromeの2つのタブで開く • 通信してみる – Start video, Start video, Connect
  • 18. 問題3:NAT越え • NAT越えには、STUN/TURNサーバーが必要 • Chrome.sockets.udp がある • なら、これも作れるはず! →作りません! 今回はChromebook「だけ」なので、NAT越えは発生し ない ※誰か挑戦してみませんか?
  • 19. まとめ • Chromebook「だけ」でWebRTC通信してみた – Chrome Appを作成 – 簡易Webサーバー、簡易WebSocketサーバー • もちろん、他のプラットフォームでも利用可能 – Windows, Mac OS X • 一般的なサーバーアプリ、サーバ言語不要 – No IIS, No Apache, No Nginx, No python, No node.js • WebRTC体験、ハンズオンにも最適 → 社内勉強会などで、ぜひ使ってください!
  • 22. ソケット作成、待ち受け // server chrome.sockets.tcpServer.create({}, function(createInfo) { // サーバ用のソケット serverSocketId = createInfo.socketId; // 3000番ポートをlisten chrome.sockets.tcpServer.listen(serverSocketId, '0.0.0.0', 3000, function(resultCode){ if (resultCode < 0) { console.log("Error listening:" + chrome.runtime.lastError.message); } }); }); // socket chrome.sockets.tcpServer.onAccept.addListener(function(info) { if (info.socketId === serverSocketId) { chrome.sockets.tcp.setPaused(info.clientSocketId, false); } });
  • 23. GET Requestの処理 chrome.sockets.tcp.onReceive.addListener(function(info) { var requestText = ab2str(info.data); var getpath = splitGetPath(requestText); // GET のパスを取得 var type = getMIMEType(getpath); // パスの拡張子から、MIMEタイプを推定 // --- make response --- var socketId = info.socketId; var message = getContentByPath(getpath); // 内容はchrome.storage.localに保存 var utf8message = unescape(encodeURIComponent(message)); // utf8に変換 var responseText = [ ' HTTP/1.1 200 OK', 'Content-Type: ' + type, 'Content-Length: ' + utf8message.length, '', utf8message ].join("n"); // --- send response --- chrome.sockets.tcp.send(socketId, str2ab(responseText), function(info) { if (info.resultCode < 0) { console.log("Error:" + chrome.runtime.lastError.message); } chrome.sockets.tcp.disconnect(socketId); // 成功しても、すぐに切断する chrome.sockets.tcp.close(socketId); }); });
  • 25. コードの一部:データ長16bitまで対応 /** * Payload Length * xaaa aaaa second byte * 0111 1111 mask with 0x7f * --------- * 0000 0100 4(4) * 0111 1110 126(next UInt16) * 0111 1111 127(next UInt64) */ var payloadLength = (secondByte & 0x7f); // 0x00~0x7c → その7bit値が長さ if (payloadLength === 0x7e) { // 0x7e → 続く16bit値が長さ console.log('next 16bit is length'); payloadLength = dataView.getUint16(dataOffset); dataOffset += 2; } if (payloadLength === 0x7f) { // 0x7f → 続く64bit値が長さ console.error('next 64bit is length but not supported'); }
  • 26. コードの一部:mask処理の可変長対応 var maskingArray = new Uint8Array( [ dataView.getUint8(dataOffset), dataView.getUint8(dataOffset+1), dataView.getUint8(dataOffset+2), dataView.getUint8(dataOffset+3) ]); dataOffset += 4; for(payloadIndex = 0, maskOffset=0; payloadIndex < payloadLength; payloadIndex++, maskOffset = (maskOffset + 1) % 4) { // maskを4バイト毎に繰返す var applicationByte = dataView.getUint8(dataOffset + payloadIndex); /** * unmask the data * application data XOR mask */ var unmaskedByte = applicationByte ^ maskingArray[maskOffset]; applicationText += String.fromCharCode( unmaskedByte ); }