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.2k
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
2.2k
Redashの開発はじめました / How to get started Redash development
taminif
0
760
私の生活を変えたHeadless Chrome / Headless Chrome who changed my life
taminif
3
480
WebSocketをiOSに持ち込んで辛い思いをした経験がありますか!? / have you painful experience in web socket?
taminif
3
5.7k
LINEで馬券を購入する / Purchase a betting ticket at LINE
taminif
1
1.6k
SkyWayで一年間運用してきたけどWebRTCってつらいんじゃないの
taminif
2
990
オンライン英会話とSkyWay
taminif
0
510
オンライン英会話アプリとSkyWay
taminif
0
450
Mac1台でアプリを作る時代再び
taminif
0
420
Other Decks in Programming
See All in Programming
データベースコネクションプール(DBCP)の変遷と理解
fujikawa8
1
270
ReadMoreTextView
fornewid
1
450
GoのGenericsによるslice操作との付き合い方
syumai
2
680
[初登壇@jAZUG]アプリ開発者が気になるGoogleCloud/Azure+wasm/wasi
asaringo
0
130
XP, Testing and ninja testing
m_seki
2
130
AWS CDKの推しポイント 〜CloudFormationと比較してみた〜
akihisaikeda
3
290
Kotlin エンジニアへ送る:Swift 案件に参加させられる日に備えて~似てるけど色々違う Swift の仕様 / from Kotlin to Swift
lovee
1
250
カクヨムAndroidアプリのリブート
numeroanddev
0
430
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
130
生成AIコーディングとの向き合い方、AIと共創するという考え方 / How to deal with generative AI coding and the concept of co-creating with AI
seike460
PRO
1
320
Benchmark
sysong
0
230
Team topologies and the microservice architecture: a synergistic relationship
cer
PRO
0
930
Featured
See All Featured
Visualization
eitanlees
146
16k
Music & Morning Musume
bryan
46
6.6k
Code Review Best Practice
trishagee
68
18k
A Tale of Four Properties
chriscoyier
160
23k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3k
Optimizing for Happiness
mojombo
379
70k
Stop Working from a Prison Cell
hatefulcrawdad
270
20k
What's in a price? How to price your products and services
michaelherold
245
12k
Code Reviewing Like a Champion
maltzj
524
40k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
16
940
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
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ʹ ྗΛೖΕ͍͖ͯ·͢ʂ
͋Γ͕ͱ͏͍͟͝·ͨ͠