2017-04-05

Frame.js

import React, { Component } from 'react'

export default class Frame extends Component {
  componentDidMount() {
    const appearin = this.props.appearIn
    const roomName = this.props.match.params.roomName
    appearin.addRoomToElementById("appearin-frame", roomName)
  }

  render() {
    const roomName = this.props.match.params.roomName
    return (
      <div>
        <p>room name : {roomName}</p>
        <iframe id="appearin-frame"></iframe>
      </div>
    )
  }
}

Main.js

import React, { Component } from 'react'
import { Route, Switch, Redirect } from 'react-router-dom'
import AppearIn from 'appearin-sdk'
import Frame from './Frame'
import Top from './Top'

const appearin = new AppearIn()

export default class Main extends Component {
  constructor(props) {
    super(props)
    const isWebRtcCompatible = appearin.isWebRtcCompatible()
    this.state = {
      isWebRtcCompatible: isWebRtcCompatible,
      roomName: null
    }
  }

  handleClick(e) {
    e.preventDefault()
    appearin.getRandomRoomName().then(roomName => {
      this.setState({
        isWebRtcCompatible: this.state.isWebRtcCompatible,
        roomName: roomName
      })
    })
  }

  handleSubmit(e) {
    e.preventDefault()
    const roomName = e.currentTarget.elements[0].value
    this.setState({
      isWebRtcCompatible: this.state.isWebRtcCompatible,
      roomName: '/' + roomName
    })
  }

  render() {
    const isWebRtcCompatible = this.state.isWebRtcCompatible
    const roomName = this.state.roomName

    return (
      <div>
        <Switch>
          <Route exact path='/' render={(props) => (roomName?
            <Redirect to={roomName} /> :
            <Top
              isWebRtcCompatible={isWebRtcCompatible}
              onClick={this.handleClick.bind(this)}
              onSubmit={this.handleSubmit.bind(this)}
              {...props}
            />
          )} />
          <Route path='/:roomName' render={(props) => (
            <Frame appearIn={appearin} {...props} />
          )} />
        </Switch>
      </div>
    )
  }
}

sample.js

// 1. AppearInクラスのインスタンスを生成
const appearin = new AppearIn()

// 2. ブラウザがビデオチャットに対応しているか確認
appearin.isWebRtcCompatible()

// 3. 空いているビデオチャットルーム名を生成
appearin.getRandomRoomName().then(roomName => {
  // do something
})

// 4. iframeにappear.inのビデオチャットを埋め込み
appearin.addRoomToElementById("appearin-frame", roomName)

Top.js

import React, { Component } from 'react'

export default class Top extends Component {
  render() {
    return (() => {
      if (this.props.isWebRtcCompatible) {
        return (
          <div>
            <button onClick={this.props.onClick}>create room</button>
            <p>or</p>
            <form onSubmit={this.props.onSubmit}>
              <input type="text" name="room-name" placeholder="room name"/>
              <button type="submit">join</button>
            </form>
          </div>
        )
      } else {
        return <p>'can\'t use appear in'</p>
      }
    })()
  }
}