使用 Angular 进行 Twilio 视频 + 文本聊天

如何解决使用 Angular 进行 Twilio 视频 + 文本聊天

我正在使用 Twilio Video Chat 处理医生咨询应用程序。

以下内容在应用程序中起作用：

返回令牌的节点服务器
充当客户端的 Android 应用
面向医生的 Angular Web 应用程序

音频和视频工作正常，但我想在应用程序之间交换文本消息，以便我可以显示连接或断开连接通知。

这是我用来建立连接的 Angular 代码：

/**
 * @description Connect to a room
 * @param accesstoken 
 * @param options 
 */
connectToRoom(accesstoken: string,options): void {
    connect(accesstoken,options).then(room => {
        this.roomObj = room;

        if (!this.previewing && options['video']) {
            this.initializeLocalConnection();
        }

        this.roomParticipants = room.participants;

        room.participants.forEach(participant => {
            this.attachParticipantTracks(participant);
        });

        room.on('participantdisconnected',(participant) => {
            this.participantdisconnected(participant);
        });

        room.on('participantConnected',(participant) => {
            this.initializeRemoteConnection(room,participant);
        });

        // When a Participant adds a Track,attach it to the DOM.
        room.on('trackPublished',(track,participant) => {
            this.attachTracks([track]);
        });

        // When a Participant removes a Track,detach it from the DOM.
        room.on('trackRemoved',participant) => {
            this.detachTracks([track]);
        });

        room.once('disconnected',room => {
            this.disconnectRoom(room);
        });
    },(error) => {
        alert(error.message);
    });
}

我用这个代码调用这个函数：

this.dataTrack = new LocalDataTrack();

this.connectToRoom(this.access_token,{
            name: this.room_name,//tracks: [this.dataTrack],audio: true,video: { height: 720,frameRate: 24,width: 1280 },bandwidthProfile: {
                video: {
                    mode: 'collaboration',renderDimensions: {
                        high: { height: 1080,width: 1980 },standard: { height: 720,low: { height: 176,width: 144 }
                    }
                }
            },});

我读到我需要为此使用数据轨道。为了接收消息，我添加了以下事件：

participant.on('trackAdded',track => {
  console.log(`Participant "${participant.identity}" added ${track.kind} Track ${track.sid}`);
  if (track.kind === 'data') {
    track.on('message',data => {
      console.log(data);
    });
  }
});

但如果我尝试从代码中删除以下注释，音频和视频将停止工作。代码中没有错误。

//tracks: [this.dataTrack],

解决方法

这里是 Twilio 开发者布道者。

当您添加行 tracks: [this.dataTrack] 时，您是在告诉 Twilio Video 这些是您想要包含的唯一轨道，并且会覆盖要求摄像头和麦克风许可的 SDK。

您可以在这里做两件事。要么自己请求视频和音频轨道，使用 navigator.mediaDevices.getUserMedia 并在数组中传递轨道。

或者，您可以等到房间已连接，然后发布数据轨道。

connectToRoom(accessToken: string,options): void {
    connect(accessToken,options).then(room => {
        this.roomObj = room;

        this.roomObj.publishTrack(this.dataTrack);

        // etc

    })
}