Created
October 17, 2019 16:45
-
-
Save jamalag/2f4f73b750b76ee6bae489ab322732d3 to your computer and use it in GitHub Desktop.
WebRTC Let's learn together
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React, { Component } from 'react'; | |
| class App extends Component { | |
| constructor(props) { | |
| super(props) | |
| // https://reactjs.org/docs/refs-and-the-dom.html | |
| this.localVideoref = React.createRef() | |
| this.remoteVideoref = React.createRef() | |
| } | |
| componentDidMount = () => { | |
| const pc_config = null | |
| // const pc_config1 = { | |
| // "iceServers": [ | |
| // { | |
| // urls: 'stun:[STUN_IP]:[PORT]', | |
| // 'credentials': '[YOR CREDENTIALS]', | |
| // 'username': '[USERNAME]' | |
| // } | |
| // ] | |
| // } | |
| // https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection | |
| // create an instance of RTCPeerConnection | |
| this.pc = new RTCPeerConnection(pc_config) | |
| // triggered when a new candidate is returned | |
| this.pc.onicecandidate = (e) => { | |
| // send the candidates to the remote peer | |
| // see addCandidate below to be triggered on the remote peer | |
| if (e.candidate) | |
| console.log(JSON.stringify(e.candidate)) | |
| } | |
| // triggered when there is a change in connection state | |
| this.pc.oniceconnectionstatechange = (e) => { | |
| console.log(e) | |
| } | |
| // triggered when a stream is added to pc, see below - this.pc.addStream(stream) | |
| this.pc.onaddstream = (e) => { | |
| this.remoteVideoref.current.srcObject = e.stream | |
| } | |
| // called when getUserMedia() successfully returns - see below | |
| // getUserMedia() returns a MediaStream object (https://developer.mozilla.org/en-US/docs/Web/API/MediaStream) | |
| const success = (stream) => { | |
| window.localStream = stream | |
| this.localVideoref.current.srcObject = stream | |
| this.pc.addStream(stream) | |
| } | |
| // called when getUserMedia() fails - see below | |
| const failure = (e) => { | |
| console.log('getUserMedia Error: ', e) | |
| } | |
| // https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia | |
| // see the above link for more constraint options | |
| const constraints = { | |
| audio: false, | |
| video: true, | |
| // video: { | |
| // width: 1280, | |
| // height: 720 | |
| // }, | |
| // video: { | |
| // width: { min: 1280 }, | |
| // } | |
| } | |
| // https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia | |
| navigator.mediaDevices.getUserMedia(constraints) | |
| .then(success) | |
| .catch(failure) | |
| } | |
| /* ACTION METHODS FROM THE BUTTONS ON SCREEN */ | |
| createOffer = () => { | |
| console.log('Offer') | |
| // https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/createOffer | |
| // initiates the creation of SDP | |
| this.pc.createOffer({ offerToReceiveVideo: 1 }) | |
| .then(sdp => { | |
| console.log(JSON.stringify(sdp)) | |
| // set offer sdp as local description | |
| this.pc.setLocalDescription(sdp) | |
| }) | |
| } | |
| // https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/createAnswer | |
| // creates an SDP answer to an offer received from remote peer | |
| createAnswer = () => { | |
| console.log('Answer') | |
| this.pc.createAnswer({ offerToReceiveVideo: 1 }) | |
| .then(sdp => { | |
| console.log(JSON.stringify(sdp)) | |
| // set answer sdp as local description | |
| this.pc.setLocalDescription(sdp) | |
| }) | |
| } | |
| setRemoteDescription = () => { | |
| // retrieve and parse the SDP copied from the remote peer | |
| const desc = JSON.parse(this.textref.value) | |
| // set sdp as remote description | |
| this.pc.setRemoteDescription(new RTCSessionDescription(desc)) | |
| } | |
| addCandidate = () => { | |
| // retrieve and parse the Candidate copied from the remote peer | |
| const candidate = JSON.parse(this.textref.value) | |
| console.log('Adding candidate:', candidate) | |
| // add the candidate to the peer connection | |
| 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> | |
| <br /> | |
| <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.addCandidate}>Add Candidate</button> | |
| </div> | |
| ) | |
| } | |
| } | |
| export default App; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment