Слайды доклада Федора "Особенности записи звука нативными технологиями браузеров" с MoscowJS 18

1. Особенности записи звука нативными
технологиями браузеров
Фёдор Котов, руководитель веб-разработки Penxy
1

2. Стартап, в команде 3 человека, зарабатываем
Инвестор из России, продукт с фокусом на США
О нас
2

3. О бизнесе
3
✓ Эксперты озвучивают
слайды
✓ Делятся Говорящими Слайдами
с другими людьми

4. 4

5. WebRTC
5

6. Темна, терниста и запутана:
- несколько разных стандартов
- _webkit_moz_ms все сделали по-разному
История WebRTC
6

7. WebRTC - возможности
Позволяет соединить
несколько клиентов
напрямую и
передавать между
ними данные.
7

8. - peer-to-peer connections
- peer-to-peer Data API
- SIP, stats, etc
- Media Stream API Extensions
WebRTC - содержание
8

9. - Видеоконференции
- Передача файлов
- Доступ к экрану
- Игры
- Редактирование звука в браузере
WebRTC - сферы применения
9
Без плагинов!

10. Почему мы используем WebRTC
➔ Нужен только браузер!
➔ Не нужны Flash или Java
➔ Клиенты довольны
★ Полный Javascript вашего приложения.
10

11. Запись аудио в браузере
11

12. 12
Нажал – работает

13. 13
Нажал – работает

14. 14
Нажал – работает

15. Но обо всем по порядку
15

16. WebRTC API Web Audio API
Media Stream API
микрофон
камера
16

17. Source Processing Destination
Поток звука
17

18. Source Processing Destination
Поток звука
- Audio files (+ XHR, etc)
- <audio>, <video> tags
- MediaStream
- (AudioMediaStreamTrack)
18

19. Source Processing Destination
Поток звука
- Audio files (+ XHR, etc)
- <audio>, <video> tags
- MediaStream
- (AudioMediaStreamTrack)
- Audio effects
- Spliting, Merging
- Spatialization
- Compressing
- etc
19

20. 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

21. Destination Buffer, file, etc Server
Передача аудио на сервер
21

22. Destination Buffer, file, etc Server
Передача аудио на сервер
~ 170 KiB/s
~ 600 MiB в час
~ 1 GiB RAM в час
WAV 44.1Kz,
16 bit depth,
stereo
22

23. ❏ Запись занимает много места на диске
❏ Запись аудио больше часа невозможна
(не в Firefox)
Проблема
23

24. - mono audio
- ухудшить качество
- записывать кусочками
- ?
Как уменьшить размер?
24

25. Сжимать на клиенте
Решение
на лету
25

26. Какой формат выбрать?
26

27. OGG MP3
Аудио форматы
27
Firefox
RecordRTC из набора
WebRTC experiments
Firefox, Chrome, Safari
LAME,
скомпилированную
emscripten

28. ★ LAME - это просто!
➔ Initialize - на старте записи
➔ Record - кодируем каждый аудио-буфер
➔ Finish - собираем mp3-файл
28
Пишем Recorder

29. MP3 recorder, init
29
mp3codec = Lame.init();
Lame.set_mode(mp3codec, 3); // mono
Lame.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);

30. MP3 recorder, record
30
audioNode.onaudioprocess = function(e) {
var channelLeft;
channelLeft = e.inputBuffer.getChannelData(0);
encoderMp3Worker.postMessage({
command: 'encode',
buf: channelLeft
});
};

31. 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;

32. 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

33. ~ 10 KiB/s
~ 30 MiB/час
~ 40 MiB RAM/час
★ ogg - даже лучше
Результат
33
~ 170 KiB/s
~ 600 MiB/час
~ 1 Gib RAM/час
Было Стало

34. Теперь, можно записывать
длинные аудио-файлы!
34

35. ➔ использовать Audio Web Workers!
➔ сохранять файлы в локальное хранилище
или отдавать юзеру
➔ стримить на сервер или отдавать
кусочками
Советы
35

36. Фёдор Котов
Руководитель веб-разработки
info@penxy.com
penxy.com
36
http://bit.ly/moscow-js-audio