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
代数的データ型って何が嬉しいの? #frontend_phpcon_do
kajitack
8
3.7k
技術記事、 専門家としてのプログラマ、 言語化
mizchi
13
6.1k
IBM Bobを活用したレガシーアプリの最新化
oniak3ibm
PRO
1
200
jQueryをバージョンアップする前に使いたいjQuery Migrate
matsuo_atsushi
0
510
肥大化するレガシーコードに立ち向かうためのインターフェース分離と依存の逆転 / JJUG CCC 2026 Spring
hirokunimaeta
0
560
DynamoDBには集計系のクエリがないけどなんとかしたい
musan
1
140
Dataformのリポジトリを立ち上げるときにまずやること / dataform-day0-2026
snhryt
0
160
ローカルLLMでどこまでコードが書けるか -拡張版 / How much code can be written on a local LLM Extended
kishida
11
4.2k
AI時代の仕事技芸論 — ソフトウェア開発で「遊ぶように働く」職人的熟達のすすめ
kuranuki
2
680
スマートグラスで並列バイブコーディング
hyshu
0
150
Observability in Practice:Grafana 與 Edge Device SRE 的那些事
blueswen
0
170
Strategic Design in the Frontend: Moduliths & Micro Frontends @DDDEurope
manfredsteyer
PRO
0
100
Featured
See All Featured
Lessons Learnt from Crawling 1000+ Websites
charlesmeaden
PRO
1
1.3k
Tell your own story through comics
letsgokoyo
1
950
State of Search Keynote: SEO is Dead Long Live SEO
ryanjones
0
200
Impact Scores and Hybrid Strategies: The future of link building
tamaranovitovic
0
310
A Modern Web Designer's Workflow
chriscoyier
698
190k
Discover your Explorer Soul
emna__ayadi
2
1.1k
The Anti-SEO Checklist Checklist. Pubcon Cyber Week
ryanjones
0
160
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
reverentgeek
1
470
SEO for Brand Visibility & Recognition
aleyda
0
4.6k
The Straight Up "How To Draw Better" Workshop
denniskardys
239
140k
What the history of the web can teach us about the future of AI
inesmontani
PRO
1
610
16th Malabo Montpellier Forum Presentation
akademiya2063
PRO
0
150
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