Created
July 6, 2019 21:45
-
-
Save jamalag/a17a11216d2d521495bc1c32e61100b0 to your computer and use it in GitHub Desktop.
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
| // 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; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment