Věděli jste, že váš prohlížeč umí … ?
Věděli jste, že váš prohlížeč umí … ?
Exkurze méně známými API webových prohlížečů
Čtvrtkon 11. 5. 2017
Ondřej Žára, @0ndras
Ekosystém JavaScriptových knihoven
- …je pěkný zmatek
- NPM se blíží k půl milionu balíčků
- Dvacet kladiv na jeden hřebík
- Obtížná orientace
- Pojďme se podívat tam, kde je implementace jen jedna
Bojový plán
- Web Audio
- Web Crypto
- Media Capture + Video + Canvas
- Web Speech
Web Audio API
- Syntéza, analýza a úprava zvukového signálu
- API založeno na konceptu zvukového grafu
- Bohatá nabídka zvukových uzlů
Web Audio API
- Vstupy: oscilátor, HTML
<audio>, waveform data, mikrofon, WebRTC
- Výstupy: zvuková karta, blob, WebRTC
- Transformace: reverb, delay, gain, compress, panner, shaper, biquad filter
- Analýza: aktuální data, frekvenční analýza (FFT)
Web Audio API – ukázka
var audio = new AudioContext();
var o = audio.createOscillator();
o.frequency.value = 440;
o.connect(audio.destination);
o.start();
Web Crypto
- Nativní implementace základních kryptografických primitiv
- Generování náhodných čísel
- Generování klíčů
- Podepisování, ověřování, hashování
- Šifrování, dešifrování
Web Crypto
- K dispozici jen na stránkách, dostupných po HTTPS
- Vstupní bod skrytý jako
window.crypto.subtle
- (subtle = jemný, rafinovaný)
- Asynchronní rozhraní založené na Promises
- Vstup a výstup pomocí Typed arrays
- Široké spektrum použitelných algoritmů
- Uživatel API je zodpovědný za korektní (bezpečné) použití
Web Crypto – digest
const str = "TEST";
function show(result) {
let str = "";
new Uint8Array(result).forEach(byte => {
str += byte.toString(16).padStart(2, "0");
});
document.body.innerHTML = str;
}
let numbers = str.split("").map(x => x.charCodeAt(0));
let data = new Uint8Array(numbers);
crypto.subtle.digest({name:"SHA-256"}, data).then(show);
Web Crypto – encrypt
function encrypt(key) {
let iv = crypto.getRandomValues(new Uint8Array(16));
let data = new Uint8Array([1, 2, 3, 4]);
crypto.subtle.encrypt({name: "AES-GCM", iv}, key, data).then(...);
}
crypto.subtle.generateKey({
name: "AES-GCM",
length: 256
}, false, ["encrypt", "decrypt"]).then(encrypt);
Media Capture
- Přístup ke zvuku a obrazu z kamery a mikrofonu
- Vyžaduje svolení uživatele
- K dispozici jen na stránkách, dostupných po HTTPS
Media Capture
- Jak pracovat s výslednými daty?
- Jedná se o tzv. MediaStream, který lze konzumovat různými způsoby
- Web Audio Source, RTC Peer Connection, HTML
<audio>/<video>
Media Capture – ukázka
function show(stream) {
let video = document.querySelector("video");
video.srcObject = stream;
video.play();
}
navigator.mediaDevices.getUserMedia({audio:true, video:true}).then(show);
Media Capture – real-time zpracování
- HTML značka
<canvas> dovoluje rastrové manipulace
drawImage vykreslí aktuální snímek videa do canvasu{get,put}ImageData nabízí per-pixel přístup
- Odbočka: není to náhodou bezpečnostní problém?
- Ukázka
Web Speech
- Dvojice souvisejících technologií:
- Speech synthesis (syntéza hlasu)
- Speech recognition (rozpoznávání hlasu)
- Vyžaduje připojení k Internetu
- Závisí mj. také na operačním systému
Speech Synthesis
let voices = speechSynthesis.getVoices();
console.log(voices);
let u = new SpeechSynthesisUtterance("My hovercraft is full of eels.");
speechSynthesis.speak(u);
Speech Recognition
const SR = window.SpeechRecognition || window.webkitSpeechRecognition;
let r = new SR();
r.lang = "en";
r.start();
r.onspeechend = e => r.stop();
r.onresult = e => {
alert(e.results[0][0].transcript);
}
Web Speech: rozpoznání, překlad, syntéza
Ukázka
Co jsme nestihli / za domácí úkol
Intl: Collation, NumberFormat, DateTimeFormat- Device/Sensor APIs: přístup k hardware (mobilního) zařízení
