"Особенности записи звука нативными технологиями...
TRANSCRIPT
Особенности записи звука нативными технологиями браузеров
Фёдор Котов, руководитель веб-разработки Penxy
1
Стартап, в команде 3 человека, зарабатываем
Инвестор из России, продукт с фокусом на США
О нас
2
О бизнесе
3
✓ Эксперты озвучивают слайды
✓ Делятся Говорящими Слайдами с другими людьми
4
WebRTC5
Темна, терниста и запутана:- несколько разных стандартов- _webkit_moz_ms все сделали по-разному
История WebRTC
6
WebRTC - возможностиПозволяет соединить несколько клиентов напрямую и передавать между ними данные.
7
- peer-to-peer connections- peer-to-peer Data API- SIP, stats, etc- Media Stream API Extensions
WebRTC - содержание
8
- Видеоконференции- Передача файлов- Доступ к экрану- Игры- Редактирование звука в браузере
WebRTC - сферы применения
9
Без плагинов!
Почему мы используем WebRTC
➔ Нужен только браузер!
➔ Не нужны Flash или Java
➔ Клиенты довольны
★ Полный Javascript вашего приложения.
10
Запись аудио в браузере
11
12
Нажал – работает
13
Нажал – работает
14
Нажал – работает
Но обо всем по порядку
15
WebRTC API Web Audio API
Media Stream APIмикрофонкамера
16
Source Processing Destination
Поток звука
17
Source Processing Destination
Поток звука
- Audio files (+ XHR, etc)- <audio>, <video> tags- MediaStream- (AudioMediaStreamTrack)
18
Source Processing Destination
Поток звука
- Audio files (+ XHR, etc)- <audio>, <video> tags- MediaStream- (AudioMediaStreamTrack)
- Audio effects- Spliting, Merging- Spatialization- Compressing- etc
19
Source Processing Destination
Поток звука
- Audio files (+ XHR, etc)- <audio>, <video> tags- MediaStream- (AudioMediaStreamTrack)
- Audio effects- Spliting, Merging- Spatialization- Compressing- etc
- Device (speakers)- MediaStream- “Record” audio node- XHR, Websockets,
etc
20
Destination Buffer, file, etc Server
Передача аудио на сервер
21
Destination Buffer, file, etc Server
Передача аудио на сервер
~ 170 KiB/s~ 600 MiB в час~ 1 GiB RAM в час
WAV 44.1Kz, 16 bit depth, stereo
22
❏ Запись занимает много места на диске
❏ Запись аудио больше часа невозможна (не в Firefox)
Проблема
23
- mono audio- ухудшить качество- записывать кусочками - ?
Как уменьшить размер?
24
Сжимать на клиенте
Решение
на лету
25
Какой формат выбрать?
26
OGG MP3
Аудио форматы
27
Firefox
RecordRTC из набора WebRTC experiments
Firefox, Chrome, Safari
LAME, скомпилированную emscripten
★ LAME - это просто!
➔ Initialize - на старте записи
➔ Record - кодируем каждый аудио-буфер
➔ Finish - собираем mp3-файл
28
Пишем Recorder
MP3 recorder, init
29
mp3codec = Lame.init();
Lame.set_mode(mp3codec, 3); // monoLame.set_num_channels(mp3codec, 1);Lame.set_out_samplerate(mp3codec, 44100);Lame.set_in_samplerate(mp3codec, 44100);Lame.set_bitrate(mp3codec, 128);
Lame.init_params(mp3codec);
MP3 recorder, record
30
audioNode.onaudioprocess = function(e) { var channelLeft;
channelLeft = e.inputBuffer.getChannelData(0);
encoderMp3Worker.postMessage({ command: 'encode', buf: channelLeft });};
MP3 recorder, encode
31
var mp3data = Lame.encode_buffer_ieee_float( mp3codec,
e.data.buf, e.data.buf);
recBuffers.push(mp3data.data);recLength += mp3data.data.length;
MP3 recorder, finish
32
var mp3data = Lame.encode_flush(mp3codec);
recBuffers.push(mp3data.data);recLength += mp3data.data.length;
var buffer = mergeBuffers(recBuffers, recLength);var data = new Uint8Array(buffer);var audioBlob = new Blob([data], { type: "audio/mp3"});// send audioBlob somewhere
~ 10 KiB/s
~ 30 MiB/час
~ 40 MiB RAM/час
★ ogg - даже лучше
Результат
33
~ 170 KiB/s
~ 600 MiB/час
~ 1 Gib RAM/час
Было Стало
Теперь, можно записывать длинные аудио-файлы!
34
➔ использовать Audio Web Workers!
➔ сохранять файлы в локальное хранилище
или отдавать юзеру
➔ стримить на сервер или отдавать
кусочками
Советы
35
