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
Szymon Nowak
September 25, 2015
Programming
0
330
JSConf EU 2015 - How to grow your own Babel fish
Szymon Nowak
September 25, 2015
Tweet
Share
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
61
Serving WebP images via content negotiation
szimek
1
78
Other Decks in Programming
See All in Programming
rage against annotate_predecessor
junk0612
0
160
速いWebフレームワークを作る
yusukebe
5
1.6k
CJK and Unicode From a PHP Committer
youkidearitai
PRO
0
100
[FEConf 2025] 모노레포 절망편, 14개 레포로 부활하기까지 걸린 1년
mmmaxkim
0
1.4k
ソフトウェアテスト徹底指南書の紹介
goyoki
1
140
Vue・React マルチプロダクト開発を支える Vite
andpad
0
110
JSONataを使ってみよう Step Functionsが楽しくなる実践テクニック #devio2025
dafujii
0
260
TanStack DB ~状態管理の新しい考え方~
bmthd
2
440
Claude Codeで挑むOSSコントリビュート
eycjur
0
190
CloudflareのChat Agent Starter Kitで簡単!AIチャットボット構築
syumai
2
380
コンテキストエンジニアリング Cursor編
kinopeee
1
750
MCPとデザインシステムに立脚したデザインと実装の融合
yukukotani
3
1.2k
Featured
See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
910
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Balancing Empowerment & Direction
lara
3
610
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.5k
Being A Developer After 40
akosma
90
590k
Bash Introduction
62gerente
615
210k
The Art of Programming - Codeland 2020
erikaheidi
55
13k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
For a Future-Friendly Web
brad_frost
179
9.9k
Building an army of robots
kneath
306
46k
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