Slide 1

Slide 1 text

Weblioӳձ࿩ͱ
 ಈ࡞νΣοΫπʔϧ ʮWebRTC͘Μʯ WebRTC Meetup #15 2017/06/13 େౡ ޫو@taminif

Slide 2

Slide 2 text

ࣗݾ঺հ • ΢ΣϒϦΦגࣜձࣾॴଐWEBΤϯδχΞ • ීஈ͸ژ౎Ͱಇ͍͍ͯ·͢ • ؔ੢ਓͳͷͰײಈΑΓস͍Λ͍͚ͨͩΔͱخ͍͠ Ͱ͢ʂ • WebRTC meetupؔ੢͕։࠵͞Εͳ͍ͷͰ
 ࿩Λ͠ʹདྷ·ͨ͠ʂ

Slide 3

Slide 3 text

Weblio ͝ଘ஌Ͱ͔͢ʁ

Slide 4

Slide 4 text

http://ejje.weblio.jp/content/webrtc

Slide 5

Slide 5 text

ΦϯϥΠϯࣙॻΛఏڙ͢Δ WebαʔϏε

Slide 6

Slide 6 text

࣮͸ࣙॻҎ֎ʹ΋ ͜ΜͳαʔϏεΛ΍͍ͬͯ ·͢

Slide 7

Slide 7 text

https://eikaiwa.weblio.jp/

Slide 8

Slide 8 text

ΦϯϥΠϯӳձ࿩αʔϏε

Slide 9

Slide 9 text

Skypeӳձ࿩ͱݴ͑͹ ฉ͍ͨ͜ͱ͋Δํ΋ ଟ͍ͷͰ͸ͳ͍Ͱ͠ΐ͏͔

Slide 10

Slide 10 text

ͦΜͳWeblioӳձ࿩Ͱ͕͢

Slide 11

Slide 11 text

஫໨ʂ

Slide 12

Slide 12 text

3݄1೔ΑΓɺWebRTCΛ ࢖༻ͨ͠Ϩοεϯʹ Ҡߦ͠·ͨ͠ɻ

Slide 13

Slide 13 text

ར༻ͤͯ͞௖͍͓ͯΓ·͢ʂ https://nttcom.github.io/skyway/

Slide 14

Slide 14 text

༨ஊ SkyWayϥΠϒϥϦ͕ ࠷ۙnpmʹొ࿥͞Ε·ͨ͠

Slide 15

Slide 15 text

skyway-peerjs https://www.npmjs.com/package/skyway-peerjs https://www.npmjs.com/package/skyway ͸શؔ͘܎ͳ͍ύοέʔδͳͷͰ஫ҙʂ

Slide 16

Slide 16 text

͜ͷ৔ΛआΓͯ ͓ྱਃ্͛͠·͢ʂ

Slide 17

Slide 17 text

ը໘঺հ

Slide 18

Slide 18 text

ϦϦʔε౰ॳͷϏσΦϨοεϯը໘

Slide 19

Slide 19 text

໿3ϲ݄ɺӡ༻ͯ͠ Α͏΍҆͘ఆ͖ͯ͠·ͨ͠

Slide 20

Slide 20 text

ݱࡏͷϨοεϯը໘

Slide 21

Slide 21 text

Ұ௨Γ࿩͠ऴ͑ͨͱ͜ΖͰ

Slide 22

Slide 22 text

͔͜͜Βӡ༻ͷ࿩Ͱ͢

Slide 23

Slide 23 text

WebRTCʹΑΔରԠͰ Ұ൪ۤ࿑͢Δͱ͜Ζ

Slide 24

Slide 24 text

֎෦σόΠε໰୊

Slide 25

Slide 25 text

֎෦σόΠεͷ໰୊͸ ͜Ε͚ͩ͋Γ·ͨ͠ • ผͷΞϓϦʹϚΠΫΛऔΒΕΔ • ϚΠΫͷײ౓͕௿͍ • ϊʔτPCʹ֎෇͚ΧϝϥΛ઀ଓ͍ͯͯ͠
 ෆྑΧϝϥΛબ୒͍ͯͨ͠ • ਖ਼ମෆ໌ͷσόΠε

Slide 26

Slide 26 text

Pick up! • ผͷΞϓϦʹϚΠΫΛऔΒΕΔ • ϚΠΫͷײ౓͕௿͍ • ϊʔτPCʹ֎෇͚ΧϝϥΛ઀ଓ͍ͯͯ͠
 ෆྑΧϝϥΛબ୒͍ͯͨ͠ • ਖ਼ମෆ໌ͷσόΠε

Slide 27

Slide 27 text

؆୯ͳτϥϒϧ • ผͷΞϓϦʹϚΠΫΛऔΒΕΔ • ϚΠΫͷײ౓͕௿͍ • ϊʔτPCʹ֎෇͚ΧϝϥΛ઀ଓ͍ͯͯ͠
 ෆྑΧϝϥΛબ୒͍ͯͨ͠ • ਖ਼ମෆ໌ͷσόΠε

Slide 28

Slide 28 text

ผͷΞϓϦʹ ϚΠΫΛऔΒΕΔ

Slide 29

Slide 29 text

SkypeͳͲͷϚΠΫΛ࢖༻͢Δ ΞϓϦ͕ઌʹىಈ͍ͯ͠Δͱɺ ϒϥ΢β͕ϚΠΫΛऔಘͰ͖ͳ͍

Slide 30

Slide 30 text

ىಈ͠ͺͳͬ͠ʹ͢Δਓ͕ଟ͘ ݁ߏͳ໰͍߹Θ͕ͤ͋Γ·ͨ͠

Slide 31

Slide 31 text

ಈ࡞νΣοΫπʔϧ WebRTC͘Μ͸ ͜͜Ͱੜ·Ε·͢

Slide 32

Slide 32 text

ੜ·Εͨཧ༝͸ WebRTCͷ ಈ࡞֬ೝͷͨΊ

Slide 33

Slide 33 text

WebRTCެࣜʹ νΣοΫπʔϧ͸͋Γ·͕͢

Slide 34

Slide 34 text

WebRTC Troubleshooter • WebRTCެࣜαΠτʹ
 ΧϝϥɾϚΠΫɾ௨৴ͷ
 νΣοΧʔ͕ଘࡏ͠·͢ https://test.webrtc.org/

Slide 35

Slide 35 text

νΣοΫπʔϧͰ໰୊ͳͯ͘ ΋ϨοεϯͰ͖ͳ͍౳ɺ ͋·Γ༗ޮͰ͸ ͋Γ·ͤΜͰͨ͠ɻ

Slide 36

Slide 36 text

WebRTC͘Μര஀ʂ • Weblioӳձ࿩ಠࣗͰը໘Λ࡞੒ • औಘͨ͠StreamΛWebRTCΛ௨ͯࣗ͡෼͔Βࣗ෼ ʹૹ৴ • ϒϥ΢β΋
 νΣοΫͯ͠·͢ https://eikaiwa.weblio.jp/wte/vdolsndvcchk/

Slide 37

Slide 37 text

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ΦϒδΣΫτ Λੜ੒ ͔Β΁ίʔϧ

Slide 38

Slide 38 text

WebRTC͘ΜσϞ

Slide 39

Slide 39 text

GithubͷWeblioެࣜʹ ιʔεΛΞοϓͯ͠·͢ʂ

Slide 40

Slide 40 text

github.com/weblio/webrtc-kun https://github.com/weblio/webrtc-kun

Slide 41

Slide 41 text

͔͠͠ɺͦΕͰ΋ ӡ༻͸ҰےೄͰ͸͍͔ͣ

Slide 42

Slide 42 text

্ࡾͭ͸
 WebRTC͘ΜͰղܾ • ผͷΞϓϦʹϚΠΫΛऔΒΕΔ • ϚΠΫͷײ౓͕௿͍ • ϊʔτPCʹ֎෇͚ΧϝϥΛ઀ଓ͍ͯͯ͠
 ෆྑΧϝϥΛબ୒͍ͯͨ͠ • ਖ਼ମෆ໌ͷσόΠε

Slide 43

Slide 43 text

࠷ޙͷτϥϒϧ • ผͷΞϓϦʹϚΠΫΛऔΒΕΔ • ϚΠΫͷײ౓͕௿͍ • ϊʔτPCʹ֎෇͚ΧϝϥΛ઀ଓ͍ͯͯ͠
 ෆྑΧϝϥΛબ୒͍ͯͨ͠ • ਖ਼ମෆ໌ͷσόΠε

Slide 44

Slide 44 text

ਖ਼ମෆ໌ͷσόΠε

Slide 45

Slide 45 text

ʁʁ

Slide 46

Slide 46 text

Weblioӳձ࿩͸ Χϝϥ͕ͳͯ͘΋ɺϚΠΫ ͕͋Ε͹ϨοεϯՄೳͰ͢

Slide 47

Slide 47 text

ͳͷʹɺ͜Μͳ໰͍߹Θ͕ͤ • ࣗ෼ͷ੠͕ߨࢣʹಧ͔ͳ͍ • ߨࢣͷϏσΦɾԻ੠͸ಧ͍͍ͯΔ • Χϝϥ͸઀ଓͤͣɺϚΠΫ͚ͩ઀ଓ • SkypeͰ͸ϨοεϯͰ͖͍ͯͨ

Slide 48

Slide 48 text

WebRTC͘ΜΛ࢖ͬͯ΋ ಉ͡঱ঢ়

Slide 49

Slide 49 text

࣌ؒΛ͔͚ͯ ௐࠪ͠·͕ͨ͠ɺ ݪҼ͕෼͔Βͣ…

Slide 50

Slide 50 text

௖͍ͨΩϟϓνϟΛݟΔͱ ΧϝϥཝʹṖͷจࣈ

Slide 51

Slide 51 text

͜͜ʹɺʮ$PSFM4DSFFO$BQʯͱ දࣔ͞Ε͍ͯ·ͨ͠ɻ

Slide 52

Slide 52 text

ݪҼ௥ٻϑϩʔ 1.Χϝϥ͸઀ଓ͞Ε͍ͯͳ͍ͷʹɺҰཡʹ
 ʮCorel ScreenCapʯͱ͍͏ṖͷσόΠε͕ग़ݱ 2.Ͳ͏΍ΒPCͷө૾Λ࿥ը͢Δ΋ͷ 3.͜Ε͕ਅͬࠇɾແԻͷMediaStreamΛૹ͍ͬͯ Δʁ

Slide 53

Slide 53 text

ͦ͜Ͱ ʮΧϝϥΛ࢖Θͳ͍ʯ બ୒ࢶΛ༻ҙ͢Δ͜ͱʹ

Slide 54

Slide 54 text

ʮΧϝϥΛ࢖Θͳ͍ʯΛ ࣮ݱ͢Δίʔυ constraints.audio = { deviceId: audioId, }; if (videoId !== "") { constraints.video = { deviceId: videoId, }; } ͭ·ΓΧϝϥσόΠεͷ ஋͕ͳ͚Ε͹ηοτ͠ͳ͍ Corel ScreenCap (disable camera) Χϝϥ෦෼ͷ ηϨΫτϘοΫεͷ஋ ϚΠΫ͸ඞਢͳͷͰ ඞͣηοτ

Slide 55

Slide 55 text

ΧϝϥΛ࢖Θͳ͍͜ͱͰ Ի੠͕ฉ͑͜ΔΑ͏ʹ ͳΓ·ͨ͠ʂ

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

WebRTC͘Μʹ΋ ʮΧϝϥΛ࢖Θͳ͍ʯ͸ ༌ೖࡁΈͰ͢ʂ

Slide 58

Slide 58 text

͜ͷ݅ʹ͍ͭͯ͸ɺӳձ࿩ΧελϚʔ αϙʔτ୲౰ʹ͸໰୊ղܾͷͨΊͨ͘ ͞Μͷ࿑ྗΛׂ͍͍͖ͯͨͩ·ͨ͠

Slide 59

Slide 59 text

·ͱΊ

Slide 60

Slide 60 text

໿3ϲ݄ӡ༻ͯ͠ ఻͔͑ͨͬͨ͜ͱ

Slide 61

Slide 61 text

ࠓճ఻͔͑ͨͬͨ͜ͱೋ఺ • WebRTC͘Μͷ༷ͳ
 ಈ࡞νΣοΫπʔϧΛ༻ҙͨ͠ํ͕ྑ͍ • ʢΧϝϥඞਢͰͳ͚Ε͹ʣΧϝϥΛ࢖Θͳ͍
 બ୒ࢶΛ༻ҙͨ͠ํ͕ྑ͍

Slide 62

Slide 62 text

Weblioӳձ࿩͸ ͞ΒͳΔվળΛ໨ࢦͯ͠ ·ͩ·ͩWebRTCʹ ྗΛೖΕ͍͖ͯ·͢ʂ

Slide 63

Slide 63 text

͋Γ͕ͱ͏͍͟͝·ͨ͠