Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
JSConf EU 2015 - How to grow your own Babel fish
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
Szymon Nowak
September 25, 2015
Programming
330
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
JSConf EU 2015 - How to grow your own Babel fish
Szymon Nowak
September 25, 2015
More Decks by Szymon Nowak
See All by Szymon Nowak
meet.js Katowice - ES6 Promises 101
szimek
1
230
GDG DevFest 2015 Poland - How to grow your own Babel fish
szimek
0
66
Serving WebP images via content negotiation
szimek
1
94
Other Decks in Programming
See All in Programming
LLM Plugin for Node-REDの利用方法と開発について
404background
0
170
Javaの型とAI時代に型が大事な理由 / java types and type in AI era
kishida
2
130
TSKaigi Night Talks 2026_TypeScriptでサプライチェーンの整合性を型に閉じ込める
geekplus_tech
0
340
セキュリティの専門家じゃなくてもできる。「セキュリティ意識」をアップデートして サプライチェーン攻撃への耐性を高めよう。
tk3fftk
5
720
Technical Debt: Understanding it Rightly, Engaging it Rightly #LaravelLiveJP
shogogg
0
220
The NotImplementedError Problem in Ruby
koic
1
720
JavaDoc 再入門
nagise
0
320
気づいたらRubyで100作品 ー クリエイティブコーディングが生活の一部になるまで / 100 Ruby Sketches Later: How Creative Coding Became Part of My Life
chobishiba
3
570
さぁV100、メモリをお食べ・・・
nilpe
0
140
Why Laravel apps break—Mastering the fundamentals to keep them maintainable
kentaroutakeda
1
350
Vue × Nuxt × Oxc どこまで使える?実運用の現在地
andpad
0
220
Observability in Practice:Grafana 與 Edge Device SRE 的那些事
blueswen
0
160
Featured
See All Featured
Hiding What from Whom? A Critical Review of the History of Programming languages for Music
tomoyanonymous
2
850
The #1 spot is gone: here's how to win anyway
tamaranovitovic
2
1.1k
Jess Joyce - The Pitfalls of Following Frameworks
techseoconnect
PRO
1
170
4 Signs Your Business is Dying
shpigford
187
22k
Ten Tips & Tricks for a 🌱 transition
stuffmc
0
130
Reflections from 52 weeks, 52 projects
jeffersonlam
356
21k
How to make the Groovebox
asonas
2
2.2k
First, design no harm
axbom
PRO
2
1.2k
Leadership Guide Workshop - DevTernity 2021
reverentgeek
1
300
Fashionably flexible responsive web design (full day workshop)
malarkey
408
66k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
37
6.5k
Optimising Largest Contentful Paint
csswizardry
37
3.7k
Transcript
None
None
WEBRTC
demo
None
None
None
WORKS IN A BROWSER
USES OPEN STANDARDS
TOOK ONE DAY TO WRITE
None
HOW DOES IT WORK?
1. SENDS AUDIO AND VIDEO USING WEBRTC
webrtc = new SimpleWebRTC({ localVideoEl: 'localVideo', remoteVideosEl: 'remoteVideos', autoRequestMedia: true
}) webrtc.on('readyToCall', () => { webrtc.joinRoom('your awesome room name') })
webrtc = new SimpleWebRTC({ localVideoEl: 'localVideo', remoteVideosEl: 'remoteVideos', autoRequestMedia: true
}) webrtc.on('readyToCall', () => { webrtc.joinRoom('your awesome room name') })
webrtc = new SimpleWebRTC({ localVideoEl: 'localVideo', remoteVideosEl: 'remoteVideos', autoRequestMedia: true
}) webrtc.on('readyToCall', () => { webrtc.joinRoom('your awesome room name') })
webrtc = new SimpleWebRTC({ localVideoEl: 'localVideo', remoteVideosEl: 'remoteVideos', autoRequestMedia: true
}) webrtc.on('readyToCall', () => { webrtc.joinRoom('your awesome room name') })
webrtc = new SimpleWebRTC({ localVideoEl: 'localVideo', remoteVideosEl: 'remoteVideos', autoRequestMedia: true
}) webrtc.on('readyToCall', () => { webrtc.joinRoom('your awesome room name') })
2. RECOGNIZES WHAT YOU SAY USING WEB SPEECH
recognition = new SpeechRecognition() recognition.on('result', (result) => { // do
something with the result }) recognition.start()
recognition = new SpeechRecognition() recognition.on('result', (result) => { // do
something with the result }) recognition.start()
recognition = new SpeechRecognition() recognition.on('result', (result) => { // do
something with the result }) recognition.start()
3. SENDS TRANSCRIPT TO GOOGLE TRANSLATE
4. SENDS TRANSLATION TO THE OTHER PERSON USING WEBRTC
webrtc.sendDirectlyToAll( 'channel label', 'payload label', payload )
5. READS IT OUT LOUD USING WEB SPEECH
msg = new SpeechSynthesisUtterance() msg.lang = 'en-GB' msg.text = 'German
jokes are the wurst!' speechSynthesis.speak(msg)
msg = new SpeechSynthesisUtterance() msg.lang = 'en-GB' msg.text = 'German
jokes are the wurst!' speechSynthesis.speak(msg)
WEB SPEECH API INTRO
ONE-SHOT CONTINUOUS
SERVER CLIENT
None
WEB SPEECH API RANT
1. STOPS IF YOU TALK FOR TOO LONG
2. STOPS IF YOU DON’T TALK FOR TOO LONG
3. DOESN’T WORK WITH WEBRTC MEDIA STREAMS
recognition = new SpeechRecognition()
recognition = new SpeechRecognition(audioStream)
4. WORKS ONLY IN CHROME* * DESKTOP CHROME (crbug.com/427567)
None
GOOGLE NOW BY GOOGLE
CORTANA BY MICROSOFT
SIRI BY APPLE
FIREFOX POWERED BY POCKET SPHINX
None
WE DON’T NEED TO WAIT FOR BROWSER VENDORS
recognition = new window.SpeechRecognition(audioStream)
recognition = new window.SpeechRecognition(audioStream)
recognition = new acme.SpeechRecognition(audioStream)
FACEBOOK M BY FACEBOOK
HOUND BY SOUNDHOUND
DUER BY BAIDU
DRAGON BY NUANCE
IBM WATSON BY IBM
POCKETSPHINX.JS BY SYLVAIN CHEVALIER
WEBRTC-TRANSLATE.HEROKUAPP.COM GITHUB.COM/SZIMEK/WEBRTC-TRANSLATE DEMO: CODE:
SZYMON NOWAK @SZIMEK COWBELL LABS FREELETICS we’re hiring!
THANK YOU