Flutter集成Agora实现视频通话默认关闭摄像头

要实现首次进入频道默认关闭视频，只需修改两处配置即可，不影响现有视频开关按钮的功能：

1. 启用AgoraClient默认视频禁用配置 #

在初始化AgoraClient时，启用videoDisabled: true参数，这会让SDK在连接频道时默认关闭本地摄像头：

final AgoraClient client = AgoraClient(
  agoraEventHandlers: (AgoraRtcEventHandlers(leaveChannel: (state) {
    Get.back();
  })),
  videoDisabled: true, // 设置为true，默认关闭视频
  agoraConnectionData: AgoraConnectionData(
      appId: "e0700cba7e944848a29e****",
      channelName: "***",
      username: "asdrere",
      tempToken:
          "006e0700cba7****3d9b2IACy1MhejFRYOOqTS9FVTDH+2aMwmwVbbHjpVlqMbEY1ubd/Wk0AAAAAEACGukDPURzvYgEAAQBRHO9i"),
);

2. 同步本地状态与SDK状态（可选但建议） #

当用户点击开启视频按钮时，除更新本地enableVideo状态，主动调用SDK方法启用本地视频，确保状态完全同步：

GestureDetector(
  onTap: () async {
    setState(() {
      enableVideo = true;
    });
    // 主动启用本地视频，同步SDK状态
    await client.engine.enableLocalVideo(true);
  },
  // 其余代码不变
)

修改后的完整代码 #

class VideoPage extends StatefulWidget {
  final roomid;
  const VideoPage({Key? key, this.roomid}) : super(key: key);

  @override
  State<VideoPage> createState() => _VideoPageState();
}

class _VideoPageState extends State<VideoPage> {
  bool videoIconEnable = false;
  bool enableVideo = false;

  final AgoraClient client = AgoraClient(
    agoraEventHandlers: (AgoraRtcEventHandlers(leaveChannel: (state) {
      Get.back();
    })),
    videoDisabled: true, // 默认关闭视频
    agoraConnectionData: AgoraConnectionData(
        appId: "e0700cba7e944848a29e****",
        channelName: "***",
        username: "asdrere",
        tempToken:
            "006e0700cba7****3d9b2IACy1MhejFRYOOqTS9FVTDH+2aMwmwVbbHjpVlqMbEY1ubd/Wk0AAAAAEACGukDPURzvYgEAAQBRHO9i"),
  );

  @override
  void initState() {
    super.initState();
    initAgora();
  }

  void initAgora() async {
    await client.initialize();
  }

  @override
  void dispose() {
    super.dispose();
    client.leaveChannel(); // 页面销毁时退出频道，释放资源
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
            backgroundColor: Colors.white,
            actions: [
              videoIconEnable
                  ? GestureDetector(
                      onTap: () async {
                        setState(() {
                          enableVideo = true;
                        });
                        await client.engine.enableLocalVideo(true);
                      },
                      child: Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Icon(
                          Icons.video_call,
                          color: kPrimarycolor,
                          size: 30,
                        ),
                      ),
                    )
                  : Container()
            ],
            title: Text(
              'On Call',
              style: TextStyle(
                  color: kPrimarycolor,
                  fontSize: 30,
                  fontWeight: FontWeight.bold),
            )),
        body: SafeArea(
          child: Stack(
            children: [
              TweenAnimationBuilder<Duration>(
                  duration: Duration(seconds: 10),
                  tween:
                      Tween(begin: Duration(seconds: 10), end: Duration.zero),
                  onEnd: () {
                    setState(() {
                      videoIconEnable = true;
                    });
                    print('Timer ended');
                  },
                  builder:
                      (BuildContext context, Duration value, Widget? child) {
                    final minutes = value.inMinutes;
                    final seconds = value.inSeconds % 60;
                    return Padding(
                        padding: const EdgeInsets.symmetric(vertical: 5),
                        child: Text('Video will start in$minutes:$seconds',
                            textAlign: TextAlign.center,
                            style: TextStyle(
                                color: Colors.black,
                                fontWeight: FontWeight.bold,
                                fontSize: 30)));
                  }),
              videoIconEnable
                  ? AgoraVideoViewer(
                      client: client,
                      layoutType: Layout.floating,
                      enableHostControls:
                          true, // 启用主机控制
                    )
                  : Container(),
              AgoraVideoButtons(
                client: client,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

说明 #

• videoDisabled: true是Agora Flutter SDK提供的初始化参数，直接控制首次连接时本地视频的启用状态，是最直接的修改方式。
• 添加client.engine.enableLocalVideo(true)可确保用户手动开启视频时，SDK状态与本地UI状态完全同步，避免UI显示开启但实际视频未启用的情况。
• 在dispose方法中添加client.leaveChannel()，可确保页面销毁时正确退出频道，释放资源。

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