the-talk

Talking via webrtc

Installation

$ npm install the-talk --save

Usage

'use strict'
 
import React from 'react'
import { TheTalk, TheTalkStyle } from 'the-talk'
import { TheSpinStyle } from 'the-spin'
import { TheButtonStyle } from 'the-button'
import { TheRTCClient } from 'the-rtc-client'
 
class ExampleComponent extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      localClient: null,
      remoteClients: {}
    }
    this.renderRemoteClient = this.renderRemoteClient.bind(this)
    this.rtcClient = null
    this.renderLocalClient = this.renderLocalClient.bind(this)
  }
 
  componentDidMount () {
    void this.joinToTalk()
  }
 
  async joinToTalk () {
    const rtcClient = new TheRTCClient({
      // Additional info
      info: {
        userAgent: navigator.userAgent,
        who: `user-${new Date().getTime()}`
      },
      onLocal: (localClient) => {
        this.setState({localClient})
      },
      onRemote: (remoteClient) => {
        const {rid} = remoteClient
        this.setState({
          remoteClients: {
            ...this.state.remoteClients,
            [rid]: remoteClient,
          },
        })
      }
    })
    await rtcClient.connect(`http://localhost:3000`)
    await rtcClient.join(`the-talk-example-room-${new Date().getFullYear()}`)
    this.rtcClient = rtcClient
  }
 
  render () {
    const {localClient, remoteClients} = this.state
    return (
      <div>
        <TheSpinStyle/>
        <TheButtonStyle/>
        <TheTalkStyle/>
        <TheTalk {...{localClient, remoteClients}}
                 onToggleVideo={(videoEnabled) => this.rtcClient.toggleVideoEnabled(videoEnabled)}
                 onToggleAudio={(audioEnabled) => this.rtcClient.toggleAudioEnabled(audioEnabled)}
                 renderRemoteClient={this.renderRemoteClient}
                 renderLocalClient={this.renderLocalClient}
        />
      </div>
 
    )
  }
 
  renderRemoteClient (state) {
 
  }
 
  renderLocalClient ({info}) {
    return (
      <span>{`${info.who} (${info.userAgent})`}</span>
    )
  }
}
 
export default ExampleComponent
 

Components

TheTalk

Talking via webrtc

Props

Name	Type	Description	Default
localClient	object	Handle video	null
onVideo	func		``
remoteClients	objectOf object		{}
renderLocalClient	func		() => null
renderRemoteClient	func		() => null
videoHeight	union	Height of video	``
localVideoHeight			100
remoteVideoHeight			200

TheTalkStyle

Style for TheTalk

Props

Name	Type	Description	Default
options	object	Style options	{}

License

This software is released under the MIT License.

Links

• THE Labo