提问者:小点点

Twilio与Angular的视频文本聊天


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

以下内容在应用程序中工作:

  1. 返回令牌的节点服务器
  2. 充当客户端的Android应用程序
  3. 面向医生的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', (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],

共1个答案

匿名用户

Twilio开发者布道者在这里。

当您添加行曲目:[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

    })
}