ReactNative mediasoup和webRtc的使用

一. 过程

state = {
    connectState: false, // 是否连接成功
    joinRoomState: false, // 是否加入房间
    selfViewSrc: null,
    pullProducerMap: [],
    pullselfViewSrc: null,
    sendproducerTransportList: [],
  };
 <RTCView
                  streamURL={this.state.selfViewSrc}
                  style={styles.selfView}
                />

1.推流:  
首先:创建发送媒体对象 let producerTransport = device.createSendTransport(data);
调用:this.producer = await producerTransport.transport.produce(params);
会回调这个: producerTransport.transport.on(
      'connect',
      async ({dtlsParameters}, callback, errback) => {
        console.log('call   connect.........');
        // 这是和服务的通信
        trtcSocket.sendMessage(    
          {
            event: 'connectTransport',
            mediaData: {
              transportId: producerTransport.transport.id,
              dtlsParameters: JSON.stringify(dtlsParameters),
            },
          },
          (result, request) => {
            console.log('connectTransport======', result);
            callback({}); // 这个一定要调用   ======回调11111====
          },
        );
      },
    );
上面的 ======回调11111====   callback({})回调后会执行:
 producerTransport.transport.on(
      'produce',
      async ({kind, rtpParameters}, callback, errback) => {
        console.log('call   produce.........');
        try {
          // 这是和服务的通信
          trtcSocket.sendMessage(
            {
              event: 'produce',
              mediaData: {
                transportId: producerTransport.transport.id,
                mediaKind: kind,
                rtpParameters: JSON.stringify(rtpParameters),
                produceType: kind,
              },
            },
            (result, request) => {
              const id = result.mediaData.producerId;
              console.log('producerId=====', id);
// 这是自己做的逻辑 后面关闭发送媒体的时候会用到
              let arr = that.state.sendproducerTransportList.map((item) => {
                console.log('==1111111111===');
                if (item.transport == producerTransport.transport) {
                  item.pushState = true;
                  item.producerId = result.mediaData.producerId;
                  item.produceType = result.mediaData.produceType;
                    }
                return item;
              });
              that.setState({
                sendproducerTransportList: arr,
              });
              callback({id});
            },
          );
        } catch (e) {
          errback(e);
        }
      },
    );
2.拉流
创建拉流对象 : let pullTransport = device.createRecvTransport(data);
发送拉流消息
 trtcSocket.sendMessage(
      {
        event: 'consume',
        mediaData: {
          producerId: sub_item.producerId,
          rtpCapabilities: JSON.stringify(device.rtpCapabilities),
        },
      },
      (result, request) => {
        console.log(result);
        console.log(request);
        const data = {
          producerId: result.parameterData.producerId,
          id: result.parameterData.consumerId,
          kind: result.mediaData.mediaKind,
          rtpParameters: JSON.parse(result.mediaData.rtpParameters),
          codecOptions: {},
        };
  pullTransport .consume(data) .then((consumer) => {
// consumer  这是获取到的流
that.setState({selfViewSrc:streampull.toURL()})
})
}
触发consume后会调用
pullTransport.on('connect', ({dtlsParameters}, callback, errback) => {
          // 和服务器的通信  创建连接
          trtcSocket.sendMessage( {
              event: 'connectTransport',
              mediaData: {
                transportId: pullTransport.id,
                dtlsParameters: JSON.stringify(dtlsParameters),
              },
            }, (result, request) => {
              callback({});
            },
          );
        });

二. 注意点
1.packer.json

"dependencies": {
    "mediasoup-client": "^3.6.21",
    "react": "16.13.1",
    "react-native": "0.63.0",
    "react-native-cli": "^2.0.1",
    "react-native-webrtc": "^1.87.1",
    "react-navigation": "^3.11.0",
    "socket.io": "^2.3.0"
  },

2.替换自己的地址

 // 连接Socket
  _connectSocket() {
    console.log('点击了连接socket======');
    trtcSocket = new TRTCSocket(
      'wss://trtc.idaka.vip:8888/trtc',
      this.producerOnline,
      this.producerOffline,
    );
    trtcSocket.is_Socket_state((result) => {
      console.log('====连接状态==', result);
      that.setState({connectState: result});
    });
  }

2.1 device 创建之前一定到执行 registerGlobals(); 否则获取不到设备

componentDidMount() {
    that = this;
    console.log('1111111111');
    registerGlobals();
    device = new mediasoupClient.Device();
    console.log('device==11===', device);
    console.log('mediasoupClient===1=', mediasoupClient.version);
    that._connectSocket();
  }

3.加入房间 **** device.load设置媒体能力后要等待段时间,否则没有设置完容易出错

 // 加入创建房间
  _join() {
    trtcSocket.sendMessage(
      {
        event: 'getRouterRtpCapabilities',
        parameterData: {
          roomId: 1608701462457,
        },
      },
      (result, request) => {
        console.log(result);
        console.log(request);
        // 是否失败
        if (result.event === 'ERROR') {
          console.log(
            `请求失败 CODE:${result.code}, MESSAGES: ${result.message}`,
          );
          return;
        }
        const rtpCapabilities = JSON.parse(result.mediaData.rtpCapabilities);
        // 设置媒体能力
        device.load({routerRtpCapabilities: rtpCapabilities});  //这个地方注意

        setTimeout(() => {
          that.setState({
            joinRoomState: true,
          });
        }, 1000);
        // 设置加入标识
      },
    );
  }

3. demo 地址

https://gitee.com/wddfef/mediasoup-web-rtc-rn