目標

1、實現APP與WEB端安全帽功能通過攝像頭的實時通信，再web端可以查看手機攝像頭獲取的圖像，手機上也可實時顯示畫面；
2、連接、下線
3、切換分辨率、前后攝像頭

使用的相關工具（沒有一個不踩坑！）

1、react-native-webrtc
2、mobx
3、react-navigation-stack
4、native-base
5、babel
6、eslint
7、orion項目里NB的Header和Popver的Menu和Button

從安裝開始的采坑之類即將開始

1、webrtc文檔

https://github.com/react-native-webrtc/react-native-webrtc#creator
此乃腳趾甲踏入app大門之后除了教程看的第一個工具文檔，為啥說這么多廢話呢？因為看不懂啊！不知道咋看啊！您可能會說看就會了，干就完了！把腦細胞當腦花吃了的我直接跳過了這么大字的安裝，迫不及待的想去踩坑了，待經過大師的指點之后，還是應該不能放過每一個步驟的坑，要從安裝開始挖！

1.1 安裝時版本問題

經親身體驗，前面的一切都沒得問題，直到。。這里！

自己的版本不要改，其他照常配置即可，注釋掉的部分為打包時的坑，請看后續

1.2 yarn與import

在按照文檔install之前就先通過yarn添加了這個包，后續導致紅屏提示什么巴拉巴拉重復，按照提示即可解決——切記手賤！

2、安卓模擬器

使用的為該版本的模擬器，截止于2019年11月28日為最新版本，可就是坑在它太新了！

2.1 不能通過正常搖一搖打開dev settings

沒得搖一搖，又因為存在一些熱鍵沖突，只能通過cmd命令行輸入adb shell input keyevent 82打開。。真是充滿了人工智障的味道，最原始的方法有奇效。

2.2 打包時http與android9.0的問題

安卓9.0 Cleartext HTTP traffic to XXX not permitted

原因：
為保證用戶數據和設備的安全，Google針對下一代 Android 系統(Android P) 的應用程序，將要求默認使用加密連接，這意味著 Android P 將禁止 App 使用所有未加密的連接，因此運行 Android P 系統的安卓設備無論是接收或者發送流量，未來都不能明碼傳輸，需要使用下一代(Transport Layer Security)傳輸層安全協議，而 Android Nougat 和 Oreo 則不受影響。

解決方法：targetSdkVersion 降到27或以下

找到了orion項目的相關配置，又做的“些許”調整，OK =.=

3、程序部分

終于到了最激動人心的程序部分了，真是問題多到頭大，讓我想想該從哪里說起。。

3.1 navigation路由跳轉

這個東西明明不是什么很難的東西，我最開始只是簡簡單單的想做兩個界面，點擊第一個初始界面之后可以跳轉到第二個顯示界面，就是簡簡單單的兩個界面啊喂！面子都不給我的嘛！——不給~

在網上看了很多教程，都是使用react-navigation，但由于“版本問題”，我只得使用**‘react-navigation-stack’**



充滿了艱難看起來又很智障的不到30行代碼，至于為什么不能用react-navigation的大多數的寫法，哪種才是最新最好的，該如何在很多很多頁面盡情跳來跳去反復閃現，這個接下來再通過代碼繼續研究吧。

3.2 生命周期

這個是自己的問題，當把一只小白放在一個知識盲區中，坑就形成了~
項目的代碼有看過，知道這些東西就是在某些時刻進行調用，到自己用起來的時候可就充滿樂趣了。

在不知道怎么調用想用的函數時，寫在這里就對了！雖然最后都用寫在render里解決了，但之后還是應該整理下哪些東西要寫在哪里比較好。

3.3 state與mobx中的observer

兩者基本可以相互代替，都是值改變后會重新渲染，使用mobx時在類前要@observer，在變量前要@observable，寫反了會報錯（未定義變量錯誤，不要問我咋知道的），改變state.***的值的時候需要使用setState()，綜上還是用mobx方便！

3.4 native-base

https://github.com/GeekyAnts/NativeBase 文檔
https://docs.nativebase.io/Components.html#stacked-label-headref 使用教程
react-native-vector-icons 圖標

這個也是需要修改配置的似乎，可能是回憶太痛苦我已經開始選擇性遺忘了，大腦真是個會體諒人的小妖精。
使用了import {Button, Icon, Text, Picker} from 'native-base’這幾個，體驗感不佳，很多問題當真就是“版本問題”，一毛一樣的東西為啥他行我不行（我不行？？）
Fab那個東西還是蠻好用的，位置不用手動去定義（要被各個小東西的位置折磨瘋了），直接一行代碼寫在右下角就很完美，雖然最后我沒有用，功能不多就用帶圖標的按鈕代替了。
還有個選擇器那個東西真是個坑，永遠只能讀到改變時的前一個狀態，蜜汁尷尬，反應慢了一拍真是毫無辦法，以后只能避免用它了，用個提示彈窗不香嘛？

3.5 彈性布局

這個東西是好東西！明白原理就很愉悅，不明白大腦就在顫抖，我現在的狀態是有時候愉悅有時候顫抖，看了很多教程，感覺有點懵，最后在大師的指點下醍醐灌頂到50%，真是太艱難了。。。
除了阮一峰的博文，我最后看的是這一篇：https://www.cnblogs.com/qcloud1001/p/9848619.html 感覺理解上容易多了。
一個View包裹的就是一個小東西，就是在一個矩形里不斷畫矩形的過程，每個矩形可以就是一個包好的View，然后就開始組合吧，flex：1也是個好東西，用對了體驗感極佳，用錯了也是會帶來很多驚喜呢。

3.6 調用函數

this.login后不可加()

該函數是這樣定義的，所以調用函數直接是login，若使用login()則會返回調用該函數后的值

如果函數中有this要寫成箭頭函數

3.7 從其他庫導入包

npm i yrm -g 安裝yrm插件
yrm add bigger https://npm.biggersoft.com/ bigger地址庫
yrm ls 查看存在的庫
yrm use bigger 切換庫

3.8 babel和eslint配置

這兩個經大師指導應該是第一步的，但經過了我不下4次新建項目導入各種包之后就放棄了配置，果然又踩進了坑。
按照已有的去配置就完了不要自己瞎折騰
eslint可以使用eslint --init 去試一下

代碼上踩的坑似乎到這里就沒什么再寫的了，當然還有很多像多了個括號少了個括號，忘記引入導出……（此處感謝各位大佬承受住了我寫的代碼的精神折磨！）在用git時也經歷了一些曲折，可能當年去哈爾濱玩的時候多看了幾眼俄羅斯套娃從此就對套娃充滿了偏愛。還是先建立一個倉庫再往里面寫東西似乎比較穩妥。

4、webrtc與participant

4.1 webrtc 實時通信

WebRTC實現了三個API，分別是:

• MediaStream：通過MediaStream的API能夠通過設備的攝像頭及話筒獲得視頻、音頻的同步流
• RTCPeerConnection：RTCPeerConnection是WebRTC用于構建點對點之間穩定、高效的流傳輸的組件
• RTCDataChannel：RTCDataChannel使得瀏覽器之間（點對點）建立一個高吞吐量、低延時的信道，用于傳輸任意數據
  拿到本機的數據流用于回傳：streamURL={this.outgoingMedia.localStream.toURL()

4.2 participant

再這里設置了ice地址、數據流狀態、相關權限、傳輸方式等，反正就是基本拿過來用的=.=

5、apk打包

打包的時候不要用AndroidStudio，根據官方文檔，https://reactnative.cn/docs/signed-apk-android/ 憋自己瞎折騰了
如果出錯先根據提示找代碼里的錯誤，上面提到一個版本問題，反正就根據跑得起來的改就對了。解決版本問題之后可能還會報錯，這時候就該用到最有用的重啟大法，重啟編譯器，一遍不行多試幾次，不要在終端里輸入命令，在cmd或者shell里換著來，這時候如果代碼里確實沒錯誤了，應該就打包的通了，如果還還還有問題。。那就該用到終極奧義了——重啟電腦！！！都會解決的，阿門~

apk打包完畢，在真機上運行需要下載安裝浪費時間，但真機上確實可能看到很多模擬器上看不到的問題，此時可以調出終端，用打包生成好的安裝好進行安裝，能在一定程度上節省時間閱覽效果。

好了，這次app初體驗之采坑之旅就寫到這里，過程充滿了曲折和愉悅（？？？）~由衷感謝幫助我在shit一樣的代碼中找問題的小伙伴們，好人一生平安！下次一定會找的更熟練的！感恩的💗

總結

以上是生活随笔為你收集整理的react-native-webrtc之采坑之旅的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。