Weblio英会話と 動作チェックツール「WebRTCくん」

WebRTC Meetup #15で登壇した資料です

Transcript

1. Weblioӳձ࿩ͱ
 ಈ࡞νΣοΫπʔϧ ʮWebRTC͘Μʯ WebRTC Meetup #15 2017/06/13 େౡ ޫو@taminif
2. ࣗݾ঺հ • ΢ΣϒϦΦגࣜձࣾॴଐWEBΤϯδχΞ • ීஈ͸ژ౎Ͱಇ͍͍ͯ·͢ • ؔ੢ਓͳͷͰײಈΑΓস͍Λ͍͚ͨͩΔͱخ͍͠ Ͱ͢ʂ • WebRTC meetupؔ੢͕։࠵͞Εͳ͍ͷͰ
 ࿩Λ͠ʹདྷ·ͨ͠ʂ
3. Weblio ͝ଘ஌Ͱ͔͢ʁ
4. http://ejje.weblio.jp/content/webrtc
5. ΦϯϥΠϯࣙॻΛఏڙ͢Δ WebαʔϏε
6. ࣮͸ࣙॻҎ֎ʹ΋ ͜ΜͳαʔϏεΛ΍͍ͬͯ ·͢
7. https://eikaiwa.weblio.jp/
8. ΦϯϥΠϯӳձ࿩αʔϏε
9. Skypeӳձ࿩ͱݴ͑͹ ฉ͍ͨ͜ͱ͋Δํ΋ ଟ͍ͷͰ͸ͳ͍Ͱ͠ΐ͏͔
10. ͦΜͳWeblioӳձ࿩Ͱ͕͢
11. ஫໨ʂ
12. 3݄1೔ΑΓɺWebRTCΛ ࢖༻ͨ͠Ϩοεϯʹ Ҡߦ͠·ͨ͠ɻ
13. ར༻ͤͯ͞௖͍͓ͯΓ·͢ʂ https://nttcom.github.io/skyway/
14. ༨ஊ SkyWayϥΠϒϥϦ͕ ࠷ۙnpmʹొ࿥͞Ε·ͨ͠
15. skyway-peerjs https://www.npmjs.com/package/skyway-peerjs https://www.npmjs.com/package/skyway ͸શؔ͘܎ͳ͍ύοέʔδͳͷͰ஫ҙʂ
16. ͜ͷ৔ΛआΓͯ ͓ྱਃ্͛͠·͢ʂ
17. ը໘঺հ
18. ϦϦʔε౰ॳͷϏσΦϨοεϯը໘
19. ໿3ϲ݄ɺӡ༻ͯ͠ Α͏΍҆͘ఆ͖ͯ͠·ͨ͠
20. ݱࡏͷϨοεϯը໘
21. Ұ௨Γ࿩͠ऴ͑ͨͱ͜ΖͰ
22. ͔͜͜Βӡ༻ͷ࿩Ͱ͢
23. WebRTCʹΑΔରԠͰ Ұ൪ۤ࿑͢Δͱ͜Ζ
24. ֎෦σόΠε໰୊
25. ֎෦σόΠεͷ໰୊͸ ͜Ε͚ͩ͋Γ·ͨ͠ • ผͷΞϓϦʹϚΠΫΛऔΒΕΔ • ϚΠΫͷײ౓͕௿͍ • ϊʔτPCʹ֎෇͚ΧϝϥΛ઀ଓ͍ͯͯ͠
 ෆྑΧϝϥΛબ୒͍ͯͨ͠ • ਖ਼ମෆ໌ͷσόΠε
26. Pick up! • ผͷΞϓϦʹϚΠΫΛऔΒΕΔ • ϚΠΫͷײ౓͕௿͍ • ϊʔτPCʹ֎෇͚ΧϝϥΛ઀ଓ͍ͯͯ͠
 ෆྑΧϝϥΛબ୒͍ͯͨ͠ • ਖ਼ମෆ໌ͷσόΠε
27. ؆୯ͳτϥϒϧ • ผͷΞϓϦʹϚΠΫΛऔΒΕΔ • ϚΠΫͷײ౓͕௿͍ • ϊʔτPCʹ֎෇͚ΧϝϥΛ઀ଓ͍ͯͯ͠
 ෆྑΧϝϥΛબ୒͍ͯͨ͠ • ਖ਼ମෆ໌ͷσόΠε
28. ผͷΞϓϦʹ ϚΠΫΛऔΒΕΔ
29. SkypeͳͲͷϚΠΫΛ࢖༻͢Δ ΞϓϦ͕ઌʹىಈ͍ͯ͠Δͱɺ ϒϥ΢β͕ϚΠΫΛऔಘͰ͖ͳ͍
30. ىಈ͠ͺͳͬ͠ʹ͢Δਓ͕ଟ͘ ݁ߏͳ໰͍߹Θ͕ͤ͋Γ·ͨ͠
31. ಈ࡞νΣοΫπʔϧ WebRTC͘Μ͸ ͜͜Ͱੜ·Ε·͢
32. ੜ·Εͨཧ༝͸ WebRTCͷ ಈ࡞֬ೝͷͨΊ
33. WebRTCެࣜʹ νΣοΫπʔϧ͸͋Γ·͕͢
34. WebRTC Troubleshooter • WebRTCެࣜαΠτʹ
 ΧϝϥɾϚΠΫɾ௨৴ͷ
 νΣοΧʔ͕ଘࡏ͠·͢ https://test.webrtc.org/
35. νΣοΫπʔϧͰ໰୊ͳͯ͘ ΋ϨοεϯͰ͖ͳ͍౳ɺ ͋·Γ༗ޮͰ͸ ͋Γ·ͤΜͰͨ͠ɻ
36. WebRTC͘Μര஀ʂ • Weblioӳձ࿩ಠࣗͰը໘Λ࡞੒ • औಘͨ͠StreamΛWebRTCΛ௨ͯࣗ͡෼͔Βࣗ෼ ʹૹ৴ • ϒϥ΢β΋
 νΣοΫͯ͠·͢ https://eikaiwa.weblio.jp/wte/vdolsndvcchk/
37. 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ΦϒδΣΫτ Λੜ੒ ͔Β΁ίʔϧ
38. WebRTC͘ΜσϞ
39. GithubͷWeblioެࣜʹ ιʔεΛΞοϓͯ͠·͢ʂ
40. github.com/weblio/webrtc-kun https://github.com/weblio/webrtc-kun
41. ͔͠͠ɺͦΕͰ΋ ӡ༻͸ҰےೄͰ͸͍͔ͣ
42. ্ࡾͭ͸
 WebRTC͘ΜͰղܾ • ผͷΞϓϦʹϚΠΫΛऔΒΕΔ • ϚΠΫͷײ౓͕௿͍ • ϊʔτPCʹ֎෇͚ΧϝϥΛ઀ଓ͍ͯͯ͠
 ෆྑΧϝϥΛબ୒͍ͯͨ͠ • ਖ਼ମෆ໌ͷσόΠε
43. ࠷ޙͷτϥϒϧ • ผͷΞϓϦʹϚΠΫΛऔΒΕΔ • ϚΠΫͷײ౓͕௿͍ • ϊʔτPCʹ֎෇͚ΧϝϥΛ઀ଓ͍ͯͯ͠
 ෆྑΧϝϥΛબ୒͍ͯͨ͠ • ਖ਼ମෆ໌ͷσόΠε
44. ਖ਼ମෆ໌ͷσόΠε
45. ʁʁ
46. Weblioӳձ࿩͸ Χϝϥ͕ͳͯ͘΋ɺϚΠΫ ͕͋Ε͹ϨοεϯՄೳͰ͢
47. ͳͷʹɺ͜Μͳ໰͍߹Θ͕ͤ • ࣗ෼ͷ੠͕ߨࢣʹಧ͔ͳ͍ • ߨࢣͷϏσΦɾԻ੠͸ಧ͍͍ͯΔ • Χϝϥ͸઀ଓͤͣɺϚΠΫ͚ͩ઀ଓ • SkypeͰ͸ϨοεϯͰ͖͍ͯͨ
48. WebRTC͘ΜΛ࢖ͬͯ΋ ಉ͡঱ঢ়
49. ࣌ؒΛ͔͚ͯ ௐࠪ͠·͕ͨ͠ɺ ݪҼ͕෼͔Βͣ…
50. ௖͍ͨΩϟϓνϟΛݟΔͱ ΧϝϥཝʹṖͷจࣈ
51. ͜͜ʹɺʮ$PSFM
    4DSFFO$BQʯͱ
    දࣔ͞Ε͍ͯ·ͨ͠ɻ
52. ݪҼ௥ٻϑϩʔ 1.Χϝϥ͸઀ଓ͞Ε͍ͯͳ͍ͷʹɺҰཡʹ
 ʮCorel ScreenCapʯͱ͍͏ṖͷσόΠε͕ग़ݱ 2.Ͳ͏΍ΒPCͷө૾Λ࿥ը͢Δ΋ͷ 3.͜Ε͕ਅͬࠇɾແԻͷMediaStreamΛૹ͍ͬͯ Δʁ
53. ͦ͜Ͱ ʮΧϝϥΛ࢖Θͳ͍ʯ બ୒ࢶΛ༻ҙ͢Δ͜ͱʹ
54. ʮΧϝϥΛ࢖Θͳ͍ʯΛ ࣮ݱ͢Δίʔυ 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> Χϝϥ෦෼ͷ
    ηϨΫτϘοΫεͷ஋ ϚΠΫ͸ඞਢͳͷͰ
    ඞͣηοτ
55. ΧϝϥΛ࢖Θͳ͍͜ͱͰ Ի੠͕ฉ͑͜ΔΑ͏ʹ ͳΓ·ͨ͠ʂ
57. WebRTC͘Μʹ΋ ʮΧϝϥΛ࢖Θͳ͍ʯ͸ ༌ೖࡁΈͰ͢ʂ
58. ͜ͷ݅ʹ͍ͭͯ͸ɺӳձ࿩ΧελϚʔ αϙʔτ୲౰ʹ͸໰୊ղܾͷͨΊͨ͘ ͞Μͷ࿑ྗΛׂ͍͍͖ͯͨͩ·ͨ͠
59. ·ͱΊ
60. ໿3ϲ݄ӡ༻ͯ͠ ఻͔͑ͨͬͨ͜ͱ
61. ࠓճ఻͔͑ͨͬͨ͜ͱೋ఺ • WebRTC͘Μͷ༷ͳ
 ಈ࡞νΣοΫπʔϧΛ༻ҙͨ͠ํ͕ྑ͍ • ʢΧϝϥඞਢͰͳ͚Ε͹ʣΧϝϥΛ࢖Θͳ͍
 બ୒ࢶΛ༻ҙͨ͠ํ͕ྑ͍
62. Weblioӳձ࿩͸ ͞ΒͳΔվળΛ໨ࢦͯ͠ ·ͩ·ͩWebRTCʹ ྗΛೖΕ͍͖ͯ·͢ʂ
63. ͋Γ͕ͱ͏͍͟͝·ͨ͠