如何在React Native应用中传递Twilio Datatracks

一、创建本地DataTrack #

通过TwilioVideo.createDataTrack方法创建本地数据轨道，可传入配置参数控制传输特性：

import TwilioVideo from 'react-native-twilio-webrtc';

// 创建DataTrack
const localDataTrack = await TwilioVideo.createDataTrack({
  ordered: true, // 是否保证消息顺序
  maxPacketLifeTime: 30000, // 消息最长存活时间
  name: 'custom-data-track' // 轨道名称，方便识别
});

二、加入房间时携带DataTrack #

调用connect方法加入房间时，将创建好的DataTrack和音视频轨道一起传入tracks数组：

const room = await TwilioVideo.connect(yourTwilioToken, {
  roomName: 'your-group-room',
  tracks: [localVideoTrack, localAudioTrack, localDataTrack] // 包含DataTrack
});

三、获取并监听远端DataTrack #

1. 监听新加入参与者的DataTrack #

加入房间后，监听房间的participantConnected事件，再在参与者对象上监听trackAdded事件，判断轨道类型：

room.on('participantConnected', (participant) => {
  participant.on('trackAdded', (track) => {
    // 判断是否为DataTrack
    if (track.kind === 'data') {
      // 监听数据消息
      track.on('message', (message) => {
        console.log('收到远端数据:', message);
        // 处理接收到的数据
      });
    }
  });
});

2. 获取已在房间的参与者的DataTrack #

如果加入房间时已有其他参与者，遍历现有参与者的轨道列表：

room.participants.forEach((participant) => {
  participant.tracks.forEach((track) => {
    if (track.kind === 'data') {
      track.on('message', (message) => {
        console.log('收到远端数据:', message);
      });
    }
  });
});

四、发送数据 #

通过本地DataTrack的send方法发送任意可序列化的数据（字符串、JSON对象等）：

// 发送字符串
localDataTrack.send('Hello from React Native!');

// 发送JSON对象
localDataTrack.send({ type: 'control', action: 'mute' });

内容的提问来源于stack exchange，提问作者Vipul