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

GDG DevFest 2015 Poland - How to grow your own ...

Avatar for Szymon Nowak Szymon Nowak
November 28, 2015
Programming
0
61

GDG DevFest 2015 Poland - How to grow your own Babel fish

Video of the demo is available at https://youtu.be/Tv8ilBOKS2o
Avatar for Szymon Nowak

Szymon Nowak

November 28, 2015
Tweet

More Decks by Szymon Nowak

See All by Szymon Nowak
meet.js Katowice - ES6 Promises 101
Avatar for Szymon Nowak szimek
1
230
Serving WebP images via content negotiation
Avatar for Szymon Nowak szimek
1
77
JSConf EU 2015 - How to grow your own Babel fish
Avatar for Szymon Nowak szimek
0
330

Other Decks in Programming

See All in Programming
『自分のデータだけ見せたい！』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
Avatar for AkitoTsukahara akitotsukahara
1
570
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
Avatar for shiro seike seike460
PRO
1
700
エンジニア向け採用ピッチ資料
Avatar for 犬飼嵩 inusan
0
170
ニーリーにおけるプロダクトエンジニア
Avatar for Nealle nealle
0
590
20250628_非エンジニアがバイブコーディングしてみた
Avatar for ponponmikan ponponmikankan
0
510
LT 2025-06-30: プロダクトエンジニアの役割
Avatar for Keisuke Yamamoto yamamotok
0
550
関数型まつり2025登壇資料「関数プログラミングと再帰」
Avatar for Taison Tsukada taisontsukada
2
850
deno-redisの紹介とJSRパッケージの運用について (toranoana.deno #21)
Avatar for uki00a uki00a
0
150
Java on Azure で LangGraph！
Avatar for Kohei Saito kohei3110
0
170
GraphRAGの仕組みまるわかり
Avatar for とすり tosuri13
8
500
LINEヤフー データグループ紹介
Avatar for LINEヤフー株式会社 採用情報 lycorp_recruit_jp
0
1.1k
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
Avatar for Akira Kobori koboriakira
0
450

Featured

See All Featured
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
184
22k
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
379
70k
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.1k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
34
5.9k
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
7
490
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
54
13k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
82
9.1k
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
PRO
54
11k
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
54
6.4k
Designing Experiences People Love
Avatar for Jonathan Moore moore
142
24k
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
346
40k
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
351
20k

Transcript

  1. None
  2. None

  3. WEBRTC

  4. demo

  5. None
  6. None
  7. None

  8. WORKS IN A BROWSER

  9. USES OPEN STANDARDS

  10. TOOK ONE DAY TO WRITE

  11. None

  12. HOW DOES IT WORK?

  13. 1. SENDS AUDIO AND VIDEO USING WEBRTC

  14. webrtc = new SimpleWebRTC({ localVideoEl: 'localVideo', remoteVideosEl: 'remoteVideos', autoRequestMedia: true

    }) webrtc.on('readyToCall', () => { webrtc.joinRoom('your awesome room name') })

  15. webrtc = new SimpleWebRTC({ localVideoEl: 'localVideo', remoteVideosEl: 'remoteVideos', autoRequestMedia: true

    }) webrtc.on('readyToCall', () => { webrtc.joinRoom('your awesome room name') })

  16. webrtc = new SimpleWebRTC({ localVideoEl: 'localVideo', remoteVideosEl: 'remoteVideos', autoRequestMedia: true

    }) webrtc.on('readyToCall', () => { webrtc.joinRoom('your awesome room name') })

  17. webrtc = new SimpleWebRTC({ localVideoEl: 'localVideo', remoteVideosEl: 'remoteVideos', autoRequestMedia: true

    }) webrtc.on('readyToCall', () => { webrtc.joinRoom('your awesome room name') })

  18. webrtc = new SimpleWebRTC({ localVideoEl: 'localVideo', remoteVideosEl: 'remoteVideos', autoRequestMedia: true

    }) webrtc.on('readyToCall', () => { webrtc.joinRoom('your awesome room name') })

  19. 2. RECOGNIZES WHAT YOU SAY USING WEB SPEECH

  20. recognition = new SpeechRecognition() recognition.on('result', (result) => { // do

    something with the result }) recognition.start()

  21. recognition = new SpeechRecognition() recognition.on('result', (result) => { // do

    something with the result }) recognition.start()

  22. recognition = new SpeechRecognition() recognition.on('result', (result) => { // do

    something with the result }) recognition.start()

  23. 3. SENDS TRANSCRIPT TO GOOGLE TRANSLATE

  24. 4. SENDS TRANSLATION TO THE OTHER PERSON USING WEBRTC

  25. webrtc.sendDirectlyToAll( 'channel label', 'payload label', payload )

  26. 5. READS IT OUT LOUD USING WEB SPEECH

  27. msg = new SpeechSynthesisUtterance() msg.lang = 'en-GB' msg.text = 'German

    jokes are the wurst!' speechSynthesis.speak(msg)

  28. msg = new SpeechSynthesisUtterance() msg.lang = 'en-GB' msg.text = 'German

    jokes are the wurst!' speechSynthesis.speak(msg)
  29. None

  30. WEB SPEECH API INTRO

  31. ONE-SHOT CONTINUOUS

  32. SERVER CLIENT

  33. None

  34. WEB SPEECH API RANT

  35. 1. STOPS IF YOU TALK FOR TOO LONG

  36. 2. STOPS IF YOU DON’T TALK FOR TOO LONG

  37. 3. DOESN’T WORK WITH WEBRTC MEDIA STREAMS

  38. recognition = new SpeechRecognition()

  39. recognition = new SpeechRecognition(audioStream)

  40. 4. WORKS ONLY IN CHROME* * DESKTOP CHROME (crbug.com/427567)

  41. None

  42. GOOGLE NOW BY GOOGLE

  43. CORTANA BY MICROSOFT

  44. SIRI BY APPLE

  45. FIREFOX POWERED BY POCKET SPHINX

  46. None

  47. WE DON’T NEED TO WAIT FOR BROWSER VENDORS

  48. recognition = new window.SpeechRecognition(audioStream)

  49. recognition = new window.SpeechRecognition(audioStream)

  50. recognition = new acme.SpeechRecognition(audioStream)

  51. FACEBOOK M BY FACEBOOK

  52. HOUND BY SOUNDHOUND

  53. DUER BY BAIDU

  54. DRAGON BY NUANCE

  55. IBM WATSON BY IBM

  56. POCKETSPHINX.JS BY SYLVAIN CHEVALIER

  57. None

  58. WEBRTC-TRANSLATE.HEROKUAPP.COM GITHUB.COM/SZIMEK/WEBRTC-TRANSLATE DEMO: CODE:

  59. SZYMON NOWAK @SZIMEK COWBELL LABS FREELETICS we’re hiring!

  60. THANK YOU