display.js

class DisplayStream extends React.Component {
  state = {
    localstream: null,
  }

  componentDidMount() {
    export const iceServers = [
      { url: 'stun:stun.l.google.com:19302' },
      { url: 'stun:stun01.sipphone.com' },
      { url: 'stun:stun.ekiga.net' },
      {
        url: 'turn:numb.viagenie.ca',
        credential: 'muazkh',
        username: '[email protected]',
      },
      {
        url: 'turn:192.158.29.39:3478?transport=udp',
        credential: 'JZEOEt2V3Qb0y27GRntt2u2PAYA=',
        username: '28224511:1379330808',
      },
      {
        url: 'turn:192.158.29.39:3478?transport=tcp',
        credential: 'JZEOEt2V3Qb0y27GRntt2u2PAYA=',
        username: '28224511:1379330808',
      },
    ]
    
    const pc = new RTCPeerConnection({
      iceServers,
    })

    MediaStreamTrack.getSources((sourceInfos)) => {
      console.log('MediaStreamTrack.getSources', sourceInfos)
      let videoSourceId
      for (let i = 0; i < sourceInfos.length; i++) {
        const sourceInfo = sourceInfos[i]
        if (sourceInfo.kind === 'video' && sourceInfo.facing === 'front') {
          videoSourceId = sourceInfo.id
        }
      }
      getUserMedia(
        {
          audio: true,
          video: {
            mandatory: {
              // here you pass the resolutions and the
              // minimun frame rate for the video
              minWidth: 1280,
              minHeight: 720,
              minFrameRate: 30,
            },
            // here you can choose the camera mode `environment` and `user`
            facingMode: 'user',
            optional: videoSourceId ? [{ sourceId: videoSourceId }] : [],
          },
        },
        (receivedStream: any) => {
          pc.addStream(receivedStream)
          this.setState({
            localstream: receivedStream,
          })
        },
        e => {
          console.log(e);
        },
      )
  }

  render() {
    return (
      <View style={{ flex: 1 }}>
        {this.state.localstream ? (
          <RTCView style={{ width: 50, height: 50 }} streamURL={this.state.localstream.toURL()} />
        ) : (
          <View style={{ width: 50, height: 50, backgroundColor: 'black' }} />
        )}
      </View>
    )
  }
}