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.9k
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
Django Ninja による API 開発効率化とリプレースの実践
kashewnuts
0
1.3k
Range on Rails ―「多重範囲型」という新たな選択肢が、複雑ロジックを劇的にシンプルにしたワケ
rizap_tech
0
130
Six and a half ridiculous things to do with Quarkus
hollycummins
0
170
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
200
技術的負債の正体を知って向き合う / Facing Technical Debt
irof
0
170
Go Conference 2025: Goで体感するMultipath TCP ― Go 1.24 時代の MPTCP Listener を理解する
takehaya
9
1.7k
kiroとCodexで最高のSpec駆動開発を!!数時間で web3ネイティブなミニゲームを作ってみたよ!
mashharuki
0
340
TFLintカスタムプラグインで始める Terraformコード品質管理
bells17
2
170
dynamic!
moro
10
7.9k
品質ワークショップをやってみた
nealle
0
200
2分台で1500examples完走!爆速CIを支える環境構築術 - Kaigi on Rails 2025
falcon8823
3
3.6k
「ちょっと古いから」って避けてた技術書、今だからこそ読もう
mottyzzz
10
6.7k
Featured
See All Featured
Testing 201, or: Great Expectations
jmmastey
45
7.7k
Writing Fast Ruby
sferik
629
62k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
jQuery: Nuts, Bolts and Bling
dougneiner
65
7.9k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
Mobile First: as difficult as doing things right
swwweet
224
10k
Making the Leap to Tech Lead
cromwellryan
135
9.6k
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
Building Better People: How to give real-time feedback that sticks.
wjessup
369
20k
Building an army of robots
kneath
306
46k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
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ʹ ྗΛೖΕ͍͖ͯ·͢ʂ
͋Γ͕ͱ͏͍͟͝·ͨ͠