Flutter使用twilio_programmable_video加入房间时遇TypeError问题求助

我在Flutter应用中使用twilio_programmable_video包实现视频通话功能，已通过Twilio控制台手动生成Access Token并硬编码到应用中。Flutter Web端可以成功加入/创建房间，但加入后不久会出现如下错误：

TypeError: Cannot read properties of undefined (reading 'attach')

我的代码（尚未实现本地轨道以显示画面）：

late Room _room;
final Completer<Room> _completer = Completer<Room>();

Future<Room> connectToRoom() async {
  await TwilioProgrammableVideo.debug(dart: true, native: true);
  // // Create an audio track.
  // var localAudioTrack = LocalAudioTrack(true, 'local_audio');
  //
  // // Retrieve the camera source of your choosing
  // var cameraSources = await CameraSource.getSources();
  // var cameraCapturer = CameraCapturer(
  //   cameraSources.firstWhere((source) => source.isFrontFacing),
  // );
  //
  // // Create a video track.
  // var localVideoTrack = LocalVideoTrack(true, cameraCapturer);
  //
  // // Getting the local video track widget.
  // // This can only be called after the TwilioProgrammableVideo.connect() is called.
  // var widget = localVideoTrack.widget();


  final connectOptions = ConnectOptions(
  accessToken,
  roomName: roomName,
  // audioTracks: [LocalAudioTrack(true ],
  // videoTracks: localTracks,
  );


  _room = await TwilioProgrammableVideo.connect(connectOptions);
  _room.onConnected.listen((room){
    print('Connected to ${room.name}');
    _completer.complete(_room);
  });
  _room.onConnectFailure.listen((event){
    print('Failed to connect to room ${event.room.name} with exception: ${event.exception}');
    _completer.completeError(event.exception as Object);
  });
  return _completer.future;
}

问题原因 #

该错误是由于未初始化并传入本地音视频轨道导致的。Twilio Web端SDK在连接房间后，会尝试处理本地轨道的渲染逻辑，当没有配置任何本地轨道时，SDK内部会访问未定义的对象，触发Cannot read properties of undefined (reading 'attach')错误。

修复步骤 #

• 恢复并正确初始化本地音视频轨道：取消注释代码中的轨道创建逻辑，确保在连接房间前完成音视频轨道的初始化，并将其传入ConnectOptions。
• 处理媒体权限请求：Flutter Web端需要用户授权摄像头和麦克风权限，确保浏览器弹出权限请求时用户允许。
• 验证Access Token权限：检查Twilio控制台生成的Access Token是否包含video和audio权限，确保Token具备加入视频房间的权限。

修改后的完整代码 #

late Room _room;
final Completer<Room> _completer = Completer<Room>();

Future<Room> connectToRoom() async {
  await TwilioProgrammableVideo.debug(dart: true, native: true);

  // 创建本地音频轨道
  var localAudioTrack = await LocalAudioTrack.create(LocalAudioTrackOptions(true, name: 'local_audio'));

  // 获取摄像头源并创建视频捕获器
  var cameraSources = await CameraSource.getSources();
  var cameraCapturer = CameraCapturer(
    cameraSources.firstWhere((source) => source.isFrontFacing),
  );

  // 创建本地视频轨道
  var localVideoTrack = await LocalVideoTrack.create(LocalVideoTrackOptions(true, cameraCapturer, name: 'local_video'));

  // 配置连接选项，传入本地音视频轨道
  final connectOptions = ConnectOptions(
    accessToken,
    roomName: roomName,
    audioTracks: [localAudioTrack],
    videoTracks: [localVideoTrack],
  );

  _room = await TwilioProgrammableVideo.connect(connectOptions);
  
  _room.onConnected.listen((room){
    print('Connected to ${room.name}');
    // 可以在这里获取本地视频轨道的Widget用于渲染
    var localVideoWidget = localVideoTrack.widget();
    _completer.complete(_room);
  });
  
  _room.onConnectFailure.listen((event){
    print('Failed to connect to room ${event.room.name} with exception: ${event.exception}');
    _completer.completeError(event.exception as Object);
  });
  
  return _completer.future;
}

额外注意事项 #

• 若不需要视频轨道，仅需保留音频轨道并传入ConnectOptions，同样可以避免该错误。
• 在Web端测试时，确保使用HTTPS协议（localhost除外），否则浏览器会阻止媒体权限请求。

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