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
「とりあえずAI」が招く悲劇〜私がAIで生産性を下げるまでの話〜 / The tragedy caused by "AI for now" - The story of how I used AI to reduce my productivity
taminif
1
220
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
500
WebSocketをiOSに持ち込んで辛い思いをした経験がありますか!? / have you painful experience in web socket?
taminif
3
5.8k
LINEで馬券を購入する / Purchase a betting ticket at LINE
taminif
1
1.6k
SkyWayで一年間運用してきたけどWebRTCってつらいんじゃないの
taminif
2
1k
オンライン英会話とSkyWay
taminif
0
520
オンライン英会話アプリとSkyWay
taminif
0
460
Other Decks in Programming
See All in Programming
iOS 17で追加されたSubscriptionStoreView を利用して5分でサブスク実装チャレンジ
natmark
0
590
Advance Your Career with Open Source
ivargrimstad
0
330
プログラミングどうやる? ~テスト駆動開発から学ぶ達人の型~
a_okui
0
190
プログラマのための作曲入門
cheebow
0
540
止められない医療アプリ、そっと Swift 6 へ
medley
1
120
CSC305 Lecture 04
javiergs
PRO
0
250
あなたの知らない「動画広告」の世界 - iOSDC Japan 2025
ukitaka
0
380
2分台で1500examples完走!爆速CIを支える環境構築術 - Kaigi on Rails 2025
falcon8823
3
3.1k
開発者への寄付をアプリ内課金として実装する時の気の使いどころ
ski
0
350
CSC509 Lecture 05
javiergs
PRO
0
290
AI Coding Meetup #3 - 導入セッション / ai-coding-meetup-3
izumin5210
0
590
dynamic!
moro
9
6.5k
Featured
See All Featured
Optimizing for Happiness
mojombo
379
70k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
For a Future-Friendly Web
brad_frost
180
9.9k
How to Think Like a Performance Engineer
csswizardry
27
2k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.5k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
960
Product Roadmaps are Hard
iamctodd
PRO
54
11k
The Cult of Friendly URLs
andyhume
79
6.6k
A designer walks into a library…
pauljervisheath
209
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ʹ ྗΛೖΕ͍͖ͯ·͢ʂ
͋Γ͕ͱ͏͍͟͝·ͨ͠