Skip to content

Instantly share code, notes, and snippets.

@saitoxu
Last active Apr 5, 2017
Embed
What would you like to do?
2017-04-05
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>
)
}
}
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>
)
}
}
// 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)
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>
}
})()
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment