SlideShare a Scribd company logo
WebRTC
multi-track / multi-stream
挙動から見たブラウザの現状
2015.09.29
インフォコム
がねこまさし(我如古正志)
@massie_g
いきなり余談
懺悔 (1) setRemoteDescription()問題
• peer.setRemoteDescript()は非同期実行
– 直後にcreateAnswer()するとエラーになることがある
– Chromeでは経験したことはないが、Firefoxでは時々発生
// NG
peer.setRemoteDescription(offer);
peer.createAnswer( ... );
//OK
peer.setRemoteDescription(offer,
function (evt) {
peer.createAnswer( ... );
},
function (err) { … }
);
※私のHTML5Experts.jpの記事はコールバックになってません
※こっちは修正済です
• https://lab.infocom.co.jp/demo/webrtc-hand-signaling-easy.html
懺悔 (2) onnegotiationneeded()問題
• 前回「onnegotiationneeded()は無視してます」と言ったら怒られた
• その後、発火タイミングが FirefoxもChromeと同じになった
– 接続確立前も peer.addStream(localStream) で発火
• createDataChannel()でも??
• ケース1: 接続確立前
– peer.localDescription の有無で判断
– 確立前(localDescription無し)なら、何もしない
• 自分がOffer側になるか、Answer側になるか決まっていないので
• ケース2: 接続確立後
– Offer側か、Answer側かを判断
• peer.localDescription.type
– Offer側なら
• peer.createOffer()  send Offer
– Answer側なら
• request Offer
• Offer側で peer.createOffer()  send Offer
• Answer側で peer.createAnswer() → send Answer
懺悔 (3) revokeObjectURL()未使用
• URL取得
– video.src = window.URL.createObjectURL(stream);
• URL解放
– window.URL.rekoveObjectURL(video.src);
※おそらく、Single Page Application なら明示的
に開放した方が良い
本題
• multi-track について
• Firefox のmulti-stream について
• Chrome 45.0.2454.85
• Firefox 40.0.3
JavaScript APIから見た
PeerConnectionとMedia階層
RTCPeerConnection
MediaStream
MediaStream
MediaStream
MediaStreamTrack
MediaStreamTrack
MediaStreamTrack
MediaStreamTrack
videoTracks[] audioTracks[]
DataChannel
N個
N個
DataChannel
N個
複数のMediaを使う手段
• 1 アプリに、複数 PeerConnection
– 複数人のケースと同じ
• 1 PeerConnection に、複数 MediaStream
– 前回検証した範囲
• 1 MediaStream に、複数MediaStreamTrack
– 今回の中心
WebRTC周辺APIの微妙なところ
Chrome Firefox
Media Capture and Streams
http://www.w3.org/TR/mediacapture-streams/ ○ △
WebRTC 1.0:
Real-time Communication Between Browsers
http://w3c.github.io/webrtc-pc/ △ ○
MediaDevices
× ○
MediaStream Recording
http://www.w3.org/TR/mediastream-recording/ × ○
Chrome addTrack / removeTrack
• メソッド
– MediaStream.addTrack(track)
• video/audio トラックを追加
– MediaStream.removeTrack(track)
• video/audio トラックを除去
– MediaStream.getVideoTracks() / getAudioTracks()
– MediaStream.getTracks()
• イベント
– MediaStream.onaddtrack() / onremovetrack ()
• SDP再交換後、remoteStreamで発火
Offer側 addTrack() / removeTrack()
Peer BPeer A
createOffer()
Peer-to-Peer
offer SDPsetLocalDescription()
setLocalDescription()answer SDP
setRemoteDescription()
createAnswer()
setRemoteDescription()
onaddtrack() 発火
localStream remoteStream remoteStream localStream
addTrack(track)
※onnegotiationneeded()は発火しない
※localStream.onaddtrack()は発火しない
onaddtrack()後、trackの再生まで
• onaddtrack(event)
– var track = event.track;
• URL.createObjectURL(stream)は、最初のトラックしか対
応していない
– × URL.createObjectURL(stream, trackId);
– × URL.createObjectURL(stream, trackIndex);
– × URL.createObjectURL(track);
• 臨時のMedaiSteramを生成して利用
– var tempStream = new MediaStream();
– tempStream.addTrack(track);
– video.src = window.URL.createObjectURL(tempStream)
Answer側 addTrack() / removeTrack()
Peer BPeer A
createOffer()
Peer-to-Peer
offer SDPsetLocalDescription()
setLocalDescription()answer SDP
setRemoteDescription()
createAnswer()
setRemoteDescription()
onaddtrack() 発火
localStream remoteStream remoteStream localStream
addTrack(track)
※onnegotiationneeded()は発火しない
※localStream.onaddtrack()は発火しない
request offer
Firefox addTrack / removeTrack
• メソッド
– MediaStream.addTrack() / removeTrack()は無い
– mozRTCPeerConnection.addTrack()/removeTrack()がある!
• WebRTC 1.0 の仕様
– var sender = peerConnection.addTrack(track, stream);
• sender: RTCRtpSender
– peerConnection.removeTrack(sender);
• イベント:addTrack()側
– mozRTCPeerConnection.onnegotiationneeded()発火
• イベント:相手側
– SDP再交換後 → mozRTCPeerConnection.onaddstream() 発火
• 相手には、新たなmediastreamとして見える → multi-stream
• ※これって、Unified Plan と関係してます??
Offer側 addTrack()
Peer BPeer A
createOffer()
Peer-to-Peer
offer SDPsetLocalDescription()
setLocalDescription()answer SDP
setRemoteDescription()
createAnswer()
setRemoteDescription()
onnetosiationneeded () 発火
localStream1 localStream2 remoteStream2 remoteStream1
addTrack(track, localStream2)
onaddstream () 発火
remoteStream2受け取り
Answer側 addTrack()
Peer BPeer A
createOffer()
Peer-to-Peer
offer SDP
setLocalDescription()
setLocalDescription()answer SDP
setRemoteDescription()
createAnswer()
setRemoteDescription()
onnetosiationneeded () 発火
localStream1localStream2remoteStream2remoteStream1
addTrack(track, localStream2)
onaddstream () 発火 remoteStream2受け取り
request offer
Firefox addTrack / removeTrack
• 嬉しいところ
– 別のmediastreamになるので、そのまま URL.createObjectURL() 使える
– ※逆に、テンポラリーの MediaStream が作れない
• var temp = new MediaStream() // コンストラクター呼べない(protected)
• 気になるところ
– Answer側から removeTrack()でSDP交換
– Offer側で serRemoteDescription(answer)後、エラー発生
setRemoteDescription(answer) ERROR: DOMException [InvalidSessionDescriptionError:
"Invalid description, no ice-ufrag attribute"
code: 0
nsresult: 0x0]
– ※Firefox Nightly 43.0a1 ではOK
– ※Firefox 41.0 ではOK。ただし繰り返していると no ice-uflag エラー発生
RTCPeerConnection
MediaStream
MediaStreamTrack MediaStreamTrack
addTrack()
removeTrack() onaddtrack()
onremovetrack()
RTCPeerConnection
MediaStream
Peer-to-Peer
RTCPeerConnection
MediaStreamTrack MediaStreamTrack
addTrack()
removeTrack()
onaddstream()
onremovestream()
RTCPeerConnection
MediaStream
Peer-to-Peer
Chrome multi-stream
Firefox
WebRTC 1.0
RTCPeerConnection
MediaStream
addStream()
removeStream()
onaddstream()
onremovestream()
RTCPeerConnection
MediaStream
Peer-to-Peer
Chrome multi-track
拡大:Chromeの場合(stream)
RTCPeerConnection
MediaStream
addStream()
removeStream()
onaddstream()
onremovestream()
RTCPeerConnection
MediaStream
Peer-to-Peer
拡大: Chromeの場合(track)
RTCPeerConnection
MediaStream
MediaStreamTrack
MediaStreamTrack
addTrack()
removeTrack()
onaddtrack()
onremovetrack()
RTCPeerConnection
MediaStream
Peer-to-Peer
拡大: Firefoxの場合
RTCPeerConnection
MediaStreamTrack MediaStreamTrack
addTrack()
removeTrack()
onaddstream()
onremovestream()
RTCPeerConnection
MediaStream
Peer-to-Peer
おまけ:Firefox replaceTrack
var sender1 = mozRTCPeerConnection.addTrack(track1, stream1);
sender1.replaceTrack(track2).then(function() { console.log('replaced'); });
// ※track2は、PeerConnectionに未接続でなければならない
Thank you!

More Related Content

What's hot

C++からWebRTC (DataChannel)を利用する
C++からWebRTC (DataChannel)を利用するC++からWebRTC (DataChannel)を利用する
C++からWebRTC (DataChannel)を利用する
祐司 伊藤
 
ここがつらいよWebRTC - WebRTC開発の落とし穴
ここがつらいよWebRTC - WebRTC開発の落とし穴ここがつらいよWebRTC - WebRTC開発の落とし穴
ここがつらいよWebRTC - WebRTC開発の落とし穴
mganeko
 
WebRTC研修
WebRTC研修WebRTC研修
WebRTC と Native とそれから、それから。
WebRTC と Native とそれから、それから。 WebRTC と Native とそれから、それから。
WebRTC と Native とそれから、それから。
tnoho
 
WebRTC入門+最新動向
WebRTC入門+最新動向WebRTC入門+最新動向
WebRTC入門+最新動向
Ryosuke Otsuya
 
WebRTCのオーディオ処理の謎、誰か教えて!
WebRTCのオーディオ処理の謎、誰か教えて!WebRTCのオーディオ処理の謎、誰か教えて!
WebRTCのオーディオ処理の謎、誰か教えて!
mganeko
 
WebRTCを利用した遠隔リアルタイム映像処理フレームワークの実装
WebRTCを利用した遠隔リアルタイム映像処理フレームワークの実装WebRTCを利用した遠隔リアルタイム映像処理フレームワークの実装
WebRTCを利用した遠隔リアルタイム映像処理フレームワークの実装
tnoho
 
WebRTC SFU mediasoup sample
WebRTC SFU mediasoup sampleWebRTC SFU mediasoup sample
WebRTC SFU mediasoup sample
mganeko
 
WebRTCの技術解説 第二版 公開版 本編
WebRTCの技術解説 第二版 公開版 本編WebRTCの技術解説 第二版 公開版 本編
WebRTCの技術解説 第二版 公開版 本編
Contest Ntt-west
 
Unityによるリアルタイム通信とMagicOnionによるC#大統一理論の実現
Unityによるリアルタイム通信とMagicOnionによるC#大統一理論の実現Unityによるリアルタイム通信とMagicOnionによるC#大統一理論の実現
Unityによるリアルタイム通信とMagicOnionによるC#大統一理論の実現
Yoshifumi Kawai
 
WebRTC SFU Mediasoup Sample update
WebRTC SFU Mediasoup Sample updateWebRTC SFU Mediasoup Sample update
WebRTC SFU Mediasoup Sample update
mganeko
 
HoloLens2とPCで、WebRTCで映像をやりとり
HoloLens2とPCで、WebRTCで映像をやりとりHoloLens2とPCで、WebRTCで映像をやりとり
HoloLens2とPCで、WebRTCで映像をやりとり
聡 大久保
 
Unityで始めるバージョン管理 Git LFS 入門編
Unityで始めるバージョン管理 Git LFS 入門編Unityで始めるバージョン管理 Git LFS 入門編
Unityで始めるバージョン管理 Git LFS 入門編
NAKAOKU Takahiro
 
Unityで PhotonCloudを使ってリアルタイム・マルチプレイヤーゲームを作っちゃおう【導入編】
Unityで PhotonCloudを使ってリアルタイム・マルチプレイヤーゲームを作っちゃおう【導入編】Unityで PhotonCloudを使ってリアルタイム・マルチプレイヤーゲームを作っちゃおう【導入編】
Unityで PhotonCloudを使ってリアルタイム・マルチプレイヤーゲームを作っちゃおう【導入編】
GMO GlobalSign Holdings K.K.
 
Building the Game Server both API and Realtime via c#
Building the Game Server both API and Realtime via c#Building the Game Server both API and Realtime via c#
Building the Game Server both API and Realtime via c#
Yoshifumi Kawai
 
オンラインゲームの仕組みと工夫
オンラインゲームの仕組みと工夫オンラインゲームの仕組みと工夫
オンラインゲームの仕組みと工夫
Yuta Imai
 
iPhoneでリアルタイムマルチプレイを実現!Photon Network Engine
iPhoneでリアルタイムマルチプレイを実現!Photon Network EngineiPhoneでリアルタイムマルチプレイを実現!Photon Network Engine
iPhoneでリアルタイムマルチプレイを実現!Photon Network Engine
GMO GlobalSign Holdings K.K.
 
導入から 10 年、PHP の trait は滅びるべきなのか その適切な使いどころと弱点、将来について
導入から 10 年、PHP の trait は滅びるべきなのか その適切な使いどころと弱点、将来について導入から 10 年、PHP の trait は滅びるべきなのか その適切な使いどころと弱点、将来について
導入から 10 年、PHP の trait は滅びるべきなのか その適切な使いどころと弱点、将来について
shinjiigarashi
 
ライブストリーミングの基礎知識
ライブストリーミングの基礎知識ライブストリーミングの基礎知識
ライブストリーミングの基礎知識
kumaryu
 
WebSocket / WebRTCの技術紹介
WebSocket / WebRTCの技術紹介WebSocket / WebRTCの技術紹介
WebSocket / WebRTCの技術紹介
Yasuhiro Mawarimichi
 

What's hot (20)

C++からWebRTC (DataChannel)を利用する
C++からWebRTC (DataChannel)を利用するC++からWebRTC (DataChannel)を利用する
C++からWebRTC (DataChannel)を利用する
 
ここがつらいよWebRTC - WebRTC開発の落とし穴
ここがつらいよWebRTC - WebRTC開発の落とし穴ここがつらいよWebRTC - WebRTC開発の落とし穴
ここがつらいよWebRTC - WebRTC開発の落とし穴
 
WebRTC研修
WebRTC研修WebRTC研修
WebRTC研修
 
WebRTC と Native とそれから、それから。
WebRTC と Native とそれから、それから。 WebRTC と Native とそれから、それから。
WebRTC と Native とそれから、それから。
 
WebRTC入門+最新動向
WebRTC入門+最新動向WebRTC入門+最新動向
WebRTC入門+最新動向
 
WebRTCのオーディオ処理の謎、誰か教えて!
WebRTCのオーディオ処理の謎、誰か教えて!WebRTCのオーディオ処理の謎、誰か教えて!
WebRTCのオーディオ処理の謎、誰か教えて!
 
WebRTCを利用した遠隔リアルタイム映像処理フレームワークの実装
WebRTCを利用した遠隔リアルタイム映像処理フレームワークの実装WebRTCを利用した遠隔リアルタイム映像処理フレームワークの実装
WebRTCを利用した遠隔リアルタイム映像処理フレームワークの実装
 
WebRTC SFU mediasoup sample
WebRTC SFU mediasoup sampleWebRTC SFU mediasoup sample
WebRTC SFU mediasoup sample
 
WebRTCの技術解説 第二版 公開版 本編
WebRTCの技術解説 第二版 公開版 本編WebRTCの技術解説 第二版 公開版 本編
WebRTCの技術解説 第二版 公開版 本編
 
Unityによるリアルタイム通信とMagicOnionによるC#大統一理論の実現
Unityによるリアルタイム通信とMagicOnionによるC#大統一理論の実現Unityによるリアルタイム通信とMagicOnionによるC#大統一理論の実現
Unityによるリアルタイム通信とMagicOnionによるC#大統一理論の実現
 
WebRTC SFU Mediasoup Sample update
WebRTC SFU Mediasoup Sample updateWebRTC SFU Mediasoup Sample update
WebRTC SFU Mediasoup Sample update
 
HoloLens2とPCで、WebRTCで映像をやりとり
HoloLens2とPCで、WebRTCで映像をやりとりHoloLens2とPCで、WebRTCで映像をやりとり
HoloLens2とPCで、WebRTCで映像をやりとり
 
Unityで始めるバージョン管理 Git LFS 入門編
Unityで始めるバージョン管理 Git LFS 入門編Unityで始めるバージョン管理 Git LFS 入門編
Unityで始めるバージョン管理 Git LFS 入門編
 
Unityで PhotonCloudを使ってリアルタイム・マルチプレイヤーゲームを作っちゃおう【導入編】
Unityで PhotonCloudを使ってリアルタイム・マルチプレイヤーゲームを作っちゃおう【導入編】Unityで PhotonCloudを使ってリアルタイム・マルチプレイヤーゲームを作っちゃおう【導入編】
Unityで PhotonCloudを使ってリアルタイム・マルチプレイヤーゲームを作っちゃおう【導入編】
 
Building the Game Server both API and Realtime via c#
Building the Game Server both API and Realtime via c#Building the Game Server both API and Realtime via c#
Building the Game Server both API and Realtime via c#
 
オンラインゲームの仕組みと工夫
オンラインゲームの仕組みと工夫オンラインゲームの仕組みと工夫
オンラインゲームの仕組みと工夫
 
iPhoneでリアルタイムマルチプレイを実現!Photon Network Engine
iPhoneでリアルタイムマルチプレイを実現!Photon Network EngineiPhoneでリアルタイムマルチプレイを実現!Photon Network Engine
iPhoneでリアルタイムマルチプレイを実現!Photon Network Engine
 
導入から 10 年、PHP の trait は滅びるべきなのか その適切な使いどころと弱点、将来について
導入から 10 年、PHP の trait は滅びるべきなのか その適切な使いどころと弱点、将来について導入から 10 年、PHP の trait は滅びるべきなのか その適切な使いどころと弱点、将来について
導入から 10 年、PHP の trait は滅びるべきなのか その適切な使いどころと弱点、将来について
 
ライブストリーミングの基礎知識
ライブストリーミングの基礎知識ライブストリーミングの基礎知識
ライブストリーミングの基礎知識
 
WebSocket / WebRTCの技術紹介
WebSocket / WebRTCの技術紹介WebSocket / WebRTCの技術紹介
WebSocket / WebRTCの技術紹介
 

Viewers also liked

2016 February - WebRTC Conference japan - English
2016 February - WebRTC Conference japan - English2016 February - WebRTC Conference japan - English
2016 February - WebRTC Conference japan - English
Alexandre Gouaillard
 
Jitsi video bridge で遊んでみた
Jitsi video bridge で遊んでみたJitsi video bridge で遊んでみた
Jitsi video bridge で遊んでみた
tnoho
 
WebRTC on Native App
WebRTC on Native AppWebRTC on Native App
WebRTC on Native App
WebRTCConferenceJapan
 
Nodeで操るKurentoメディアサーバー ( Kurento + WebRTC + Node.js )
Nodeで操るKurentoメディアサーバー ( Kurento + WebRTC + Node.js )Nodeで操るKurentoメディアサーバー ( Kurento + WebRTC + Node.js )
Nodeで操るKurentoメディアサーバー ( Kurento + WebRTC + Node.js )
mganeko
 
WebRTC on Edge
WebRTC on EdgeWebRTC on Edge
WebRTC on Edge
Saki Homma
 
PeerConnectionリレーとMediaRecorder
PeerConnectionリレーとMediaRecorderPeerConnectionリレーとMediaRecorder
PeerConnectionリレーとMediaRecorder
mganeko
 
ブラウザでWebRTC - iOSゲートウェイ作ってみた
ブラウザでWebRTC - iOSゲートウェイ作ってみたブラウザでWebRTC - iOSゲートウェイ作ってみた
ブラウザでWebRTC - iOSゲートウェイ作ってみた
mganeko
 

Viewers also liked (7)

2016 February - WebRTC Conference japan - English
2016 February - WebRTC Conference japan - English2016 February - WebRTC Conference japan - English
2016 February - WebRTC Conference japan - English
 
Jitsi video bridge で遊んでみた
Jitsi video bridge で遊んでみたJitsi video bridge で遊んでみた
Jitsi video bridge で遊んでみた
 
WebRTC on Native App
WebRTC on Native AppWebRTC on Native App
WebRTC on Native App
 
Nodeで操るKurentoメディアサーバー ( Kurento + WebRTC + Node.js )
Nodeで操るKurentoメディアサーバー ( Kurento + WebRTC + Node.js )Nodeで操るKurentoメディアサーバー ( Kurento + WebRTC + Node.js )
Nodeで操るKurentoメディアサーバー ( Kurento + WebRTC + Node.js )
 
WebRTC on Edge
WebRTC on EdgeWebRTC on Edge
WebRTC on Edge
 
PeerConnectionリレーとMediaRecorder
PeerConnectionリレーとMediaRecorderPeerConnectionリレーとMediaRecorder
PeerConnectionリレーとMediaRecorder
 
ブラウザでWebRTC - iOSゲートウェイ作ってみた
ブラウザでWebRTC - iOSゲートウェイ作ってみたブラウザでWebRTC - iOSゲートウェイ作ってみた
ブラウザでWebRTC - iOSゲートウェイ作ってみた
 

Similar to WebRTC multitrack / multistream

WebRTC meetup Tokyo 1
WebRTC meetup  Tokyo 1WebRTC meetup  Tokyo 1
WebRTC meetup Tokyo 1
mganeko
 
Webrtc bootcamp handson
Webrtc bootcamp handsonWebrtc bootcamp handson
Webrtc bootcamp handson
mganeko
 
WordPressと外部APIとの連携
WordPressと外部APIとの連携WordPressと外部APIとの連携
WordPressと外部APIとの連携
Hidekazu Ishikawa
 
Apache Torqueについて
Apache TorqueについてApache Torqueについて
Apache Torqueについて
tako pons
 
Node予備校 vol.1 名古屋
Node予備校 vol.1 名古屋Node予備校 vol.1 名古屋
Node予備校 vol.1 名古屋
Mori Shingo
 
13016 n分で作るtype scriptでnodejs
13016 n分で作るtype scriptでnodejs13016 n分で作るtype scriptでnodejs
13016 n分で作るtype scriptでnodejs
Takayoshi Tanaka
 
GruntでJavaScript 前作業の自動化!
GruntでJavaScript 前作業の自動化!GruntでJavaScript 前作業の自動化!
GruntでJavaScript 前作業の自動化!
leverages_event
 
WebRTC UserMedia Catalog: いろんなユーザメディア(MediaStream)を使ってみよう
WebRTC UserMedia Catalog: いろんなユーザメディア(MediaStream)を使ってみようWebRTC UserMedia Catalog: いろんなユーザメディア(MediaStream)を使ってみよう
WebRTC UserMedia Catalog: いろんなユーザメディア(MediaStream)を使ってみよう
mganeko
 
JavaScriptでWebDriverのテストコードを書きましょ
JavaScriptでWebDriverのテストコードを書きましょJavaScriptでWebDriverのテストコードを書きましょ
JavaScriptでWebDriverのテストコードを書きましょ
Kohki Nakashima
 
Azure IoT Edge で Custom Vision
Azure IoT Edge で Custom VisionAzure IoT Edge で Custom Vision
Azure IoT Edge で Custom Vision
Yoshitaka Seo
 
Let's begin WebRTC
Let's begin WebRTCLet's begin WebRTC
Let's begin WebRTC
yoshikawa_t
 
Chromebook 「だけ」で WebRTCを動かそう
Chromebook 「だけ」で WebRTCを動かそうChromebook 「だけ」で WebRTCを動かそう
Chromebook 「だけ」で WebRTCを動かそう
mganeko
 
Azure サポート エンジニア直伝 ~ PowerShell 実践活用術 ~
Azure サポート エンジニア直伝 ~ PowerShell 実践活用術 ~Azure サポート エンジニア直伝 ~ PowerShell 実践活用術 ~
Azure サポート エンジニア直伝 ~ PowerShell 実践活用術 ~
ShuheiUda
 
どこよりも早い Spring Boot 1.2 解説 #渋谷Java
どこよりも早い Spring Boot 1.2 解説 #渋谷Javaどこよりも早い Spring Boot 1.2 解説 #渋谷Java
どこよりも早い Spring Boot 1.2 解説 #渋谷Java
Toshiaki Maki
 
React Native GUIDE
React Native GUIDEReact Native GUIDE
React Native GUIDE
dcubeio
 
Firefox5+HTML5×5
Firefox5+HTML5×5Firefox5+HTML5×5
Firefox5+HTML5×5
dynamis
 
FM音源をいじれるWebサービスを作った
FM音源をいじれるWebサービスを作ったFM音源をいじれるWebサービスを作った
FM音源をいじれるWebサービスを作った
CHY72
 
社内勉強会資料(Varnish Module)
社内勉強会資料(Varnish Module)社内勉強会資料(Varnish Module)
社内勉強会資料(Varnish Module)
Iwana Chan
 
ソーシャルアプリ勉強会(第一回資料)配布用
ソーシャルアプリ勉強会(第一回資料)配布用ソーシャルアプリ勉強会(第一回資料)配布用
ソーシャルアプリ勉強会(第一回資料)配布用
Yatabe Terumasa
 
jQuery Performance Tips – jQueryにおける高速化 -
jQuery Performance Tips – jQueryにおける高速化 -jQuery Performance Tips – jQueryにおける高速化 -
jQuery Performance Tips – jQueryにおける高速化 -
Hayato Mizuno
 

Similar to WebRTC multitrack / multistream (20)

WebRTC meetup Tokyo 1
WebRTC meetup  Tokyo 1WebRTC meetup  Tokyo 1
WebRTC meetup Tokyo 1
 
Webrtc bootcamp handson
Webrtc bootcamp handsonWebrtc bootcamp handson
Webrtc bootcamp handson
 
WordPressと外部APIとの連携
WordPressと外部APIとの連携WordPressと外部APIとの連携
WordPressと外部APIとの連携
 
Apache Torqueについて
Apache TorqueについてApache Torqueについて
Apache Torqueについて
 
Node予備校 vol.1 名古屋
Node予備校 vol.1 名古屋Node予備校 vol.1 名古屋
Node予備校 vol.1 名古屋
 
13016 n分で作るtype scriptでnodejs
13016 n分で作るtype scriptでnodejs13016 n分で作るtype scriptでnodejs
13016 n分で作るtype scriptでnodejs
 
GruntでJavaScript 前作業の自動化!
GruntでJavaScript 前作業の自動化!GruntでJavaScript 前作業の自動化!
GruntでJavaScript 前作業の自動化!
 
WebRTC UserMedia Catalog: いろんなユーザメディア(MediaStream)を使ってみよう
WebRTC UserMedia Catalog: いろんなユーザメディア(MediaStream)を使ってみようWebRTC UserMedia Catalog: いろんなユーザメディア(MediaStream)を使ってみよう
WebRTC UserMedia Catalog: いろんなユーザメディア(MediaStream)を使ってみよう
 
JavaScriptでWebDriverのテストコードを書きましょ
JavaScriptでWebDriverのテストコードを書きましょJavaScriptでWebDriverのテストコードを書きましょ
JavaScriptでWebDriverのテストコードを書きましょ
 
Azure IoT Edge で Custom Vision
Azure IoT Edge で Custom VisionAzure IoT Edge で Custom Vision
Azure IoT Edge で Custom Vision
 
Let's begin WebRTC
Let's begin WebRTCLet's begin WebRTC
Let's begin WebRTC
 
Chromebook 「だけ」で WebRTCを動かそう
Chromebook 「だけ」で WebRTCを動かそうChromebook 「だけ」で WebRTCを動かそう
Chromebook 「だけ」で WebRTCを動かそう
 
Azure サポート エンジニア直伝 ~ PowerShell 実践活用術 ~
Azure サポート エンジニア直伝 ~ PowerShell 実践活用術 ~Azure サポート エンジニア直伝 ~ PowerShell 実践活用術 ~
Azure サポート エンジニア直伝 ~ PowerShell 実践活用術 ~
 
どこよりも早い Spring Boot 1.2 解説 #渋谷Java
どこよりも早い Spring Boot 1.2 解説 #渋谷Javaどこよりも早い Spring Boot 1.2 解説 #渋谷Java
どこよりも早い Spring Boot 1.2 解説 #渋谷Java
 
React Native GUIDE
React Native GUIDEReact Native GUIDE
React Native GUIDE
 
Firefox5+HTML5×5
Firefox5+HTML5×5Firefox5+HTML5×5
Firefox5+HTML5×5
 
FM音源をいじれるWebサービスを作った
FM音源をいじれるWebサービスを作ったFM音源をいじれるWebサービスを作った
FM音源をいじれるWebサービスを作った
 
社内勉強会資料(Varnish Module)
社内勉強会資料(Varnish Module)社内勉強会資料(Varnish Module)
社内勉強会資料(Varnish Module)
 
ソーシャルアプリ勉強会(第一回資料)配布用
ソーシャルアプリ勉強会(第一回資料)配布用ソーシャルアプリ勉強会(第一回資料)配布用
ソーシャルアプリ勉強会(第一回資料)配布用
 
jQuery Performance Tips – jQueryにおける高速化 -
jQuery Performance Tips – jQueryにおける高速化 -jQuery Performance Tips – jQueryにおける高速化 -
jQuery Performance Tips – jQueryにおける高速化 -
 

More from mganeko

Google Meet でもバーチャル背景を使いたい (WebRTC Meetup Online)
Google Meet でもバーチャル背景を使いたい (WebRTC Meetup Online)Google Meet でもバーチャル背景を使いたい (WebRTC Meetup Online)
Google Meet でもバーチャル背景を使いたい (WebRTC Meetup Online)
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
 
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
 
Skywayのビデオチャットを録画しよう。そう、ブラウザでね
Skywayのビデオチャットを録画しよう。そう、ブラウザでねSkywayのビデオチャットを録画しよう。そう、ブラウザでね
Skywayのビデオチャットを録画しよう。そう、ブラウザでね
mganeko
 
WebRTC mediasoup on raspberrypi3
WebRTC mediasoup on raspberrypi3WebRTC mediasoup on raspberrypi3
WebRTC mediasoup on raspberrypi3
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
 
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
 
WebRTC Summit 2014 NewYork 参加報告
WebRTC Summit 2014 NewYork 参加報告WebRTC Summit 2014 NewYork 参加報告
WebRTC Summit 2014 NewYork 参加報告
mganeko
 
2013 WebRTC node
2013 WebRTC node2013 WebRTC node
2013 WebRTC node
mganeko
 
2013 WebRTC 概説 & ワークショップ
2013 WebRTC 概説 & ワークショップ2013 WebRTC 概説 & ワークショップ
2013 WebRTC 概説 & ワークショップ
mganeko
 

More from mganeko (15)

Google Meet でもバーチャル背景を使いたい (WebRTC Meetup Online)
Google Meet でもバーチャル背景を使いたい (WebRTC Meetup Online)Google Meet でもバーチャル背景を使いたい (WebRTC Meetup Online)
Google Meet でもバーチャル背景を使いたい (WebRTC Meetup Online)
 
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 ミニインタープリター&コンパイラー
 
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...
 
Skywayのビデオチャットを録画しよう。そう、ブラウザでね
Skywayのビデオチャットを録画しよう。そう、ブラウザでねSkywayのビデオチャットを録画しよう。そう、ブラウザでね
Skywayのビデオチャットを録画しよう。そう、ブラウザでね
 
WebRTC mediasoup on raspberrypi3
WebRTC mediasoup on raspberrypi3WebRTC mediasoup on raspberrypi3
WebRTC mediasoup on raspberrypi3
 
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
 
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
 
WebRTC Summit 2014 NewYork 参加報告
WebRTC Summit 2014 NewYork 参加報告WebRTC Summit 2014 NewYork 参加報告
WebRTC Summit 2014 NewYork 参加報告
 
2013 WebRTC node
2013 WebRTC node2013 WebRTC node
2013 WebRTC node
 
2013 WebRTC 概説 & ワークショップ
2013 WebRTC 概説 & ワークショップ2013 WebRTC 概説 & ワークショップ
2013 WebRTC 概説 & ワークショップ
 

Recently uploaded

【GPT4-o越えのリアルタイム会話AI】kyutai labsのMoshiデモ動画を解説
【GPT4-o越えのリアルタイム会話AI】kyutai labsのMoshiデモ動画を解説【GPT4-o越えのリアルタイム会話AI】kyutai labsのMoshiデモ動画を解説
【GPT4-o越えのリアルタイム会話AI】kyutai labsのMoshiデモ動画を解説
TsuyoshiSaito7
 
第61回CV勉強会「CVPR2024読み会」(前編)発表資料:State Space Models for Event Cameras
第61回CV勉強会「CVPR2024読み会」(前編)発表資料:State Space Models for Event Cameras第61回CV勉強会「CVPR2024読み会」(前編)発表資料:State Space Models for Event Cameras
第61回CV勉強会「CVPR2024読み会」(前編)発表資料:State Space Models for Event Cameras
Takuya Minagawa
 
MOSHI: 革新的な音声AI QAIが開発した次世代のコミュニケーションツール
MOSHI: 革新的な音声AI QAIが開発した次世代のコミュニケーションツールMOSHI: 革新的な音声AI QAIが開発した次世代のコミュニケーションツール
MOSHI: 革新的な音声AI QAIが開発した次世代のコミュニケーションツール
TsuyoshiSaito7
 
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
 
Kyndryl Developer Services のご紹介 2024年7月
Kyndryl Developer Services のご紹介  2024年7月Kyndryl Developer Services のご紹介  2024年7月
Kyndryl Developer Services のご紹介 2024年7月
Takayuki Nakayama
 
「スマートエスイー」におけるスマートシステム&サービスおよびDX推進人材の産学連携育成ならびに参照モデルに基づく育成プログラム分析
「スマートエスイー」におけるスマートシステム&サービスおよびDX推進人材の産学連携育成ならびに参照モデルに基づく育成プログラム分析「スマートエスイー」におけるスマートシステム&サービスおよびDX推進人材の産学連携育成ならびに参照モデルに基づく育成プログラム分析
「スマートエスイー」におけるスマートシステム&サービスおよびDX推進人材の産学連携育成ならびに参照モデルに基づく育成プログラム分析
Hironori Washizaki
 
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
 
「福利厚生をコストから投資へ」AIで社員1人ひとりに最適な支援を届ける 全く新しいカフェテリアプラン
「福利厚生をコストから投資へ」AIで社員1人ひとりに最適な支援を届ける 全く新しいカフェテリアプラン「福利厚生をコストから投資へ」AIで社員1人ひとりに最適な支援を届ける 全く新しいカフェテリアプラン
「福利厚生をコストから投資へ」AIで社員1人ひとりに最適な支援を届ける 全く新しいカフェテリアプラン
shogotaguchi
 
【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
 
MySQLの文字コードと照合順序について 2024/07/05の勉強会で発表されたものです。
MySQLの文字コードと照合順序について 2024/07/05の勉強会で発表されたものです。MySQLの文字コードと照合順序について 2024/07/05の勉強会で発表されたものです。
MySQLの文字コードと照合順序について 2024/07/05の勉強会で発表されたものです。
iPride Co., Ltd.
 
"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 ...
たけおか しょうぞう
 

Recently uploaded (12)

【GPT4-o越えのリアルタイム会話AI】kyutai labsのMoshiデモ動画を解説
【GPT4-o越えのリアルタイム会話AI】kyutai labsのMoshiデモ動画を解説【GPT4-o越えのリアルタイム会話AI】kyutai labsのMoshiデモ動画を解説
【GPT4-o越えのリアルタイム会話AI】kyutai labsのMoshiデモ動画を解説
 
第61回CV勉強会「CVPR2024読み会」(前編)発表資料:State Space Models for Event Cameras
第61回CV勉強会「CVPR2024読み会」(前編)発表資料:State Space Models for Event Cameras第61回CV勉強会「CVPR2024読み会」(前編)発表資料:State Space Models for Event Cameras
第61回CV勉強会「CVPR2024読み会」(前編)発表資料:State Space Models for Event Cameras
 
MOSHI: 革新的な音声AI QAIが開発した次世代のコミュニケーションツール
MOSHI: 革新的な音声AI QAIが開発した次世代のコミュニケーションツールMOSHI: 革新的な音声AI QAIが開発した次世代のコミュニケーションツール
MOSHI: 革新的な音声AI QAIが開発した次世代のコミュニケーションツール
 
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
 
Kyndryl Developer Services のご紹介 2024年7月
Kyndryl Developer Services のご紹介  2024年7月Kyndryl Developer Services のご紹介  2024年7月
Kyndryl Developer Services のご紹介 2024年7月
 
「スマートエスイー」におけるスマートシステム&サービスおよびDX推進人材の産学連携育成ならびに参照モデルに基づく育成プログラム分析
「スマートエスイー」におけるスマートシステム&サービスおよびDX推進人材の産学連携育成ならびに参照モデルに基づく育成プログラム分析「スマートエスイー」におけるスマートシステム&サービスおよびDX推進人材の産学連携育成ならびに参照モデルに基づく育成プログラム分析
「スマートエスイー」におけるスマートシステム&サービスおよびDX推進人材の産学連携育成ならびに参照モデルに基づく育成プログラム分析
 
Matsuo-Iwasawa lab. Research Unit Introduction
Matsuo-Iwasawa lab. Research Unit IntroductionMatsuo-Iwasawa lab. Research Unit Introduction
Matsuo-Iwasawa lab. Research Unit Introduction
 
「福利厚生をコストから投資へ」AIで社員1人ひとりに最適な支援を届ける 全く新しいカフェテリアプラン
「福利厚生をコストから投資へ」AIで社員1人ひとりに最適な支援を届ける 全く新しいカフェテリアプラン「福利厚生をコストから投資へ」AIで社員1人ひとりに最適な支援を届ける 全く新しいカフェテリアプラン
「福利厚生をコストから投資へ」AIで社員1人ひとりに最適な支援を届ける 全く新しいカフェテリアプラン
 
【AI論文解説】LLMの事前学習をvisionに適用する手法Autoregressive Image Models
【AI論文解説】LLMの事前学習をvisionに適用する手法Autoregressive Image Models【AI論文解説】LLMの事前学習をvisionに適用する手法Autoregressive Image Models
【AI論文解説】LLMの事前学習をvisionに適用する手法Autoregressive Image Models
 
MySQLの文字コードと照合順序について 2024/07/05の勉強会で発表されたものです。
MySQLの文字コードと照合順序について 2024/07/05の勉強会で発表されたものです。MySQLの文字コードと照合順序について 2024/07/05の勉強会で発表されたものです。
MySQLの文字コードと照合順序について 2024/07/05の勉強会で発表されたものです。
 
"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 ...
 

WebRTC multitrack / multistream