sweng-group-15
liowebrtc

Repository

yarn add liowebrtc
// Or
npm i liowebrtc
import LioWebRTC from 'liowebrtc';
const webrtc = new LioWebRTC({
    // The local video reference set within your render function, or the element's ID
    localVideoEl: 'localVid',
    // Immediately request camera and mic access.
    autoRequestMedia: true,
    // Displays events emitted by the webrtc object in the console.
    debug: true,
    // Set this to true if you want to disable video/audio channels, and only enable data channel.
    dataOnly: false,
    // The url for your signaling server
    url: 'https://sandbox.simplewebrtc.com:443/',
});
webrtc.on('readyToCall', () => {
    // Create or join a room with any name
    webrtc.joinRoom('your room name');
});
webrtc.shout('taskCompleted', { success: true, id: '137' });
webrtc.on('receivedPeerData', (type, data, peer) => {
    if (type === 'taskCompleted' && data.success) {
        console.log(`Peer ${peer.id} completed task ${data.id}`);
    }
});
webrtc.whisper(peer, 'directMessage', { msg: 'Hello world!' });
webrtc.on('receivedPeerData', (type, data, peer) => {
    if (type === 'directMessage') console.log(`Peer ${peer.id} says: ${data.msg}`);
});
componentDidUpdate(prevProps, prevState) {
    if (this.state.position !== prevState.position) {
        this.webrtc.shout('stateUpdate', this.state);
    }
}

this.webrtc.on('receivedPeerData', (type, state, peer) => {
    if (type === 'stateUpdate') this.setState({ peerState: state });
});
import React, { Component } from 'react';
import LioWebRTC from 'liowebrtc';
import 'attachMediaStream' from 'attachmediastream';

class Party extends Component {
  constructor(props) {
    super(props);
    this.state = {
      nick: this.props.nick,
      peers: [],
      roomID: `party-${this.props.roomName}`,
      muted: false,
      camPaused: false
    };
    this.remoteVideos = {};
  }

  componentDidMount() {
    this.webrtc = new LioWebRTC({
      // The url for your signaling server
      url: 'https://sandbox.simplewebrtc.com:443/',
      // The local video reference set within your render function
      localVideoEl: this.localVid,
      // Immediately request camera access
      autoRequestMedia: true,
      // Optional: The nickname of the peer in the room
      nick: this.state.nick,
    });

    this.webrtc.on('videoAdded', this.addVideo);
    this.webrtc.on('videoRemoved', this.removeVideo);
    this.webrtc.on('readyToCall', this.readyToCall);
    this.webrtc.on('iceFailed', this.handleConnectionError);
    this.webrtc.on('connectivityError', this.handleConnectionError);
  }

  addVideo = (stream, peer) => {
    this.setState({
      peers: [...this.state.peers, peer]
    }, () => {
      attachMediaStream(stream, this.remoteVideos[peer.id]);
    });
  }

  removeVideo = (video, peer) => {
    this.setState({
      peers: this.state.peers.filter(p => p.id)
    });
  }

  handleConnectionError = (peer) => {
    const pc = peer.pc;
    console.log('had local relay candidate', pc.hadLocalRelayCandidate);
    console.log('had remote relay candidate', pc.hadRemoteRelayCandidate);
  }

  readyToCall = () => {
    // Starts the process of joining a room.
    this.webrtc.joinRoom(this.state.roomID, (err, desc) => {
    });
  }

  // Show fellow peers in the room
  generateRemotes = () => this.state.peers.map((p) => (
    <div key={p.id}>
      <div id={`container_${this.webrtc.getDomId(p)}`}>
        <video
          key={this.webrtc.getDomId(p)}
          // Important: The video element needs both an id and ref
          id={this.webrtc.getDomId(p)}
          ref={(v) => this.remoteVideos[p.id] = v}
          />
      </div>
        <p>{p.nick}</p>
    </div>
    ));

  disconnect = () => {
    this.webrtc.stopLocalVideo();
    this.webrtc.leaveRoom();
    this.webrtc.disconnect();
  }

  componentWillUnmount() {
    this.disconnect();
  }

  render() {
    return (
      <div>
        <div>
            <video
              // Important: The local video element needs to have both an ID and ref
              id="localVideo"
              ref={(vid) => { this.localVid = vid; }}
            />
            <p>{this.state.nick}</p>
        </div>

        <div id="remoteVideos">
          {this.generateRemotes()}
        </div>
      </div>
    );
  }
}

export default Party;

{
    autoplay: true, // automatically play the video stream on the page
    mirror: true, // flip the local video to mirror mode (for UX)
    muted: true // mute local video stream to prevent echo
}
webrtc.on('connectionReady', (sessionId) => {
    // ...
})