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
220
GDG DevFest 2015 Poland - How to grow your own Babel fish
szimek
0
61
Serving WebP images via content negotiation
szimek
1
73
Other Decks in Programming
See All in Programming
見せてあげますよ、「本物のLaravel批判」ってやつを。
77web
7
7.4k
現場で役立つモデリング 超入門
masuda220
PRO
15
3.1k
AWS Lambdaから始まった Serverlessの「熱」とキャリアパス / It started with AWS Lambda Serverless “fever” and career path
seike460
PRO
1
210
AWS IaCの注目アップデート 2024年10月版
konokenj
3
3.3k
PLoP 2024: The evolution of the microservice architecture pattern language
cer
PRO
0
2.5k
Jakarta EE meets AI
ivargrimstad
0
350
役立つログに取り組もう
irof
28
9.4k
ペアーズにおけるAmazon Bedrockを⽤いた障害対応⽀援 ⽣成AIツールの導⼊事例 @ 20241115配信AWSウェビナー登壇
fukubaka0825
5
1.5k
Better Code Design in PHP
afilina
PRO
0
120
Tauriでネイティブアプリを作りたい
tsucchinoko
0
360
Make Impossible States Impossibleを 意識してReactのPropsを設計しよう
ikumatadokoro
0
150
Hotwire or React? ~アフタートーク・本編に含めなかった話~ / Hotwire or React? after talk
harunatsujita
1
110
Featured
See All Featured
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
43
2.2k
Documentation Writing (for coders)
carmenintech
65
4.4k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.2k
Code Review Best Practice
trishagee
64
17k
Speed Design
sergeychernyshev
24
610
[RailsConf 2023] Rails as a piece of cake
palkan
51
4.9k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.3k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
16
2.1k
Visualization
eitanlees
145
15k
Code Reviewing Like a Champion
maltzj
520
39k
The Power of CSS Pseudo Elements
geoffreycrofte
73
5.3k
Building Better People: How to give real-time feedback that sticks.
wjessup
364
19k
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