Twilio Programmable VideoとReactで簡単なビデオチャットを作成してみた

exports.handler = function(context, event, callback) {
    //環境変数からTwilio認証情報を読み込む
    const {ACCOUNT_SID, API_KEY, API_SECRET} = context;
    
    //呼び出し時に渡されたパラメータ
    const {identity} = event;

    //token発行
    const AccessToken = Twilio.jwt.AccessToken;
    const token = new AccessToken(
        ACCOUNT_SID,
        API_KEY,
        API_SECRET,
        {identity: identity}
    );

    //tokenにProgrammable Videoへのアクセス許可を与える
    const VideoGrant = AccessToken.VideoGrant;
    const videoGrant = new VideoGrant({
        room: 'cool room' // 特定のルームに制限可能、例えばeventとして渡して動的に切り替えも可能
    });
    token.addGrant(videoGrant);

    //レスポンス作成
    const response = new Twilio.Response();
    const headers = {
        "Access-Control-Allow-Origin": "*", // クライアント側のURLに変更してください
        "Access-Control-Allow-Methods": "GET,PUT,POST,DELETE,OPTIONS",
        "Access-Control-Allow-Headers": "Content-Type",
        "Content-Type": "application/json"
    };

    response.setHeaders(headers);
    response.setBody({
        accessToken: token.toJwt()
    });

    return callback(null, response);
}

import './App.scss';
import React, {Component} from 'react';
import Room from './Room';
const { connect } = require('twilio-video');

class App extends Component {
    constructor(props){
        super(props)

        this.state = {
            identity: '',
            room: null
        }

        this.inputRef = React.createRef();

    }

    //ルームに参加する
    joinRoom = async () => {
        try {
            //作成したアクセストークン取得のエンドポイントを指定
            const {REACT_APP_ENDPOINT} = process.env;
            const response = await fetch(`${REACT_APP_ENDPOINT}/token?identity=${this.state.identity}`);
            const data = await response.json();
            const room = await connect(data.accessToken, {
            name: 'cool-room',//今回はテストなのでルーム名は固定
            audio: true,
            video: true
            });

            this.setState({ room: room });
        } catch(err) {
            console.log(err);
        }
    }

    //ルーム名を空にしてロビー画面にもどる
    returnToLobby = () => {
        this.setState({ room: null });
    }

    //入力時にプレースホルダーを空にする
    removePlaceholderText = () => {
        this.inputRef.current.placeholder = '';
    }

    //入力時にStateにidentityとして入力値をセット
    updateIdentity = (event) => {
        this.setState({
            identity: event.target.value
        });
    }

    render() {
        //ユーザーが名前を入力したときのみボタンを有効にするためのフラグ
        const disabled = this.state.identity === '' ? true : false;

        return (
            <div className="app">
            {
                this.state.room === null
                ? <div className="lobby">
                    <input
                        value={this.state.identity} 
                        onChange={this.updateIdentity} 
                        ref={this.inputRef}
                        onClick={this.removePlaceholderText}
                        placeholder="名前を入力してください"/>
                    <button
                        disabled={disabled}
                        onClick={this.joinRoom}>
                        ルームに参加
                    </button>
                </div>
                : <Room returnToLobby={this.returnToLobby} room={this.state.room} />
            }
            </div>
        );
    }

}

export default App;

import React, {Component} from 'react';
import './App.scss';
import Participant from './Participant';

class Room extends Component {
    constructor(props) {
        super(props);

        this.state = {
            //参加者一覧をmapオブジェクトから配列に変更する
            remoteParticipants: Array.from(this.props.room.participants.values())
        }

    }

    //コンポーネントがマウント時に一回呼ばれる
    componentDidMount() {
        // 参加者が接続・切断された時のためのイベントリスナーを設置
        this.props.room.on('participantConnected', participant => this.addParticipant(participant));
        this.props.room.on('participantDisconnected', participant => this.removeParticipant(participant));

        //ローカル参加者がブラウザウィンドウを閉じると、参加者がルームから削除される
        window.addEventListener("beforeunload", this.leaveRoom);
    }

    //コンポーネントがアンマウントされたときにも切断
    componentWillUnmount() {
        this.leaveRoom();
    }

    //新規参加者をStateに追加
    addParticipant = (participant) => {
        console.log(`${participant.identity} がルームに参加しました。`);

        this.setState({
            remoteParticipants: [...this.state.remoteParticipants, participant]
        });
        }

    //退出者をStateから除外
    removeParticipant = (participant) => {
        console.log(`${participant.identity} がルームから退出しました。`);

        this.setState({
            remoteParticipants: this.state.remoteParticipants.filter(p => p.identity !== participant.identity)
        });
    }

    //ルームを退出
    leaveRoom = () => {
        this.props.room.disconnect();
        this.props.returnToLobby();
    }

    render() {
        return (
            <div className="room">
                <div className = "participants">
                    {/*ローカルの参加者を先に表示*/}
                    <Participant
                        key={this.props.room.localParticipant.identity}
                        localParticipant="true"
                        participant={this.props.room.localParticipant}/>
                    {
                        /*リモート参加者を表示*/
                        this.state.remoteParticipants.map(
                            participant => <Participant key={participant.identity} participant={participant}/>
                        )
                    }
                </div>
                <button id="leaveRoom" onClick={this.leaveRoom}>ルームから退出</button>
            </div>
        );
    }

}

export default Room;

import React, {Component} from 'react';
import './App.scss';
import Track from './Track';

class Participant extends Component {
    constructor(props) {
        super(props);
        
        //既存のトラック
        const existingPublications = Array.from(this.props.participant.tracks.values());
        const existingTracks = existingPublications.map(publication => publication.track);
        const nonNullTracks = existingTracks.filter(track => track !== null)
        
        this.state = {
            tracks: nonNullTracks
        }
    }

    componentDidMount() {
        if (!this.props.localParticipant) {
            //トラックが登録された時のイベントリスナー
            this.props.participant.on('trackSubscribed', track => this.addTrack(track));
        }
    }

    addTrack = (track) => {
        this.setState({
            tracks: [...this.state.tracks, track]
        });
    }

    render() {
        return (
            <div className="participant" id={this.props.participant.identity}>
            <div className="identity">{ this.props.participant.identity}</div>
            {
                this.state.tracks.map(track =>
                <Track key={track} filter={this.state.filter} track={track}/>)
            }
            </div>
        );
    }
}

export default Participant;

import React, {Component} from 'react';
import './App.scss';

class Track extends Component {
    constructor(props) {
        super(props)
        this.ref = React.createRef();
    }

    componentDidMount() {
        if (this.props.track !== null) {
            const child = this.props.track.attach();
            this.ref.current.classList.add(this.props.track.kind);
            this.ref.current.appendChild(child)
        }
    }

    render() {
        return (
            <div className="track" ref={this.ref}>
            </div>
        )
    }
}

export default Track;