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
140
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
490
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
TypeScriptでDXを上げろ! Hono編
yusukebe
4
930
DataformでPythonする / dataform-de-python
snhryt
0
150
React 使いじゃなくても知っておきたい教養としての React
oukayuka
18
5.3k
はじめてのWeb API体験 ー 飲食店検索アプリを作ろうー
akinko_0915
0
180
Terraform やるなら公式スタイルガイドを読もう 〜重要項目 10選〜
hiyanger
11
2.8k
書き捨てではなく継続開発可能なコードをAIコーディングエージェントで書くために意識していること
shuyakinjo
0
190
What's new in Adaptive Android development
fornewid
0
130
React は次の10年を生き残れるか:3つのトレンドから考える
oukayuka
41
16k
Vibe Codingの幻想を超えて-生成AIを現場で使えるようにするまでの泥臭い話.ai
fumiyakume
21
10k
PHPUnitの限界をPlaywrightで補完するテストアプローチ
yuzneri
0
370
抽象化という思考のツール - 理解と活用 - / Abstraction-as-a-Tool-for-Thinking
shin1x1
1
930
可変性を制する設計: 構造と振る舞いから考える概念モデリングとその実装
a_suenami
10
1.5k
Featured
See All Featured
How to Think Like a Performance Engineer
csswizardry
25
1.8k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Art, The Web, and Tiny UX
lynnandtonic
301
21k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Agile that works and the tools we love
rasmusluckow
329
21k
Why Our Code Smells
bkeepers
PRO
337
57k
Speed Design
sergeychernyshev
32
1.1k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.4k
RailsConf 2023
tenderlove
30
1.2k
KATA
mclloyd
31
14k
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ʹ ྗΛೖΕ͍͖ͯ·͢ʂ
͋Γ͕ͱ͏͍͟͝·ͨ͠