Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

WebRTC multistream

6 084 vues

Publié le

  • You can hardly find a student who enjoys writing a college papers. Among all the other tasks they get assigned in college, writing essays is one of the most difficult assignments. Fortunately for students, there are many offers nowadays which help to make this process easier. The best service which can help you is ⇒ www.HelpWriting.net ⇐
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • Dating for everyone is here: ❤❤❤ http://bit.ly/2Q98JRS ❤❤❤
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • Dating direct: ♥♥♥ http://bit.ly/2Q98JRS ♥♥♥
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • i need to know if WebRTC multistream enable us to create a group chat or it's for sharing the streams between just two peers?
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici

WebRTC multistream

  1. 1. WebRTC Multi-Stream 挙動から見たブラウザの現状 2015.07.03 インフォコム株式会社 がねこまさし @massie_g
  2. 2. JavaScript APIから見た PeerConnectionとMedia階層 RTCPeerConnection MediaStream MediaStream MediaStream MediaStreamTrack MediaStreamTrack MediaStreamTrack MediaStreamTrack videoTracks[] audioTracks[] DataChannel N個 N個 DataChannel N個
  3. 3. 複数のMediaを使う手段 • 1 アプリに、複数 PeerConnection • 1 PeerConnection に、複数 MediaStream • 1 MediaStream に、複数MediaStreamTrack
  4. 4. 複数のMediaを使う手段 • 1 アプリに、複数 PeerConnection – 複数人のケースと同じ • 1 PeerConnection に、複数 MediaStream – 今回検証した範囲 • 1 MediaStream に、複数MediaStreamTrack – Chromeでは MediaStream.addTrack()は呼び出し可能 • ※特にイベントは発生しない – 受け側で 特定のTrackを指定して再生することはできないはず • URL.createObjectURL(stream) で、複数Trackをハンドリングできない
  5. 5. 関連する要素 • メソッド – RTCPeerConnection.addStream(stream) • ローカルのMediaStreamを追加 – RTCPeerConnection.removeStream(stream) • ローカルのMediaStreamを除去 • イベント – RTCPeerConnection.onnegotiationneeded() • SDPの再送が必要なときに発火
  6. 6. addStream() / removeStream() • Chrome 43.0.2357.124 (64-bit) – RTCPeerConnection.addStream() • 2つのMediaStream(video入り)を追加可能 – RTCPeerConnection.removeStream()も可能 • Firefox 38.0.5 – RTCPeerConnection.addStream() • 2つのMediaStream(video入り)を追加可能 – RTCPeerConnection.removeStream()は不可 • NotSupportedError:
  7. 7. onnegotiationneeded() • 発火のタイミング – ○ RTCPeerConnection.addStream() / .removeStream() – × RTCPeerConnection.createOffer() / .createAnswer() – × RTCPeerConnection.setLocalDescription() – × RTCPeerConnection.setRemoteDescription() – × RTCPeerConnection.onaddstream() 発火時 • リモートの MediaStream が検出されたときのイベント • Chorme – 接続確立前の addStream() でも発火 – 接続確立後の addStream() / removeStream() でも発火 • Firefox – 接続確立前の addStream() では発火しない (※Nightlyでは発火) – 接続確立後の addStream() で発火 – 接続確立後の removeStream() は実行できない (※Nightlyでも不可)
  8. 8. 参考:vanilla ICE シグナリング Peer BPeer A createOffer() Peer-to-Peer offer SDP (with ICE candidate) setLocalDescription() setLocalDescription() answer SDP (with ICE candidate) setRemoteDescription() createAnswer() setRemoteDescription() onicecandidate() onicecandidate() onicecandidate() onicecandidate() addStream(localStream) addStream(localStream) onaddstream(remote) onaddstream(remote)
  9. 9. 最初からmultistream : Chrome • ※ onnegotiationneeded()イベントは無視 • offer:1, answer:1→ 当然OK • offer:2, answer:2 → OK • offer:2, answer:1 → OK • offer:1, answer:2 → OK
  10. 10. 最初からmultistream : Firefox • ※ onnegotiationneeded()イベントは無視 • offer:1, answer:1→ 当然OK • offer:2, answer:2 → OK • offer:2, answer:1 → OK • offer:1, answer:2 → △ – offer側に1つしか表示されない – ※ answer側でsetOffer後、 onnegotiationneeded() が発火している • そのイベントを適切に処理してあげる必要がある??
  11. 11. 最初からmultistream Chrome(offer) → Firefox(answer) • ※ onnegotiationneeded()イベントは無視 • offer:1, answer:1 → OK • offer:2, answer:2 → NG – answer側でエラー – setRemoteDescription(offer) ERROR: " DOMException [InvalidSessionDescriptionError: "Found multiple different webrtc msids in m-section 1 • offer:2, answer:1 → NG – answer側 – setRemoteDescription(offer) ERROR: " DOMException [InvalidSessionDescriptionError: "Found multiple different webrtc msids in m-section 1 • offer:1, answer:2 → △。offer側に1つしか表示されない
  12. 12. 最初からmultistream Firefox(offer) → Chrome(answer) • ※ onnegotiationneeded()イベントは無視 • offer:1, answer:1 → OK • offer:2, answer:2 → NG – answer側でエラー – Create Answer failed. err: Failed to initialize the answer. • offer:2, answer:1answer:2 → NG – answer側でエラー – Create Answer failed. err: Failed to initialize the answer. • offer:1, answer:2 → NG – answer側 OK – offer側でエラー – setRemoteDescription(offer) ERROR: " DOMException [InvalidSessionDescriptionError: "Found multiple different webrtc msids in m-section 1
  13. 13. 後からmultistream : offer側で+1 Peer BPeer A createOffer() Peer-to-Peer offer SDP (with ICE candidate) setLocalDescription() setLocalDescription() answer SDP (with ICE candidate) setRemoteDescription() createAnswer() setRemoteDescription() addStream(localStream) onaddstream(remote) onnegotiationneeded()
  14. 14. 後からmultistream : offer側で変化 • onnegotiationneeded()イベントを使う • offer:1 answer:1後、 offer +1 – offer側 • peer.addStream(stream2) • peer.onnegotiationneeded()発火 • peer.createOffer() • peer.setLocalDescription(sdp) • sendSDP(sdp) ※何らかの手段で送る – answer側 • receiveSDP(sdp) ※何らかの手段で受けてとる • peer.setRemoteDescription(sdp) • peer.onaddstream(stream2) 発火 • ※ peer.onnegotiationneeded()発火しない • peer.createAnswer() • peer.setLocalDescription(sdp) • sendSDP(sdp) ※何らかの手段で送る – offer側 • receiveSDP(sdp) ※何らかの手段で受けてとる • peer.setRemoteDescription(sdp)
  15. 15. 後からmultistream : answer側で+1 Peer BPeer A createOffer() Peer-to-Peer offer SDP setLocalDescription() setLocalDescription() answer SDP (with ICE candidate) setRemoteDescription() createAnswer() setRemoteDescription() addStream(localStream) onnegotiationneeded() onaddstream(remote) REQUEST for re-createOffer
  16. 16. 後からmultistream : answer側で変化 • onnegotiationneeded()イベントを使う • offer:1 answer:1後、 answer +1 – answer側 • peer.addStream(stream2) • peer.onnegotiationneeded()発火 • ※何らかの手段で、offer側にSDP再送を依頼する – offer側 • peer.createOffer() • peer.setLocalDescription(sdp) • sendSDP(sdp) ※何らかの手段で送る – answer側 • receiveSDP(sdp) ※何らかの手段で受けてとる • peer.setRemoteDescription(sdp) • peer.createAnswer() • peer.setLocalDescription(sdp) • sendSDP(sdp) ※何らかの手段で送る – offer側 • receiveSDP(sdp) ※何らかの手段で受けてとる • peer.setRemoteDescription(sdp) • peer.onaddstream(stream2) 発火
  17. 17. 後からmultistream : Chrome • onnegotiationneeded()イベントを使う • offer:1 answer:1後、 offer +1 → OK (※ answer を再生成) • offer:2 answer:1後、 offer -1→ OK (※ answer を再生成) • offer:1 answer:2後、 offer +1→ OK (※ answer を再生成) • offer:2 answer:2後、 offer -1→ OK (※ answer を再生成) • offer:1 answer:1後、 answer +1 → OK – answer側のonnegotiationneeded → answer作らずスルー – offerを強制生成、answer側にoffer再セット(setRemote) – answer側で、ようやくanswer生成 – offer側に、asnwer再セット(setRemote) • offer:1 answer:2後、 answer -1 → OK (※同上) • offer:2 answer:1後、 answer +1 → OK (※同上) • offer:2 answer:2後、 answer -1 → OK (※同上)
  18. 18. 後からmultistream : Firefox • onnegotiationneeded()イベントを使う • offer:1 answer:1後、 offer +1 → OK. – ※+1時には、offer側では onnegotiationneededが呼ばれる。 – ※answerは強制生成 • offer:2 answer:1後、 offer -1→ NG. removeStream() できない – NotSupportedError: removeStream not yet implemented • offer:1 answer:2後、 offer +1→ その状況が作れない • offer:2 answer:2後、 offer -1→ NG. removeStream()できない • offer:1, answer:1後、 answer +1 → NG. Answer側でエラー – "Create Answer failed. err:" DOMException [InvalidStateError: "Cannot create answer in state stable" • offer:1, answer:2後、 answer -1 → その状況が作れない • offer:2, answer:1後、 answer +1 → NG?? Javascriptミス? • offer:2, answer:2後、 answer -1 → NG. removeStream()できない
  19. 19. オマケ1 • RTCPeerConnection.addTrack() … – onnegotiationneeded()発火しない • MedaiStreamTrack.enabled = true / false – メディア送信の on/offできる
  20. 20. オマケ2: 複数のMediaを使う手段 • 1 アプリに、複数 PeerConnection – 複数人のケースと同じ • 1 PeerConnection に、複数 MediaStream – 今回検証した範囲 • 1 MediaStream に、複数MediaStreamTrack – Chromeでは MediaStream.addTrack()は呼び出し可能 • ※特にイベントは発生しない – 受け側で 特定のTrackを指定して再生することはできないはず • URL.createObjectURL(stream) で、複数Trackをハンドリングできない – ※無理やり再生はできた • MediaStream 生成 → addTrack() → URL.createObjectURL()
  21. 21. オマケ2: 複数のMediaを使う手段 ※複数MediaStreamTrackから無理やり再生手順 var videoTracks = stream1.getVideoTracks(); var stream2 = new webkitMediaStream(); stream2.addTarck(videoTracks[1]); video.src = URL.createObjectURL(stream2);
  22. 22. Thank you!

×