the-peer

Peer video chat component

Installation

$ npm install the-peer --save

Usage

'use strict'

import React from 'react'
import { ThePeerSender, ThePeerReceiver, ThePeerStyle } from 'the-peer'
import { TheButton, TheButtonStyle } from 'the-button'
import { TheVideoStyle } from 'the-video'

class ExampleComponent extends React.PureComponent {
  constructor (props) {
    super(props)
    const s = this
    s.state = {
      peerId: 'hoge12345',
      ready: false,
      audioEnabled: true,
      videoEnabled: true
    }
  }

  render () {
    const s = this
    const {state} = s
    const peerOptions = {
      port: 9000,
      host: 'localhost',
      debug: 3
    }
    const {
      ready,
      peerId,
      audioEnabled,
      videoEnabled
    } = state
    return (
      <div>
        <ThePeerStyle/>
        <TheButtonStyle/>
        <TheVideoStyle/>

        <fieldset>
          <legend>Sender</legend>
          <div>
            <ThePeerSender {...{peerId, peerOptions, audioEnabled, videoEnabled}}
                           onReady={() => s.setState({ready: true})}
                           label='This is Me'
            />
          </div>
          <TheButton onClick={() => s.setState({peerId: 'hoge1234'})}>Start</TheButton>
          <TheButton onClick={() => s.setState({peerId: null})}>Stop</TheButton>
          <TheButton onClick={() => s.setState({audioEnabled: !s.state.audioEnabled})}>Toggle audio</TheButton>
          <TheButton onClick={() => s.setState({videoEnabled: !s.state.videoEnabled})}>Toggle video</TheButton>
        </fieldset>
        <br/>
        <fieldset>
          <legend>Receiver</legend>
          <div>
            {
              ready && (
                <div>
                  <ThePeerReceiver {...{peerId, peerOptions}}
                                   label='Some One Else'
                  />
                  <ThePeerReceiver {...{peerId, peerOptions}}
                  />
                </div>
              )
            }
          </div>
        </fieldset>
      </div>

    )
  }
}

export default ExampleComponent

Components

ThePeerReceiver

Peer video chat component

Props

Name	Type	Description	Default
peerId	string	Id for peer	null
peerOptions	object	Peer js options	{}
volume	number	Volume	0.9
width	number	Component width	150
height	number	Component height	150
reloadable	bool	Reloadable on click	false
onError	func	Handler for error events	null
label	string	Label text	null
labelBaseColor			BASE_LABEL_COLOR

ThePeerSender

Peer video chat component

Props

Name	Type	Description	Default
peerId	string	Id for peer	null
peerOptions	object	Peer js options	{}
volume	number	Volume	0.9
videoEnabled	bool	Enable video	true
audioEnabled	bool	Disable video	false
width	number	Component width	150
height	number	Component height	150
reloadable	bool	Reloadable on click	false
onReady	func	Handler for peer ready	null
onConnection	func	Handler for connection	null
onConnectionClose	func	Handler for connectionClose	null
onError	func	Handler for error events	null
label	string	Label text	null
videoSize			{width: {ideal: 640, height: {ideal: 360}}}
labelBaseColor			BASE_LABEL_COLOR

ThePeerStyle

Style for ThePeer

Props

Name	Type	Description	Default
options	object	Style options	{}

License

This software is released under the MIT License.

Links

• THE Labo