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