Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Особенности записи звука нативными
технологиями браузеров
Фёдор Котов, руководитель веб-разработки Penxy
1
Стартап, в команде 3 человека, зарабатываем
Инвестор из России, продукт с фокусом на США
О нас
2
О бизнесе
3
✓ Эксперты озвучивают
слайды
✓ Делятся Говорящими Слайдами
с другими людьми
4
WebRTC
5
Темна, терниста и запутана:
- несколько разных стандартов
- _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 - сферы применения
...
Почему мы используем WebRTC
➔ Нужен только браузер!
➔ Не нужны Flash или Java
➔ Клиенты довольны
★ Полный Javascript вашег...
Запись аудио в браузере
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
- (AudioMediaSt...
Source Processing Destination
Поток звука
- Audio files (+ XHR, etc)
- <audio>, <video> tags
- MediaStream
- (AudioMediaSt...
Source Processing Destination
Поток звука
- Audio files (+ XHR, etc)
- <audio>, <video> tags
- MediaStream
- (AudioMediaSt...
Destination Buffer, file, etc Server
Передача аудио на сервер
21
Destination Buffer, file, etc Server
Передача аудио на сервер
~ 170 KiB/s
~ 600 MiB в час
~ 1 GiB RAM в час
WAV 44.1Kz,
16...
❏ Запись занимает много места на диске
❏ Запись аудио больше часа невозможна
(не в Firefox)
Проблема
23
- mono audio
- ухудшить качество
- записывать кусочками
- ?
Как уменьшить размер?
24
Сжимать на клиенте
Решение
на лету
25
Какой формат выбрать?
26
OGG MP3
Аудио форматы
27
Firefox
RecordRTC из набора
WebRTC experiments
Firefox, Chrome, Safari
LAME,
скомпилированную
ems...
★ LAME - это просто!
➔ Initialize - на старте записи
➔ Record - кодируем каждый аудио-буфер
➔ Finish - собираем mp3-файл
2...
MP3 recorder, init
29
mp3codec = Lame.init();
Lame.set_mode(mp3codec, 3); // mono
Lame.set_num_channels(mp3codec, 1);
Lame...
MP3 recorder, record
30
audioNode.onaudioprocess = function(e) {
var channelLeft;
channelLeft = e.inputBuffer.getChannelDa...
MP3 recorder, encode
31
var mp3data = Lame.encode_buffer_ieee_float(
mp3codec,
e.data.buf,
e.data.buf);
recBuffers.push(mp...
MP3 recorder, finish
32
var mp3data = Lame.encode_flush(mp3codec);
recBuffers.push(mp3data.data);
recLength += mp3data.dat...
~ 10 KiB/s
~ 30 MiB/час
~ 40 MiB RAM/час
★ ogg - даже лучше
Результат
33
~ 170 KiB/s
~ 600 MiB/час
~ 1 Gib RAM/час
Было Ст...
Теперь, можно записывать
длинные аудио-файлы!
34
➔ использовать Audio Web Workers!
➔ сохранять файлы в локальное хранилище
или отдавать юзеру
➔ стримить на сервер или отда...
Фёдор Котов
Руководитель веб-разработки
info@penxy.com
penxy.com
36
http://bit.ly/moscow-js-audio
Upcoming SlideShare
Loading in …5
×
Upcoming SlideShare
Видеоконсультации пациента на сайте медицинского учреждения с помощью протокола WebRTC
Next
Download to read offline and view in fullscreen.

0

Share

Download to read offline

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

Download to read offline

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

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • Be the first to like this

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

  1. 1. Особенности записи звука нативными технологиями браузеров Фёдор Котов, руководитель веб-разработки Penxy 1
  2. 2. Стартап, в команде 3 человека, зарабатываем Инвестор из России, продукт с фокусом на США О нас 2
  3. 3. О бизнесе 3 ✓ Эксперты озвучивают слайды ✓ Делятся Говорящими Слайдами с другими людьми
  4. 4. 4
  5. 5. WebRTC 5
  6. 6. Темна, терниста и запутана: - несколько разных стандартов - _webkit_moz_ms все сделали по-разному История WebRTC 6
  7. 7. WebRTC - возможности Позволяет соединить несколько клиентов напрямую и передавать между ними данные. 7
  8. 8. - peer-to-peer connections - peer-to-peer Data API - SIP, stats, etc - Media Stream API Extensions WebRTC - содержание 8
  9. 9. - Видеоконференции - Передача файлов - Доступ к экрану - Игры - Редактирование звука в браузере WebRTC - сферы применения 9 Без плагинов!
  10. 10. Почему мы используем WebRTC ➔ Нужен только браузер! ➔ Не нужны Flash или Java ➔ Клиенты довольны ★ Полный Javascript вашего приложения. 10
  11. 11. Запись аудио в браузере 11
  12. 12. 12 Нажал – работает
  13. 13. 13 Нажал – работает
  14. 14. 14 Нажал – работает
  15. 15. Но обо всем по порядку 15
  16. 16. WebRTC API Web Audio API Media Stream API микрофон камера 16
  17. 17. Source Processing Destination Поток звука 17
  18. 18. Source Processing Destination Поток звука - Audio files (+ XHR, etc) - <audio>, <video> tags - MediaStream - (AudioMediaStreamTrack) 18
  19. 19. Source Processing Destination Поток звука - Audio files (+ XHR, etc) - <audio>, <video> tags - MediaStream - (AudioMediaStreamTrack) - Audio effects - Spliting, Merging - Spatialization - Compressing - etc 19
  20. 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. 21. Destination Buffer, file, etc Server Передача аудио на сервер 21
  22. 22. Destination Buffer, file, etc Server Передача аудио на сервер ~ 170 KiB/s ~ 600 MiB в час ~ 1 GiB RAM в час WAV 44.1Kz, 16 bit depth, stereo 22
  23. 23. ❏ Запись занимает много места на диске ❏ Запись аудио больше часа невозможна (не в Firefox) Проблема 23
  24. 24. - mono audio - ухудшить качество - записывать кусочками - ? Как уменьшить размер? 24
  25. 25. Сжимать на клиенте Решение на лету 25
  26. 26. Какой формат выбрать? 26
  27. 27. OGG MP3 Аудио форматы 27 Firefox RecordRTC из набора WebRTC experiments Firefox, Chrome, Safari LAME, скомпилированную emscripten
  28. 28. ★ LAME - это просто! ➔ Initialize - на старте записи ➔ Record - кодируем каждый аудио-буфер ➔ Finish - собираем mp3-файл 28 Пишем Recorder
  29. 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. 30. MP3 recorder, record 30 audioNode.onaudioprocess = function(e) { var channelLeft; channelLeft = e.inputBuffer.getChannelData(0); encoderMp3Worker.postMessage({ command: 'encode', buf: channelLeft }); };
  31. 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. 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. 33. ~ 10 KiB/s ~ 30 MiB/час ~ 40 MiB RAM/час ★ ogg - даже лучше Результат 33 ~ 170 KiB/s ~ 600 MiB/час ~ 1 Gib RAM/час Было Стало
  34. 34. Теперь, можно записывать длинные аудио-файлы! 34
  35. 35. ➔ использовать Audio Web Workers! ➔ сохранять файлы в локальное хранилище или отдавать юзеру ➔ стримить на сервер или отдавать кусочками Советы 35
  36. 36. Фёдор Котов Руководитель веб-разработки info@penxy.com penxy.com 36 http://bit.ly/moscow-js-audio

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

Views

Total views

727

On Slideshare

0

From embeds

0

Number of embeds

28

Actions

Downloads

8

Shares

0

Comments

0

Likes

0

×