Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

超音波でフルメッシュボイスチャットを可視化してみた

385 views

Published on

SkyWay UG Kansai #1のLTの発表資料です。

Published in: Technology
  • Be the first to comment

超音波でフルメッシュボイスチャットを可視化してみた

  1. 1. @rotsuya NTT Communications Manager of SkyWay Team
  2. 2. @rotsuya goo.gl/xGdrMR SkyWay API
  3. 3. @rotsuya Write Code Every Day http://snowlong.hatenablog.com/entry/2014/04/18/ https://johnresig.com/blog/write-code-every-day/
  4. 4. @rotsuya Write Code Every Day http://snowlong.hatenablog.com/entry/2014/04/18/ https://johnresig.com/blog/write-code-every-day/ Every week
  5. 5. @rotsuya Write Code Every Day http://snowlong.hatenablog.com/entry/2014/04/18/ https://johnresig.com/blog/write-code-every-day/
  6. 6. Web
  7. 7. (10 ) …
  8. 8. (10 ) … …
  9. 9. (10 ) … …
  10. 10. (10 ) … … …
  11. 11. (10 ) … 😭 … …
  12. 12. (10 ) … 😭 ( ) 1 … …
  13. 13. (10 ) … 😭 … ( ) 1 😭😭😭 …
  14. 14. 2 … 2
  15. 15. 3 … 6
  16. 16. 4 … 12
  17. 17. 5 … 20
  18. 18. 6 … 30
  19. 19. 7 … 42
  20. 20. 8 … 56
  21. 21. 0 50 100 150 200 250 2 3 4 5 6 7 8 9 10 11 12 13 14 15 210
  22. 22. Web
  23. 23. 6
  24. 24. 6
  25. 25. 6 7
  26. 26. 1
  27. 27. WebRTC
  28. 28. WebRTC
  29. 29. bit.ly/skywayultra https://rotsuya.github.io/skyway-ultrasonic-ping/ ECMAScript 2015+ Chrome
  30. 30. Room API
  31. 31. Room API
  32. 32. oscillator = audioCxt.createOscillator(); oscillator.type = 'square'; oscillator.frequency.value = 17000; oscillator.start(); this.gainNode = audioCxt.createGain(); this.gainNode.gain.value = 0; oscillator.connect(this.gainNode);
  33. 33. const destination = audioCxt.createMediaStreamDestination(); source.connect(destination); this.gainNode.connect(destination);
  34. 34. turnOn() { this.gainNode.gain.value = 0.3; } turnOff() { this.gainNode.gain.value = 0; }
  35. 35. Web Audio API Goertzel DTMF : http://jsfiddle.net/eRbA2/
  36. 36. const lowpassFilter = audioCxt.createBiquadFilter(); lowpassFilter.type = 'lowpass'; lowpassFilter.frequency.value = 17000 * 0.9; source.connect(lowpassFilter); lowpassFilter.connect(destination);
  37. 37. Room API
  38. 38. room const from = remoteStream.peerId; const to = peer.id; pingDetector.on(‘ping’, level => { room.send([‘ping’, from, to]); // send });
  39. 39. room.on('data', data => { // receive const event = data.data[0]; const from = data.data[1]; const to = data.data[2]; updateLineStyle(from, to, event, peerIds); });
  40. 40. npm SVG + CSS Transition Opus getStats() audioInputLevel
  41. 41. Room API room.send(data); // send room.on(‘data’, data => { // receive });
  42. 42. Room API room.send(data); // send room.on(‘data’, data => { // receive }); UG Kansai OK

×