未经GATEWAY_DISCONNECTED |与Twilio服务器的连接丢失了

Question

我下载了可编程视频的入门套件。独立代码可以工作但是当我将代码与我的反应应用程序集成时，它给了我这个奇怪的错误

Uncaught GATEWAY_DISCONNECTED | Connection to Twilio's servers was lost

我已经离开了所有的quickstart.js，除了当我的视频组件安装时，我正在调用一个运行所有twilio相关代码的init函数。日志只是说呼叫失败但没有解释。

这是组件代码：

import React from 'react';
import Parse from 'parse';
import Axios from 'axios';

var conversationsClient;
var activeConversation;
var previewMedia;

if(!navigator.webkitGetUserMedia && !navigator.mozGetUserMedia)
    alert('WebRTC is not available in your browser.');

function initVideo(){
    getAccessToken().then((response) => {
        const accessManager = new Twilio.AccessManager(response.data);
        conversationsClient = new Twilio.Conversations.Client(accessManager);
        conversationsClient.ConstructorOptions = {
              logLevel: 'debug'
        };
        conversationsClient.listen().then(
            clientConnected,
            (error) => {
                log('Unable to create conversation');
                console.error('Unable to create conversation', error);
            }
        )
    });
    document.getElementById('button-preview').onclick = function () {
        if(!previewMedia) {
            previewMedia = new Twilio.Conversations.LocalMedia();
            Twilio.Conversations.getUserMedia().then(
                function (mediaStream) {
                    previewMedia.addStream(mediaStream);
                    previewMedia.attach('#local-media');
                },
                function (error) {
                    console.error('Unable to access local media', error);
                    log('Unable to access Camera and Microphone');
                }
            );
        }
    };
}

function getAccessToken(){
    return Axios({
        method: 'post',
        url: 'http://localhost:1337/getAccessToken',
        data: {
            username: Parse.User.current().get('username')
        },
        headers: {
            'Content-Type': 'application/json'
        }
    });
}

function log(message) {
    document.getElementById('log-content').innerHTML = message;
}

function clientConnected(){
    document.getElementById('invite-controls').style.display = 'block';
    log("Connected to Twilio. Listening for incoming Invites as '" + conversationsClient.identity + "'");

    conversationsClient.on('invite', (invite) => {
        log('Incoming invite from: ' + invite.from);
        invite.accept().then(conversationStarted);
    });


    document.getElementById('button-invite').onclick = function () {
        var inviteTo = document.getElementById('invite-to').value;

        if(activeConversation) {
            activeConversation.invite(inviteTo);
        } else {
            var options = {};
            if (previewMedia) {
                options.localMedia = previewMedia;
            }
            conversationsClient.inviteToConversation(inviteTo, options).then(
                conversationStarted,
                function (error) {
                    log('Unable to create conversation');
                    console.error('Unable to create conversation', error);
                }
            );
        }
    };
}

function conversationStarted(conversation){
    log('In an active Conversation');
    activeConversation = conversation;

    if (!previewMedia)
        conversation.localMedia.attach('#local-media');

    conversation.on('participantConnected', (participant) => {
        log("Participant '" + participant.identity + "' connected");
        participant.media.attach('#remote-media');
    });

    conversation.on('participantDisconnected', (participant) => {
        log("Participant '" + participant.identity + "' disconnected");
    });

    conversation.on('ended', (conversation) => {
        log("Connected to Twilio. Listening for incoming Invites as '" + conversationsClient.identity + "'");
        conversation.localMedia.stop();
        conversation.disconnect();
        activeConversation = null;
    });
}

class VideoContainer extends React.Component{
    constructor(){
        super();
        let isWebRTCSupported = true;
        if (!navigator.webkitGetUserMedia && !navigator.mozGetUserMedia)
            isWebRTCSupported = false;
        this.state = {
            isWebRTCSupported: isWebRTCSupported
        };
    }
    componentDidMount(){
        if(this.state.isWebRTCSupported)
            initVideo();
    }
    render(){
        return (
            <div>
                <div id="remote-media"></div>
                <div id="controls">
                    <div id="preview">
                        <p className="instructions">Lookin' good!</p>
                        <div id="local-media"></div>
                        <button id="button-preview">Preview My Camera</button>
                    </div>
                    <div id="invite-controls">
                        <p className="instructions">Invite another Client</p>
                        <input id="invite-to" type="text" placeholder="Identity to invite" />
                        <button id="button-invite">Send Invite</button>
                    </div>
                    <div id="log">
                        <p>&gt;&nbsp;<span id="log-content">Preparing to listen</span>...</p>
                    </div>
                </div>
            </div>
        );
    }
}

请帮忙！