Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
WebRTC & SkyWay:オンラインビデオ会議サービス「1meeting」のリニューアルした時の話
Search
Miyuki Harada
January 18, 2018
1
300
WebRTC & SkyWay:オンラインビデオ会議サービス「1meeting」のリニューアルした時の話
Miyuki Harada
January 18, 2018
Tweet
Share
More Decks by Miyuki Harada
See All by Miyuki Harada
WebRTC in 5 minutes
mykhrd
0
69
飛び込みのLightning Talk
mykhrd
0
75
ライトニングトーーク
mykhrd
0
90
WB山口忘年会 LT
mykhrd
0
38
Word Translation Day
mykhrd
0
26
QiChatの基本
mykhrd
0
54
今までやってきたこと、これからやりたいこと
mykhrd
0
66
WordPressテーマの開発環境をもっと快適に
mykhrd
0
35
Featured
See All Featured
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
123
39k
The Brand Is Dead. Long Live the Brand.
mthomps
49
29k
Agile that works and the tools we love
rasmusluckow
325
20k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
21
1.4k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
13
8.3k
Making the Leap to Tech Lead
cromwellryan
125
8.5k
BBQ
matthewcrist
80
8.8k
jQuery: Nuts, Bolts and Bling
dougneiner
59
7.2k
Large-scale JavaScript Application Architecture
addyosmani
504
110k
Building a Modern Day E-commerce SEO Strategy
aleyda
21
6.4k
The Invisible Customer
myddelton
114
12k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
33
6k
Transcript
WebRTC & SkyWay オンラインビデオ会議サービス「1meeting」の リニューアルした時の話 SkyWay UG Fukuoka #1 2018.01.18
#WebRTCSkyWay
その前に
Thank You!!!!
事項紹介
事項紹介 ゆっきー twitter: @mykhrd_ • 元グラフィクデザイナー • ハラダ ミユキ •
2017年5⽉から Frontend Engineer@ Glue • 帰国⼦⼥(15年間海外に住んでいた) • ⽇本語苦⼿
本⽇のお話
本⽇のお話 • About Glue & 1meeting • What is WebRTC?
• Why SkyWay?
Glueについて
Glueについて • 2011年創業 • ⼤濠公園駅から歩いて5秒 • ⾃社サービス⾊々やってます
1meetingについて
1meetingについて ΦϯϥΠϯϏσΦձٞαʔϏεʮ1meetingʯ around 337,500 chat rooms created
• 2014年公開 • 開発チームのメンバー⼈数は: • ⼤変だったらしい 1meetingについて 1⼈ • WebRTC
1meetingのVideo/Chat周りではwebRTCだけど、 2016年からSkyWayのJavascriptSDKで動いてます 1meetingについて
1meetingについて • 2016年〜 SkyWay利⽤開始 • UI/フロントエンド周りはjQuery ϦχϡʔΞϧલ
1meetingについて • SPA(Single Page Application) • UI/フロントエンド周りはVueJS • SkyWay •
2017年7⽉の28⽇でリニューアル公開 ϦχϡʔΞϧޙ
具体的に⾔うと、 1meetingについて
1meetingについて
https://1meeting.net/skyway-ug-fukuoka 実際に使ってみましょう
WebRTCってなに?
WebRTCについて • webrtcのdemo ⾒たことある⼈(今回のdemo以外) Show of hands :) • 作ったことある⼈(開発中でもOK)
• プロダクトリリースしたことあるひと
WebRTCについて WebRTC = Web Real Time Communication
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
WebRTCについて • Video Chat • Multiplayer Gaming Use case example
• Security Cameras • Instant messaging • peerCDN • WebTorrent • IoT Interconnectivity • TeleHealth • Telepresence robot • 最近pixiv sketch live と コードエディタ上にも
WebRTCについて How communication in WebRTC works? Server Person1 Person2 1
2 3 4 5
WebRTCについて • Signaling server • STUN/ TURN Server(for NAT) WebRTC͏ͨΊʹԿ͕ඞཁ?
• Web Server
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… ͦΕͧΕͷϓϩτίϧΈΛߟ͑ͳ͍ͱ͍͚ͳ͍…
SkyWayを使って⾒た
Skywayを使って⾒て分かったこと • 開発/学習コスト減らせる • ⽇本語と英語のdocumentationがあるので助かる • フォーラムもある • UIは⾃分でカスタマイズ出来る/ Developer
Friendly • 信頼性 • モバイルとIoT⽤のSDKも提供している • サーバサイド側のことを考えなくてもスムーズに やりたいことを実装出来る
WebRTCリソース
WebRTCリソース https://webrtchacks.com/ https://dev.to/ http://www.rtc.news/ https://developers.google.com/ Tips, tutorialsなど: WebRTCニュース:
以上です
ありがとうございます