与 Angular 进行 Twilio 视频 + 文字聊天

Question

我正在使用 Twilio 视频聊天处理医生咨询应用程序。

以下内容正在应用程序中运行：

returns令牌的节点服务器
Android 作为客户端的应用程序
Angular 医生网络应用程序

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

这是我的 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', (track, 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, width: 1280 },
                        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],

Answer 1

这里是 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

    })
}

与 Angular 进行 Twilio 视频 + 文字聊天

Twilio Video + Text Chat with Angular

angular

twilio

twilio-video