App.js

// Based on WebRTC Tutorial Series by Amir Eshaq
// https://www.youtube.com/watch?v=h2WkZ0h0-Rc&t=1s (Part 1)
// https://www.youtube.com/watch?v=UMy6vV4tW00&t=44s (Part 2)

import React, { Component } from 'react';
import Pusher from 'pusher-js'
import axios from 'axios'

// Pusher.logToConsole = true;

const user = 'user' + Math.floor(Math.random() * 999)

class App extends Component {
  constructor(props) {
    super(props)

    this.candidates = []

    this.localVideoref = React.createRef()
    this.remoteVideoref = React.createRef()
  }

  componentDidMount() {

    const pusher = new Pusher('dffbab583e3f0e41aea3', {
      cluster: 'us2',
      forceTLS: true
    })
    // debugger
    const channel = pusher.subscribe('reactWebRTC')

    channel.bind('offer', data => {
      if (data.user !== user) {
        // console.log('hello...', data)
        this.setRemoteDescription(data.sdp)
      }
      // this.setState({

      // })
    })

    channel.bind('answer', data => {
      if (data.user !== user)
      // console.log('hello...', data)
      this.setRemoteDescription(data.sdp)
      // this.setState({

      // })
    })

    channel.bind('candidate', data => {
      if (data.user !== user) {
        // console.log('hello...', data)
        this.addCandidate(data.candidate)
      }
    })

    const pc_config = null

    // const pc_config = {
    //   "iceServers": [
    //       {
    //           urls: 'stun:[STUN-IP]:[PORT]',
    //           'credential': '[YOUR CREDENTIAL]',
    //           'username': '[USERNAME]'
    //       }
    //   ]
    // }

    this.pc = new RTCPeerConnection(pc_config)

    this.pc.onicecandidate = (e) => {
      if (e.candidate) {
        // console.log('ice candidate ...')
        console.log(JSON.stringify(e.candidate))

        this.candidates = [...this.candidates, e.candidate]
      }
    }

    this.pc.oniceconnectionstatechange = (e) => {
      console.log(e)
    }

    this.pc.onaddstream = (e) => {
      this.remoteVideoref.current.srcObject = e.stream
    }

    const constraints = { video: true }

    const success = (stream) => {
      window.localStream = stream
      this.localVideoref.current.srcObject = stream
      this.pc.addStream(stream)
    }

    const failure = (e) => {
      console.log('getUserMedia Error: ', e)
    }

    navigator.mediaDevices.getUserMedia( constraints )
    .then( success )
    .catch( failure )
  }

  createOffer = () => {
    console.log('Offer')
    this.pc.createOffer({offerToReceiveVideo: 1})
      .then(sdp => {
        // console.log(JSON.stringify(sdp))
        axios.post('http://localhost:3000/offer', {
          user,
          sdp : JSON.stringify(sdp)
        })
        this.pc.setLocalDescription(sdp)
      }, e => {})
  }

  setRemoteDescription = (desc) => {
    const _desc = JSON.parse(desc)
    // debugger
    // const desc = JSON.parse(this.textref.value)
    console.log('hello...', desc.type, _desc)
    this.pc.setRemoteDescription(new RTCSessionDescription(_desc))
    if (_desc.type === 'offer') {
      this.createAnswer()
    } else if (_desc.type === 'answer') {
      this.candidates.map(candidate => {
        axios.post('http://localhost:3000/candidate', {
          user,
          candidate : candidate
        })
      })
    }
  }

  createAnswer = () => {
    console.log('Answer')
    this.pc.createAnswer({offerToReceiveVideo: 1})
      .then(sdp => {
        // console.log(JSON.stringify(sdp))
        axios.post('http://localhost:3000/answer', {
          user,
          sdp : JSON.stringify(sdp)
        })
        this.pc.setLocalDescription(sdp)
      }, e => {})
  }

  processCandidate = () => {
    // debugger
    const candidate = JSON.parse(this.textref.value)
    console.log('Adding candidate:', candidate)

    this.pc.addIceCandidate(new RTCIceCandidate(candidate))
  }

  addCandidate = (candidate) => {
    // const candidate = JSON.parse(this.textref.value)
    console.log('Adding candidate:', candidate)

    this.pc.addIceCandidate(new RTCIceCandidate(candidate))
  }

  render() {

    return (
      <div>
        <video
          style={{
            width: 240, height: 240,
            margin: 5, backgroundColor: 'black'
          }}
          ref={this.localVideoref}
          autoPlay></video>
        <video
          style={{
            width: 240, height: 240,
            margin: 5, backgroundColor: 'black'
          }}
          ref={this.remoteVideoref}
          autoPlay></video>

        <button onClick={this.createOffer}>Offer</button>
        <button onClick={this.createAnswer}>Answer</button>
        <br />
        <textarea ref={ref => { this.textref = ref }}/>
        <br />
        <button onClick={this.setRemoteDescription}>Set Remote Desc</button>
        <button onClick={this.processCandidate}>Add Candidate</button>
      </div>
    );
  }
}

export default App;