WebRTC в мобильных приложениях при помощи React Native

Последние несколько лет в индустрии активно развивается WebRTC — технология, которая позволяет делать голосовые и видеозвонки прямо из браузеров. Но мало кто знает, что эта же технология может быть использована в нативных мобильных приложениях и основанных на них SDK. В своем докладе я хочу рассказать про опыт заворачивания существующих Android и iOS SDK в React Native:

— Как поддерживать несколько разных архитектур
— Как работать с нативными виджетами, такими как «вывод видео»
— Синхронизация event loop между C-реализацией и — JavaScript движком React Native
— Планы на будущее: React Native WebRTC

Transcript

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