首先簡單介紹一下WebRTC是個什么鬼。

什么是WebRTC

全稱Web Real-Time Communication，網(wǎng)頁即時通信，是一個支持網(wǎng)頁瀏覽器進(jìn)行實時語音對話或視頻對話的API。它于2011年6月1日開源并在Google、Mozilla、Opera支持下被納入萬維網(wǎng)聯(lián)盟的W3C推薦標(biāo)準(zhǔn)。

至于其他詳細(xì)描述我不啰嗦了，百度一搜有很多架構(gòu)圖啊啥的，放一個github鏈接，需要的可以進(jìn)去了解了解，里面有使用方法跟api：https://github.com/react-native-webrtc/react-native-webrtc

什么是PeerJS

PeerJS 提供了一個完整、可配置、易于使用、基于WebRTC的點對點的數(shù)據(jù)通信。
簡單來講，他幫你封裝簡化了使用WebRTC，你可以利用peerjs輕松的實現(xiàn)這些功能。

他們能干什么

能夠?qū)崿F(xiàn)即時通訊的語音對話、視頻對話、文字對話的功能。

那接下來我們講講怎么搭建。

配置

首先描述一下當(dāng)前搭建的環(huán)境，可能你看到這篇的時候版本啥的都已經(jīng)不一樣，會產(chǎn)生一些出入。
react-native-cli: 2.0.1
react-native: 0.62.2
webrtc:"react-native-webrtc": "^1.84.0",
peerjs:"react-native-peerjs": "^1.0.4",
android:buildToolsVersion = "28.0.3"
ios:platform :ios, '11.0'

1 導(dǎo)入WebRTC

因為peerjs包需要在webrtc的基礎(chǔ)上，所以我們還是得先走一遍webrtc配置流程。

yarn add react-native-webrtc

2 ios配置

修改版本

修改platform，因為react native webrtc不支持ios11以下，所以項目如果低于11要改掉
ios/Podfile文件

image.png

添加權(quán)限

給項目添加照相跟麥克風(fēng)（如果你有用到麥克風(fēng)的話）的權(quán)限

image.png

<key>NSCameraUsageDescription</key>
<string>獲取相機(jī)權(quán)限 文案自己調(diào)整</string>
<key>NSMicrophoneUsageDescription</key>
<string>獲取麥克風(fēng)權(quán)限 文案自己調(diào)整</string>

3 android配置

添加權(quán)限

給項目添加照相跟麥克風(fēng)（如果你有用到麥克風(fēng)的話）的權(quán)限。
其中android.permission.RECORD_AUDIO是麥克風(fēng)權(quán)限，其他權(quán)限有就不用添加了。

image.png

    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="android.permission.BLUETOOTH" />
    <uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
    <uses-permission android:name="android.permission.RECORD_AUDIO" />
    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW" />
    <uses-permission android:name="android.permission.WAKE_LOCK" />

添加java8支持

image.png

android {
...
compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }
}

ok,不出意外你應(yīng)該可以在代碼里面調(diào)用webrtc了，比如這樣

import {RTCPeerConnection} from 'react-native-webrtc'

4 導(dǎo)入PeerJS

peerjs官方只針對web（反正我是沒找到官方提供給react native的），只找到一個熱心市民的github包，別看star少，能用就行！附上鏈接：https://github.com/Zemke/react-native-peerjs
老規(guī)矩

yarn add react-native-peerjs

ok，不出意外你應(yīng)該能在代碼里這樣了

import Peer from 'react-native-peerjs'

到此為止，配置完成，接下來說一下使用姿勢。

使用

首先解釋一下，這個東西是要配合后端一起使用的，需要你們的后端也去建立一個peerjs的服務(wù)器，然后我們?nèi)ミB接他，如果你按照github上的例子直接使用當(dāng)然也可以用，但是跑的是peerjs官方的服務(wù)器。
如果連接官方服務(wù)器，直接一句代碼就完事了

const localPeer = new Peer()

如果連接自己的服務(wù)器，那么要配置一下

localPeer = new Peer(userClientId, {
    host: WEBRTC_SERVERS, secure: true, path: WEBRTC_PATH, debug: 0, port: WEBRTC_PORT,
  });

首先，userClientId是你自己的id，是由你自己創(chuàng)建的字符串，當(dāng)然得要唯一，具體生成什么樣的就看你們項目組怎么安排了。host、path、port這些都是后端搭建好后會告訴你的，debug的數(shù)字是設(shè)置log輸出內(nèi)容，參考一下官方描述，

0 Prints no logs.
1 Prints only errors.
2 Prints errors and warnings.
3 Prints all logs.

secure設(shè)置為true是https，false是http。
接下來是一系列的監(jiān)聽回調(diào)，姿勢統(tǒng)一

//被連接后的回調(diào)
localPeer.on('connection', function (conn) {
    console.log('local connection', conn)
  });
//new Peer后成功打開連接的回調(diào)
localPeer.on('open', localPeerId => {
    console.log('local open:' + localPeerId)
  })
//接收到data數(shù)據(jù)
localPeer.on('data', data => {
    console.log('local data:' + data)
  })
//連接關(guān)閉的回調(diào)
localPeer.on('close', () => {
    console.log('local close')
  })
//斷開連接的回調(diào)
localPeer.on('disconnected', () => {
    console.log('local disconnected')

  })
//連接失敗的回調(diào)
localPeer.on('error', err => {
    console.log('local error ========>' + err)
  })

一般來說，當(dāng)open成功回調(diào)了我們就可以開始去連接對方了，連接對方的姿勢是

conn = localPeer.connect(serverID)

serverID就是你要連接的目標(biāo)id，當(dāng)然前提是對方也連接了你們的后端并成功開啟了。
接下來可以對這個連接對象進(jìn)行一系列監(jiān)聽，姿勢跟上面是統(tǒng)一的，那么你可能會奇怪了，那我有兩個data事件監(jiān)聽（本地的peer對象以及connect生成的peer對象），我要在哪個處理接收數(shù)據(jù)呢？
因為我本身項目的需求是永遠(yuǎn)是我（手機(jī)端）去主動連接對方（網(wǎng)頁端），所以我的data事件回調(diào)是在connect了之后生成的對象的監(jiān)聽里面，就是

conn.on('data', data => {
    console.log('接收到data:' + data)
  })

所以我估計（估計），如果是被動連接，那么應(yīng)該就是觸發(fā)？

localPeer.on('data', data => {
    console.log('local data:' + data)
  })

我沒試過，有需要的試一試，不就是個回調(diào)的事嘛，輸出一下就知道了。
以上差不多就是文字即時通訊的全部了，至于語音跟視頻目前項目還沒做需求，提供一個官方api鏈接，雖然針對的是web，但是是通用的：https://peerjs.com/docs.html#api

// Call a peer, providing our mediaStream
var call = peer.call('dest-peer-id',
  mediaStream);

peer.on('call', function(call) {
  // Answer the call, providing our mediaStream
  call.answer(mediaStream);
});

我覺得，應(yīng)該就是這個函數(shù)了。