Григорий Петров "WebRTC в мобильных приложениях при помощи React Native"
•
0 likes•206 views
Последние несколько лет в индустрии активно развивается WebRTC — технология, которая позволяет делать голосовые и видеозвонки прямо из браузеров. Но мало кто знает, что эта же технология может быть использована в нативных мобильных приложениях и основанных на них SDK. В своем докладе я хочу рассказать про опыт заворачивания существующих Android и iOS SDK в React Native: — Как поддерживать несколько разных архитектур — Как работать с нативными виджетами, такими как «вывод видео» — Синхронизация event loop между C-реализацией и — JavaScript движком React Native — Планы на будущее: React Native WebRTC
Report
Share
Григорий Петров "WebRTC в мобильных приложениях при помощи React Native"
- 1. 1
- 2. Что сейчас будет? Рассказывает Григорий Петров Специализация Руководство разработкой Чем занимается Технический евангелист Опыт Более 15 лет Время выступления 45 минут Вопросы В конце выступления, 15 минут 2
- 3. Проблема? Кроссплатформенные видео и голос 3
- 4. Проблема? Кроссплатформенные видео и голос Flash для веб, AIR для остального 4
- 5. Проблема? Кроссплатформенные видео и голос Flash для веб, AIR для остального Низкое качество звука и видео 5
- 6. Проблема? Кроссплатформенные видео и голос Flash для веб, AIR для остального Низкое качество звука и видео Media Server и Media Gateway стоят дорого 6
- 7. Проблема? Кроссплатформенные видео и голос Flash для веб, AIR для остального Низкое качество звука и видео Media Server и Media Gateway стоят дорого Трудно интегрировать в приложения 7
- 8. Решение Протоколы и API для браузеров 8
- 9. Решение Протоколы и API для браузеров Новый стандарт — WebRTC 9
- 11. Что такое WebRTC? ●JavaScript API для браузеров 11
- 12. Что такое WebRTC? ●JavaScript API для браузеров oВидео и голос, запись и воспроизведение 12
- 13. Что такое WebRTC? ●JavaScript API для браузеров oВидео и голос, запись и воспроизведение oСвязь peer-to-peer в реальном времени 13
- 14. Что такое WebRTC? ●JavaScript API для браузеров oВидео и голос, запись и воспроизведение oСвязь peer-to-peer в реальном времени ●SRTP, SDP, Opus, G.711, H.264/5, VP8/9 14
- 15. Что такое WebRTC? ●JavaScript API для браузеров oВидео и голос, запись и воспроизведение oСвязь peer-to-peer в реальном времени ●SRTP, SDP, Opus, G.711, H.264/5, VP8/9 ●Внешний сигнальный протокол 15
- 16. Зачем оно в аппе? Потому что все хотят в стор! 16
- 17. А что, либки нету? 17
- 18. А что, либки нету? Есть, libwebrtc от Google 18
- 19. А что, либки нету? Есть, libwebrtc от Google Но я хочу рассказать про React Native 19
- 20. Что такое React Native? 20
- 21. Что такое React Native? Еще один способ создания мобильных приложений для iOS и Android 21
- 22. Еще один способ? Нативно Phonegap Titanium, NativeScript Unity Marmalade Xamarin Вообще их больше 50-ти... 22
- 23. Еще один способ? Нативно Android API/Java, Cocoa/Objective-C/Swift Phonegap JJavaSScript, собственный HTML UI Titanium, NativeScript JJavaSScript, нативный UI Unity C#, JJavaSScript, 2D/3D для игр Marmalade C++, 2D для игр Xamarin C#, нативный UI + собственный UI 23
- 24. Еще один способ? Нативно Android API/Java, Cocoa/Objective-C/Swift Phonegap JJavaSScript, собственный HTML UI Titanium, NativeScript JJavaSScript, нативный UI Unity C#, JJavaSScript, 2D/3D для игр Marmalade C++, 2D для игр Xamarin C#, нативный UI + собственный UI React Native JJavaSScript, нативный UI 24
- 25. Лучшее от обоих миров Собственный UI Нативный UI 25
- 26. Лучшее от обоих миров Собственный UI HTML или виджеты, чужеродно Нативный UI Свой для каждой платформы 26
- 27. Лучшее от обоих миров Собственный UI HTML или виджеты, чужеродно Нативный UI Свой для каждой платформы React Native 27
- 28. Как это работает JJavaSScript + XML + CSS виджеты iOS / Android 28
- 29. И как в ЭТО добавить WebRTC? npm install не очень для c-шного кода 29
- 30. 30
- 32. Вообще есть готовое Но мне надо выступать на конфах 32
- 33. Интересно, как совместить самим Мы для своего React Native SDK совместили 33
- 35. React Native изнутри ●Android и iOS проекты 35
- 36. React Native изнутри ●Android и iOS проекты ●"main" для Java и Objective-C 36
- 37. React Native изнутри ●Android и iOS проекты ●"main" для Java и Objective-C ●Нативная либка React Native 37
- 38. React Native изнутри ●Android и iOS проекты ●"main" для Java и Objective-C ●Нативная либка React Native ●Ваш JavaScript код 38
- 39. React Native изнутри ●Android и iOS проекты ●"main" для Java и Objective-C ●Нативная либка React Native ●Ваш JavaScript код Самый простой способ туда влезть 39
- 40. React Native изнутри ●Android и iOS проекты ●"main" для Java и Objective-C ●Нативная либка React Native ●Ваш JavaScript код Самый простой способ туда влезть Но не для SDK 40
- 41. Что есть для SDK? React Native Module React Native UI Component 41
- 42. Что есть для SDK? React Native Module React Native UI Component Создаете свой класс и регистрируем его в main (макросом в iOS) 42
- 43. Первая засада Проект Android/iOS Он не знает про node_modules 43
- 44. Первая засада Проект Android/iOS Он не знает про node_modules Можно попросить разработчика добавлять 44
- 45. Первая засада Проект Android/iOS Он не знает про node_modules Можно попросить разработчика добавлять CI будет очень недовольно 45
- 46. Первая засада Проект Android/iOS Он не знает про node_modules Можно попросить разработчика добавлять CI будет очень недовольно Поэтому React Native включил в себя rnpm 46
- 48. react-native link 1.Внимательно осматривает "node_modules" 2.Ищет расширения React Native 48
- 49. react-native link 1.Внимательно осматривает "node_modules" 2.Ищет расширения React Native 3.Сам модифицирует Android и iOS проекты 49
- 50. "Внимательно осматривает"? Много черной магии и эвристики 50
- 51. "Внимательно осматривает"? Много черной магии и эвристики: ●".xcodeproj" 51
- 52. "Внимательно осматривает"? Много черной магии и эвристики: ●".xcodeproj" ●“^/android” и “^/android/app” 52
- 53. "Внимательно осматривает"? Много черной магии и эвристики: ●".xcodeproj" ●“^/android” и “^/android/app” ●“package.json#rnpm” 53
- 54. Процесс можно немного тюнить Хуки в package.json до/после установки 54
- 55. Процесс можно немного тюнить Хуки в package.json до/после установки Мы используем, чтобы починить iOS 55
- 56. Как дружат нейтив и JavaScript? 56
- 58. Как JavaScript видит наш код 58
- 59. Как JavaScript видит наш код React Native Module Объект с методами и свойствами 59
- 60. Как наш код видит JavaScript 60
- 61. Как наш код видит JavaScript Наш код получает параметры методов 61
- 62. Как наш код видит JavaScript Наш код получает параметры методов Может вызывать переданные функции 62
- 63. Как наш код видит JavaScript Наш код получает параметры методов Может вызывать переданные функции Имеет доступ к переданным объектам 63
- 64. Как наш код видит JavaScript Наш код получает параметры методов Может вызывать переданные функции Имеет доступ к переданным объектам Может использовать EventEmitter 64
- 65. React Native UI Component UIView на iOS и View на Android 65
- 66. 66
- 67. Самое интересное: C/C++ Потому что в нем живут библиотеки! 67
- 68. Android Gradle и JNI из коробки 68
- 69. Android Gradle и JNI из коробки Хорошо, если для либы есть jar 69
- 70. Android Gradle и JNI из коробки Хорошо, если для либы есть jar Для WebRTC — есть. И мы его используем 70
- 71. iOS Objective-C и Swift совместимы с C/C++ 71
- 72. iOS Objective-C и Swift совместимы с C/C++ За исключением name mangling 72
- 73. Хозяйке на заметку ●Все что занимает время — в потоки 73
- 74. Хозяйке на заметку ●Все что занимает время — в потоки ●Эвристика rnpm плохо документирована 74
- 75. Хозяйке на заметку ●Все что занимает время — в потоки ●Эвристика rnpm плохо документирована ●Креш в плюсах нас огорчает 75
- 76. Хозяйке на заметку ●Все что занимает время — в потоки ●Эвристика rnpm плохо документирована ●Креш в плюсах нас огорчает ●64-битный React Native: месяц от роду 76
- 77. Хозяйке на заметку ●Все что занимает время — в потоки ●Эвристика rnpm плохо документирована ●Креш в плюсах нас огорчает ●64-битный React Native: месяц от роду ●Зависимости. Обновил – и не работает 77
- 78. Хозяйке на заметку ●Все что занимает время — в потоки ●Эвристика rnpm плохо документирована ●Креш в плюсах нас огорчает ●64-битный React Native: месяц от роду ●Зависимости. Обновил – и не работает ●Тяжело сделать Hot Reloading 78
- 79. Хозяйке на заметку ●Все что занимает время — в потоки ●Эвристика rnpm плохо документирована ●Креш в плюсах нас огорчает ●64-битный React Native: месяц от роду ●Зависимости. Обновил – и не работает ●Тяжело сделать Hot Reloading ●Пока нет поддержки permissions 79
- 80. Ссылки! https://github.com/voximplant/react-native-voximplant https://github.com/voximplant/react-native-demo хук для ремонта: scripts/rnpm-postlink.js 80