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

JSConf EU 2015 - How to grow your own Babel fish

Avatar for Szymon Nowak Szymon Nowak
September 25, 2015
Programming
0
330

JSConf EU 2015 - How to grow your own Babel fish

Avatar for Szymon Nowak

Szymon Nowak

September 25, 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
GDG DevFest 2015 Poland - How to grow your own Babel fish
Avatar for Szymon Nowak szimek
0
63
Serving WebP images via content negotiation
Avatar for Szymon Nowak szimek
1
79

Other Decks in Programming

See All in Programming
Zendeskのチケットを Amazon Bedrockで 解析した
Avatar for ryokosuge ryokosuge
3
310
go test -json そして testing.T.Attr / Kyoto.go #63
Avatar for utagawa kiki utgwkk
3
310
Ruby×iOSアプリ開発 ~共に歩んだエコシステムの物語~
Avatar for Tomoki Kobayashi temoki
0
340
個人軟體時代
Avatar for Ethan Huang ethanhuang13
0
330
もうちょっといいRubyプロファイラを作りたい (2025)
Avatar for osyoyu osyoyu
1
450
1から理解するWeb Push
Avatar for Minoru Takeuchi dora1998
7
1.9k
プロパティベーステストによるUIテスト: LLMによるプロパティ定義生成でエッジケースを捉える
Avatar for Tetta Noguchi tetta_pdnt
0
3.3k
時間軸から考えるTerraformを使う理由と留意点
Avatar for Ryoma Fujiwara fufuhu
16
4.8k
Tool Catalog Agent for Bedrock AgentCore Gateway
Avatar for matsukada licux
7
2.5k
Introducing ReActionView: A new ActionView-compatible ERB Engine @ Rails World 2025, Amsterdam
Avatar for Marco Roth marcoroth
0
710
意外と簡単！？フロントエンドでパスキー認証を実現する WebAuthn
Avatar for teamLab teamlab
PRO
2
770
さようなら Date。 ようこそTemporal！ 3年間先行利用して得られた知見の共有
Avatar for 8-beeeaaat!!! 8beeeaaat
3
1.5k

Featured

See All Featured
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
49
3k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
53
2.9k
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.2k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
113
20k
BBQ
Avatar for Matthew Crist matthewcrist
89
9.8k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
131
19k
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
PRO
54
11k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
26
3k
Code Review Best Practice
Avatar for Trisha Gee trishagee
71
19k
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
10
820
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
40
2k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
27k

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. WEB SPEECH API INTRO

  30. ONE-SHOT CONTINUOUS

  31. SERVER CLIENT

  32. None

  33. WEB SPEECH API RANT

  34. 1. STOPS IF YOU TALK FOR TOO LONG

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

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

  37. recognition = new SpeechRecognition()

  38. recognition = new SpeechRecognition(audioStream)

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

  40. None

  41. GOOGLE NOW BY GOOGLE

  42. CORTANA BY MICROSOFT

  43. SIRI BY APPLE

  44. FIREFOX POWERED BY POCKET SPHINX

  45. None

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

  47. recognition = new window.SpeechRecognition(audioStream)

  48. recognition = new window.SpeechRecognition(audioStream)

  49. recognition = new acme.SpeechRecognition(audioStream)

  50. FACEBOOK M BY FACEBOOK

  51. HOUND BY SOUNDHOUND

  52. DUER BY BAIDU

  53. DRAGON BY NUANCE

  54. IBM WATSON BY IBM

  55. POCKETSPHINX.JS BY SYLVAIN CHEVALIER

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

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

  58. THANK YOU