My FeedDiscussionsHeadless CMS
New
Sign in
Log inSign up
Learn more about Hashnode Headless CMSHashnode Headless CMS
Collaborate seamlessly with Hashnode Headless CMS for Enterprise.
Upgrade ✨Learn more

Integrating webrtc in react js?

Default profile photo
Anonymous
·Aug 23, 2019

want to create an broadcasting application using mern stack where when one person goes live using webrtc and it has two components i.e. Broadcaster screen and Viewerscreen but i'm unable to see video on the screen the following is my code for broadcaster screen :-

import React,{Component} from 'react'; import {Card} from 'reactstrap'; import {PropTypes} from 'prop-types';

class Video extends Component { constructor(props) { super(props); this.addCandidate=this.addCandidate.bind(this); this.addWatcher=this.addWatcher.bind(this); this.answerCan=this.answerCan.bind(this); this.endBroadcast=this.endBroadcast.bind(this); } componentWillMount() { // chrome polyfill for connection between the local device and a remote peer window.RTCPeerConnection = window.RTCPeerConnection || window.webkitRTCPeerConnection; this.props.media(this); } componentDidMount() {

    this.props.getUserMedia
      .then(stream => this.localVideo.srcObject = this.localStream = stream);
   this.props.socket.on('watcher',this.addWatcher);
  this.props.socket.on('candidate',this.addCandidate);
   this.props.socket.on('bye',this.endBroadcast);
   this.props.socket.on('answer',this.answerCan);
  }
  answerCan(id,description)
  {
      this.props.peerConnections[id].setRemoteDescription(description);
  }
  addWatcher(e,id)
  {

  this.props.peerConnections[id]=this.peerConnection;
    this.peerConnection.addStream(e.stream);
   this.peerConnection.createOffer()
   .then(sdp=>this.peerConnection.setLocalDescription(sdp)).then(()=>this.props.socket.emit('offer',this.peerConnection.localDescription))
   this.peerConnection.onicecandidate=(e)=>{
     if(e.candidate)
     {
       this.props.socket.emit('candidate',e.candidate);
     }
   }
  }
  addCandidate(candidate,id)
  {
    this.props.peerConnections[id].addCandidate(new RTCIceCandidate(candidate));
  }
  endBroadcast(id)
  {
    this.props.peerConnections[id] && this.props.peerConnections[id].close();
    delete this.props.peerConnections[id];
       }
render() {
    return (
        <div>
        <div className="video-section">
            <Card>
             <video className="local-video" ref={(ref)=>this.localVideo=ref} autoPlay muted></video>
            </Card>
        </div>
        </div>
    )
}

} Video.propTypes = { getUserMedia: PropTypes.object.isRequired, media: PropTypes.func.isRequired, socket:PropTypes.object.isRequired, peerConnections:PropTypes.object.isRequired } export default Video

and here is the viewer screen code :-

import React, { Component } from 'react' import {PropTypes} from 'prop-types'; class Viewervideo extends Component { constructor(props) { super(props);

 }
 componentWillMount()
 {
    window.RTCPeerConnection = window.RTCPeerConnection || window.webkitRTCPeerConnection;
    // this.props.media(this);
 }
 componentDidMount()
 {
     this.props.socket.on('offer',this.startVideo);
     this.props.socket.on('candidate',this.addIceCandidate);
     this.props.socket.on('watcher',this.alertWatcher);
     this.props.socket.on('broadcaster',this.alertBroadcaster);
     this.props.socket.on('bye',this.closeBroadcast);
   //  this.props.media(this);
 }
 startVideo(id,description)
 {
     this.peerConnection=new RTCPeerConnection({ 'iceServers': [{
        'urls': ['stun:stun.l.google.com:19302']
      }]});
      this.peerConnection.setRemoteDescription(description)
      .then(()=>{this.peerConnection.createAnswer()})
      .then(sdp=>this.peerConnection.setLocalDescription(sdp)).then(()=>{
          this.props.socket.emit('answer',id,this.peerConnection.localDescription);
      });
      this.peerConnection.onaddStream=(e)=>{
          this.localVideo.srcObject=this.localVideo=e.stream;
      }
      this.peerConnection.onicecandidate=(e)=>{
          if(e.candidate)
          {
              this.props.socket.emit('emit',id,e.candidate)
          }
      }

 }
 addIceCandidate(id,candidate)
 {
     this.peerConnection.addIceCandidate(new RTCIceCandidate(candidate)).
     catch(e=>{alert('error oocured'+e)});
 }
 alertWatcher()
 {
     this.props.socket.emit('watcher');
 }
 alertBroadcaster()
 {
     this.props.socket.emit('watcher');
 }
 closeBroadcast()
 {
     this.peerConnection.close();
 }
render() {
    return (
        <div>
            <video className="viewer-video" ref={(ref)=>this.localVideo=ref} autoPlay></video>
        </div>
    )
}

} [Viewervideo.propTypes={ // media: PropTypes.func.isRequired, socket:PropTypes.object.isRequired, // peerConnections:PropTypes.object.isRequired } export default Viewervideo;

can anybody tell me what i'm doing wrong and how can i fix that?