WebRTC & SkyWay：オンラインビデオ会議サービス「1meeting」のリニューアルした時の話

Transcript

1. WebRTC & SkyWay オンラインビデオ会議サービス「1meeting」の リニューアルした時の話 SkyWay UG Fukuoka #1 2018.01.18
2. #WebRTCSkyWay
3. その前に
4. Thank You!!!!
5. 事項紹介
6. 事項紹介 ゆっきー twitter: @mykhrd_ • 元グラフィクデザイナー • ハラダ ミユキ • 2017年5⽉から 
 Frontend Engineer@ Glue • 帰国⼦⼥（15年間海外に住んでいた） • ⽇本語苦⼿
7. 本⽇のお話
8. 本⽇のお話 • About Glue & 1meeting • What is WebRTC? • Why SkyWay?
9. Glueについて
10. Glueについて • 2011年創業 • ⼤濠公園駅から歩いて5秒 • ⾃社サービス⾊々やってます
11. 1meetingについて
12. 1meetingについて ΦϯϥΠϯϏσΦձٞαʔϏεʮ1meetingʯ around 337,500 chat rooms created
13. • 2014年公開 • 開発チームのメンバー⼈数は: • ⼤変だったらしい 1meetingについて 1⼈ • WebRTC
14. 1meetingのVideo/Chat周りではwebRTCだけど、 2016年からSkyWayのJavascriptSDKで動いてます 1meetingについて
15. 1meetingについて • 2016年〜 SkyWay利⽤開始 • UI/フロントエンド周りはjQuery ϦχϡʔΞϧલ
16. 1meetingについて • SPA（Single Page Application） • UI/フロントエンド周りはVueJS • SkyWay • 2017年7⽉の28⽇でリニューアル公開 ϦχϡʔΞϧޙ
17. 具体的に⾔うと、 1meetingについて
18. 1meetingについて
19. https://1meeting.net/skyway-ug-fukuoka 実際に使ってみましょう
20. WebRTCってなに？
21. WebRTCについて • webrtcのdemo ⾒たことある⼈（今回のdemo以外） Show of hands :) • 作ったことある⼈（開発中でもOK） • プロダクトリリースしたことあるひと
22. WebRTCについて WebRTC = Web Real Time Communication
23. WebRTCについて • Getting video and audio from input devices • Establish a P2P connection and sending audio and video • Sending or receiving arbitrary data WebRTC’s Main Tasks • Techniques for traversing NAT • Offering high quality royalty free codecs like Opus & VP8/9
24. WebRTCについて • Video Chat • Multiplayer Gaming Use case example • Security Cameras • Instant messaging • peerCDN • WebTorrent • IoT Interconnectivity • TeleHealth • Telepresence robot • 最近pixiv sketch live と コードエディタ上にも
25. WebRTCについて How communication in WebRTC works? Server Person1 Person2 1 2 3 4 5
26. WebRTCについて • Signaling server • STUN/ TURN Server（for NAT） WebRTC࢖͏ͨΊʹԿ͕ඞཁ? • Web Server
27. WebRTCについて αʔόʔαΠυଆͷ࣮૷͸ʁ αʔόαΠυͷ͜ͱ·Ͱ࣮૷͠Α͏ͱ͓΋ͬͨΒ… Signaling NAT traversal Media Codecs & Rendering Gateways Session Description Protocol User Authentication Security & access authorization Mobile Application Specifications Interactive Connectivity Establishment Session Traversal Utilities for NAT Traversal Using Relays around NAT ETC… ͦΕͧΕͷϓϩτίϧ΍࢓૊ΈΛߟ͑ͳ͍ͱ͍͚ͳ͍…
28. SkyWayを使って⾒た
29. Skywayを使って⾒て分かったこと • 開発/学習コスト減らせる • ⽇本語と英語のdocumentationがあるので助かる • フォーラムもある • UIは⾃分でカスタマイズ出来る/ Developer Friendly • 信頼性 • モバイルとIoT⽤のSDKも提供している • サーバサイド側のことを考えなくてもスムーズに やりたいことを実装出来る
30. WebRTCリソース
31. WebRTCリソース https://webrtchacks.com/ https://dev.to/ http://www.rtc.news/ https://developers.google.com/ Tips, tutorialsなど： WebRTCニュース：
32. 以上です
33. ありがとうございます