Upgrade to Pro — share decks privately, control downloads, hide ads and more …

クラウドを活用した WebRTC コールセンターの最前線

Kiminari Homma
September 17, 2016

クラウドを活用した WebRTC コールセンターの最前線

Kiminari Homma

September 17, 2016
Tweet

More Decks by Kiminari Homma

Other Decks in Technology

Transcript

  1. ຊؒ ߖ੒ @kimihom CTO at selfree,llc TwilioJP-UG ϝϯόʔ CallConnect (ి࿩αϙʔτΛ؆୯ʹ)

    ϒϩά “ϘΫίί” ӡӦ https://www.callconnect.jp http://www.bokukoko.info/ Who am Iʁ
  2. • Ϋϥ΢υ PBX αʔϏεͱಉ౳ͷ࢓૊ΈΛ API Ͱɹɹɹ ఏڙ͠ɺ։ൃऀ͕ࣗ༝ʹి࿩γεςϜΛߏஙͰ͖Δ • ి࿩γεςϜͷ࢓૊ΈΛ Web

    ٕज़ͷΈ Ͱ࣮ݱ ࠶ੜɺసૹɺ࿥Իɺอཹɺϓογϡૢ࡞ɺΩϡʔɾɾ • ి࿩ճઢ͕ෆཁ • νϟωϧͷ֓೦͕ͳ͍ Voice
  3. Topic • ίʔϧηϯλʔͷྺ࢙ͱ࢓૊Έ • ίʔϧηϯλʔ ͱ WebRTC • WebRTC ίʔϧηϯλʔͷ࣮ྫ

    • ίʔϧηϯλʔͷྺ࢙ͱ࢓૊Έ • ίʔϧηϯλʔ ͱ WebRTC • WebRTC ίʔϧηϯλʔͷ࣮ྫ • ऴΘΓʹ
  4. WebRTC ͰͰ͖Δ͜ͱ • ి࿩ • ࿥Ի • ϏσΦ௨࿩ • σʔλڞ༗

    • ө૾഑৴ Ϣʔβʔ͸ઐ༻ϓϥάΠϯແ͠Ͱར༻Մೳ
  5. WebRTC ίʔϧηϯλʔͷར఺ • ి࿩ ͱ Web ͷ༥߹ • Chrome ͚ͩͰίʔϧηϯλʔΛ࣮ݱͰ͖Δ

    > ௿Ձ֨, ಋೖ༰қ, ߴػೳ • ి࿩/ϏσΦ/νϟοτ “ΦϜχνϟωϧԽ”
  6. • Ϋϥ΢υ ”ίϛϡχέʔγϣϯ” API αʔϏε Ի੠௨࿩ / SMS / ϏσΦ

    / νϟοτ / ௨஌ / ಉظ / IoT • Add-on Ͱ Watson ͱͷ࿈ܞ΋༰қ • ࢝Ί͔Βैྔ՝ۚ • શࠃͰษڧձ΍ͬͯ·͢ (Twilio-UG)
  7. Topic • ίʔϧηϯλʔͷྺ࢙ͱ࢓૊Έ • ίʔϧηϯλʔ ͱ WebRTC • WebRTC ίʔϧηϯλʔͷ࣮ྫ

    • ίʔϧηϯλʔͷྺ࢙ͱ࢓૊Έ • ίʔϧηϯλʔ ͱ WebRTC • WebRTC ίʔϧηϯλʔͷ࣮ྫ • ऴΘΓʹ
  8. • ࠃ಺།Ұͷ׬શ SaaS ܕ WebRTC ίʔϧηϯλʔ • 5෼Ͱಋೖ/ӡ༻Մೳ • 14೔ແྉτϥΠΞϧ

    • PC ి࿩ͱڞʹɺސ٬৘ใ΍௨࿩ཤྺΛ Web ্Ͱ؅ཧ • ଞΫϥ΢υαʔϏεͱͷ࿈ܞ
  9. WebRTC αʔϏεͷӡ༻ • iOS ະରԠ (ݱঢ় iOS Chrome Ͱ΋ར༻ෆՄ) •

    Ϣʔβʔ؀ڥΛνΣοΫ͢Δϖʔδ ͸ඞਢ • ϔουηοτͷ඼࣭ • ωοτϫʔΫ (઀ଓঢ়ଶ, ಉ࣌઀ଓ, ஍ཧ) • Ի࣭͕ѱ͍ͱ͍͏໰͍߹Θͤ͸Α͘དྷΔ 98% ωοτϫʔΫ΍ϚΠΫͷ઀ଓෆྑʹΑΔ΋ͷ
  10. Topic • ίʔϧηϯλʔͷྺ࢙ͱ࢓૊Έ • ίʔϧηϯλʔ ͱ WebRTC • WebRTC ίʔϧηϯλʔͷ࣮ྫ

    • ίʔϧηϯλʔͷྺ࢙ͱ࢓૊Έ • ίʔϧηϯλʔ ͱ WebRTC • WebRTC ίʔϧηϯλʔͷ࣮ྫ • ऴΘΓʹ
  11. ͝঺հ͢Δ HTML 5 • WebRTC • WebSocket • History API

    • Canvas • File API • Web Speech API • Web Notifications • Service Worker • Device API
  12. WebRTC ͰͰ͖Δ͜ͱ • ϏσΦ௨࿩ • ి࿩ • ࿥Ի • σʔλڞ༗

    • ө૾഑৴ Ϣʔβʔ͸ઐ༻ϓϥάΠϯແ͠Ͱར༻Մೳ
  13. WebRTC Ϋϥ΢υαʔϏε • Twilio • SkyWay • Tropo WebRTC ࠷৽ͷ௥ै

    WebRTC ͷίΞ࣮૷Λ ҙࣝͤͣʹϦΞϧλΠϜ αʔϏεΛߏஙͰ͖Δ SDK
  14. // ॳظԽ Twilio.Device.setup(“Twilio Token”); // ॳظԽ׬ྃ࣌ Twilio.Device.ready(function (device) { console.log("ண৴Մೳ");

    } // ண৴࣌ Twilio.Device.incoming(function (conn) { conn.accept(); // ௨࿩։࢝ } // ௨࿩։࢝࣌ Twilio.Device.connect(function (conn) { console.log("௨࿩த"); }); ਺ߦͷίʔυͰϦΞϧλΠϜ௨৴ػೳΛ࣮ݱʂ
  15. WebRTC αʔϏεͷӡ༻ • iOS ະରԠ (ݱঢ় iOS Chrome Ͱ΋ར༻ෆՄ) •

    Ϣʔβʔ؀ڥΛνΣοΫ͢Δϖʔδ͸ඞਢ • ϔουηοτͷ඼࣭ • ωοτϫʔΫ (઀ଓঢ়ଶ, ಉ࣌઀ଓ, ஍ཧ) • Ի࣭͕ѱ͍ͱ͍͏໰͍߹Θͤ͸Α͘དྷΔ 98% ωοτϫʔΫ΍ϚΠΫͷ઀ଓෆྑʹΑΔ΋ͷ
  16. WebSocket Ϋϥ΢υαʔϏε • Twilio • Node-RED • Milkcocoa • Firebase

    • … ઐ༻αʔόෆཁ εέʔϧରԠ SDKͰ։ൃޮ཰Խ
  17. // ॳظԽ accessManager = new Twilio.AccessManager(data.token); messagingClient = new Twilio.IPMessaging.Client(accessManager);

    // channel ͷऔಘ messagingClient.getChannel().then(initChannel); // channel ͷΠϕϯτ function initChannel(channel) { channel.on('messageAdded', function(message) { console.log(message); }); }
  18. History API • ϢʔβʔͷϖʔδભҠΛ Stack ͰੵΈ্͛Δ • ໭Δ/ਐΉ ΠϕϯτͷఆٛͰࢦఆ URL

    / ύϥ ϝʔλΛऔಘ • URL ʹԠͨ͡ϖʔδ੾Γସ͑͸ࣗ෼Ͱ࣮૷
  19. // Stack ੵΈ্͛ History.pushState(option, title, url); // Stack มԽ࣌ͷΠϕϯτఆٛ History.Adapter.bind(

    window, ‘statechange’, function() { let state = History.getState(); let url = state.cleanUrl; console.log(url) //=> /posts/1 // URL ʹجͮ͘ϧʔςΟϯά }); History.js Ͱͷ࣮૷ྫ
  20. self.onnotificationclick = function(event) { event.notification.close(); event.waitUntil( clients.matchAll({ includeUncontrolled: true }).then(function(clientList)

    { for (var i = 0; i < clientList.length; i++) { var client = clientList[i]; if (client.url.match('myapp') && 'focus' in client) { return client.focus(); } } }); ); }; sw.js
  21. ྫ) ը૾ΞοϓϩʔυͷྲྀΕ • ը૾Λυϥοά & υϩοϓ (File API) • ϑΝΠϧλΠϓͷνΣοΫ

    (File API) • ը૾ͷϦαΠζ (Canvas) • Cropper.js Ͱॎԣൺͷௐ੔ • ը૾αʔό΁Ξοϓϩʔυ (CORS) શͯ JavaScript Ͱ࣮૷Մೳ
  22. // imagefield dragover $(document).on("dragover", ".droparea", function(e) { e.preventDefault(); $(".droparea").addClass("hover"); });

    // imagefield dragleave $(document).on("dragleave", “.droparea", function(e) { e.preventDefault(); $(".droparea").removeClass("hover"); }); // imagefield drop $(document).on("drop", ".droparea", function(e) { e.preventDefault(); var file = e.originalEvent.dataTransfer.files[0]; });
  23. Canvas ͷ࣮૷ • ࠶ඳըͷͨΊʹ σʔλΛJSON ܗࣜ౳Ͱอଘ͠ ࠶ݱ͢Δͷ͕࣮૷ͷࢁ৔ (Fablic.js ͸ඪ४౥ࡌ) •

    px ୯ҐͳͨΊ ϨεϙϯγϒԽ͕೉͍͠ • ςΩετϘοΫεͳͲͷ HTML ϑΥʔϜ͸ຒΊ ࠐΈෆՄ
  24. Web Speech API • Chrome, Firefox ͷ࣮ݧஈ֊ͷػೳ • ϒϥ΢β౥ࡌ •

    Text to Speech, Speech to Text • අ༻ 0 & ੍໿ͳ͠
  25. // ॳظԽ let recognition = new webkitSpeechRecognition(); recognition.lang = 'ja-JP';

    recognition.continuous = true; // ։࢝ recognition.start(); // ݁Ռ recognition.onresult = function(event){ let results = event.results; var message = ""; for (var i = event.resultIndex; i < results.length; i++){ message += results[i][0].transcript; } console.log(message); };