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
Weblio英会話と 動作チェックツール「WebRTCくん」
Search
taminif
June 13, 2017
Programming
1
1.1k
Weblio英会話と 動作チェックツール「WebRTCくん」
WebRTC Meetup #15で登壇した資料です
taminif
June 13, 2017
Tweet
Share
More Decks by taminif
See All by taminif
PuppeteerとPlaywrightの15日間の演劇 / relation of Puppeteer and Playwright
taminif
3
2k
Redashの開発はじめました / How to get started Redash development
taminif
0
710
私の生活を変えたHeadless Chrome / Headless Chrome who changed my life
taminif
3
420
WebSocketをiOSに持ち込んで辛い思いをした経験がありますか!? / have you painful experience in web socket?
taminif
3
5.3k
LINEで馬券を購入する / Purchase a betting ticket at LINE
taminif
1
1.5k
SkyWayで一年間運用してきたけどWebRTCってつらいんじゃないの
taminif
2
950
オンライン英会話とSkyWay
taminif
0
460
オンライン英会話アプリとSkyWay
taminif
0
410
Mac1台でアプリを作る時代再び
taminif
0
400
Other Decks in Programming
See All in Programming
Streams APIとTCPフロー制御 / Web Streams API and TCP flow control
tasshi
2
350
Nurturing OpenJDK distribution: Eclipse Temurin Success History and plan
ivargrimstad
0
980
ヤプリ新卒SREの オンボーディング
masaki12
0
130
Why Jakarta EE Matters to Spring - and Vice Versa
ivargrimstad
0
1.2k
Realtime API 入門
riofujimon
0
150
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
120
CSC509 Lecture 12
javiergs
PRO
0
160
Click-free releases & the making of a CLI app
oheyadam
2
120
Arm移行タイムアタック
qnighy
0
340
初めてDefinitelyTypedにPRを出した話
syumai
0
420
型付き API リクエストを実現するいくつかの手法とその選択 / Typed API Request
euxn23
8
2.2k
どうして僕の作ったクラスが手続き型と言われなきゃいけないんですか
akikogoto
1
120
Featured
See All Featured
What's new in Ruby 2.0
geeforr
343
31k
The Art of Programming - Codeland 2020
erikaheidi
52
13k
Fashionably flexible responsive web design (full day workshop)
malarkey
405
65k
Optimising Largest Contentful Paint
csswizardry
33
2.9k
A Philosophy of Restraint
colly
203
16k
Keith and Marios Guide to Fast Websites
keithpitt
409
22k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
364
24k
Scaling GitHub
holman
458
140k
Designing for Performance
lara
604
68k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
329
21k
What's in a price? How to price your products and services
michaelherold
243
12k
A designer walks into a library…
pauljervisheath
204
24k
Transcript
Weblioӳձͱ ಈ࡞νΣοΫπʔϧ ʮWebRTC͘Μʯ WebRTC Meetup #15 2017/06/13 େౡ ޫو@taminif
ࣗݾհ • ΣϒϦΦגࣜձࣾॴଐWEBΤϯδχΞ • ීஈژͰಇ͍͍ͯ·͢ • ؔਓͳͷͰײಈΑΓস͍Λ͍͚ͨͩΔͱخ͍͠ Ͱ͢ʂ • WebRTC
meetup͕ؔ։࠵͞Εͳ͍ͷͰ Λ͠ʹདྷ·ͨ͠ʂ
Weblio ͝ଘͰ͔͢ʁ
http://ejje.weblio.jp/content/webrtc
ΦϯϥΠϯࣙॻΛఏڙ͢Δ WebαʔϏε
࣮ࣙॻҎ֎ʹ ͜ΜͳαʔϏεΛ͍ͬͯ ·͢
https://eikaiwa.weblio.jp/
ΦϯϥΠϯӳձαʔϏε
Skypeӳձͱݴ͑ ฉ͍ͨ͜ͱ͋Δํ ଟ͍ͷͰͳ͍Ͱ͠ΐ͏͔
ͦΜͳWeblioӳձͰ͕͢
ʂ
3݄1ΑΓɺWebRTCΛ ༻ͨ͠Ϩοεϯʹ Ҡߦ͠·ͨ͠ɻ
ར༻͍͓ͤͯͯ͞Γ·͢ʂ https://nttcom.github.io/skyway/
༨ஊ SkyWayϥΠϒϥϦ͕ ࠷ۙnpmʹొ͞Ε·ͨ͠
skyway-peerjs https://www.npmjs.com/package/skyway-peerjs https://www.npmjs.com/package/skyway શؔ͘ͳ͍ύοέʔδͳͷͰҙʂ
͜ͷΛआΓͯ ͓ྱਃ্͛͠·͢ʂ
ը໘հ
ϦϦʔεॳͷϏσΦϨοεϯը໘
3ϲ݄ɺӡ༻ͯ͠ Α͏҆͘ఆ͖ͯ͠·ͨ͠
ݱࡏͷϨοεϯը໘
Ұ௨Γ͠ऴ͑ͨͱ͜ΖͰ
͔͜͜Βӡ༻ͷͰ͢
WebRTCʹΑΔରԠͰ Ұ൪ۤ࿑͢Δͱ͜Ζ
֎෦σόΠε
֎෦σόΠεͷ ͜Ε͚ͩ͋Γ·ͨ͠ • ผͷΞϓϦʹϚΠΫΛऔΒΕΔ • ϚΠΫͷײ͕͍ • ϊʔτPCʹ֎͚ΧϝϥΛଓ͍ͯͯ͠ ෆྑΧϝϥΛબ͍ͯͨ͠ •
ਖ਼ମෆ໌ͷσόΠε
Pick up! • ผͷΞϓϦʹϚΠΫΛऔΒΕΔ • ϚΠΫͷײ͕͍ • ϊʔτPCʹ֎͚ΧϝϥΛଓ͍ͯͯ͠ ෆྑΧϝϥΛબ͍ͯͨ͠ •
ਖ਼ମෆ໌ͷσόΠε
؆୯ͳτϥϒϧ • ผͷΞϓϦʹϚΠΫΛऔΒΕΔ • ϚΠΫͷײ͕͍ • ϊʔτPCʹ֎͚ΧϝϥΛଓ͍ͯͯ͠ ෆྑΧϝϥΛબ͍ͯͨ͠ • ਖ਼ମෆ໌ͷσόΠε
ผͷΞϓϦʹ ϚΠΫΛऔΒΕΔ
SkypeͳͲͷϚΠΫΛ༻͢Δ ΞϓϦ͕ઌʹىಈ͍ͯ͠Δͱɺ ϒϥβ͕ϚΠΫΛऔಘͰ͖ͳ͍
ىಈ͠ͺͳͬ͠ʹ͢Δਓ͕ଟ͘ ݁ߏͳ͍߹Θ͕ͤ͋Γ·ͨ͠
ಈ࡞νΣοΫπʔϧ WebRTC͘Μ ͜͜Ͱੜ·Ε·͢
ੜ·Εͨཧ༝ WebRTCͷ ಈ࡞֬ೝͷͨΊ
WebRTCެࣜʹ νΣοΫπʔϧ͋Γ·͕͢
WebRTC Troubleshooter • WebRTCެࣜαΠτʹ ΧϝϥɾϚΠΫɾ௨৴ͷ νΣοΧʔ͕ଘࡏ͠·͢ https://test.webrtc.org/
νΣοΫπʔϧͰͳͯ͘ ϨοεϯͰ͖ͳ͍ɺ ͋·Γ༗ޮͰ ͋Γ·ͤΜͰͨ͠ɻ
WebRTC͘Μരʂ • WeblioӳձಠࣗͰը໘Λ࡞ • औಘͨ͠StreamΛWebRTCΛ௨͔ͯࣗ͡Βࣗ ʹૹ৴ • ϒϥβ νΣοΫͯ͠·͢ https://eikaiwa.weblio.jp/wte/vdolsndvcchk/
WebRTC͘Μ const constraints = getConstraints(); getUserMedia(constraints) .then((myStream) => { console.log("created
stream"); if (streamUrl !== null) { URL.revokeObjectURL(streamUrl); streamUrl = null; } // ૹΓଆ peer1 = new Peer(SKYWAY_OPTIONS); // ड͚ଆ peer2 = new Peer(SKYWAY_OPTIONS); peer2 .on("open", (id) => { console.log("sending stream..."); call = peer1.call(id, myStream); }) .on("call", (call) => { call.answer(); call .on("stream", (peerStream) => { console.log("received stream"); streamUrl = URL.createObjectURL(peerStream); $("#video").attr("src", streamUrl); }); }); }) தུʢॳظԽॲཧͱ͔ʣ ೋͭͷ1FFSΦϒδΣΫτ Λੜ ͔Βίʔϧ
WebRTC͘ΜσϞ
GithubͷWeblioެࣜʹ ιʔεΛΞοϓͯ͠·͢ʂ
github.com/weblio/webrtc-kun https://github.com/weblio/webrtc-kun
͔͠͠ɺͦΕͰ ӡ༻ҰےೄͰ͍͔ͣ
্ࡾͭ WebRTC͘ΜͰղܾ • ผͷΞϓϦʹϚΠΫΛऔΒΕΔ • ϚΠΫͷײ͕͍ • ϊʔτPCʹ֎͚ΧϝϥΛଓ͍ͯͯ͠ ෆྑΧϝϥΛબ͍ͯͨ͠ •
ਖ਼ମෆ໌ͷσόΠε
࠷ޙͷτϥϒϧ • ผͷΞϓϦʹϚΠΫΛऔΒΕΔ • ϚΠΫͷײ͕͍ • ϊʔτPCʹ֎͚ΧϝϥΛଓ͍ͯͯ͠ ෆྑΧϝϥΛબ͍ͯͨ͠ • ਖ਼ମෆ໌ͷσόΠε
ਖ਼ମෆ໌ͷσόΠε
ʁʁ
Weblioӳձ Χϝϥ͕ͳͯ͘ɺϚΠΫ ͕͋ΕϨοεϯՄೳͰ͢
ͳͷʹɺ͜Μͳ͍߹Θ͕ͤ • ࣗͷ͕ߨࢣʹಧ͔ͳ͍ • ߨࢣͷϏσΦɾԻಧ͍͍ͯΔ • ΧϝϥଓͤͣɺϚΠΫ͚ͩଓ • SkypeͰϨοεϯͰ͖͍ͯͨ
WebRTC͘ΜΛͬͯ ಉ͡ঢ়
࣌ؒΛ͔͚ͯ ௐࠪ͠·͕ͨ͠ɺ ݪҼ͕͔Βͣ…
͍ͨΩϟϓνϟΛݟΔͱ ΧϝϥཝʹṖͷจࣈ
͜͜ʹɺʮ$PSFM4DSFFO$BQʯͱ දࣔ͞Ε͍ͯ·ͨ͠ɻ
ݪҼٻϑϩʔ 1.Χϝϥଓ͞Ε͍ͯͳ͍ͷʹɺҰཡʹ ʮCorel ScreenCapʯͱ͍͏ṖͷσόΠε͕ग़ݱ 2.Ͳ͏ΒPCͷө૾Λը͢Δͷ 3.͜Ε͕ਅͬࠇɾແԻͷMediaStreamΛૹ͍ͬͯ Δʁ
ͦ͜Ͱ ʮΧϝϥΛΘͳ͍ʯ બࢶΛ༻ҙ͢Δ͜ͱʹ
ʮΧϝϥΛΘͳ͍ʯΛ ࣮ݱ͢Δίʔυ constraints.audio = { deviceId: audioId, }; if (videoId
!== "") { constraints.video = { deviceId: videoId, }; } ͭ·ΓΧϝϥσόΠεͷ ͕ͳ͚Εηοτ͠ͳ͍ <select name="videoId"> <option value=“Q3M…”> Corel ScreenCap </option> <option value=""> (disable camera) </option> </select> Χϝϥ෦ͷ ηϨΫτϘοΫεͷ ϚΠΫඞਢͳͷͰ ඞͣηοτ
ΧϝϥΛΘͳ͍͜ͱͰ Ի͕ฉ͑͜ΔΑ͏ʹ ͳΓ·ͨ͠ʂ
None
WebRTC͘Μʹ ʮΧϝϥΛΘͳ͍ʯ ༌ೖࡁΈͰ͢ʂ
͜ͷ݅ʹ͍ͭͯɺӳձΧελϚʔ αϙʔτ୲ʹղܾͷͨΊͨ͘ ͞Μͷ࿑ྗΛׂ͍͍͖ͯͨͩ·ͨ͠
·ͱΊ
3ϲ݄ӡ༻ͯ͠ ͔͑ͨͬͨ͜ͱ
ࠓճ͔͑ͨͬͨ͜ͱೋ • WebRTC͘Μͷ༷ͳ ಈ࡞νΣοΫπʔϧΛ༻ҙͨ͠ํ͕ྑ͍ • ʢΧϝϥඞਢͰͳ͚ΕʣΧϝϥΛΘͳ͍ બࢶΛ༻ҙͨ͠ํ͕ྑ͍
Weblioӳձ ͞ΒͳΔվળΛࢦͯ͠ ·ͩ·ͩWebRTCʹ ྗΛೖΕ͍͖ͯ·͢ʂ
͋Γ͕ͱ͏͍͟͝·ͨ͠