基于Laravel+Vue.js的Agora Web SDK音视频通话切换方案问询

我在Laravel+Vue项目中集成Agora Web SDK实现了通话功能，运行一切正常，但在实现音频通话切换至视频通话的需求时，遇到了两个关键问题：

• 若初始化本地流时设置video=false，虽然能正常进行纯音频通话，但无法通过rtc.localStream.unmuteVideo()切换到视频模式——因为这个方法要求流初始化时video参数必须为true；
• 如果一开始就将video设为true，通过rtc.localStream.muteVideo()关闭摄像头后，设备的摄像头指示灯仍会保持开启状态，本质上还是处于视频通话状态（只是视频轨显示黑屏），用户体验不佳。

我查阅了Agora官方文档，没有找到流创建后修改video参数的方法，推测流的核心配置在创建后是无法直接修改的。

可行的无中断切换方案 #

经过研究，我找到了一套能实现无中断切换的方案，核心是通过替换本地流的方式来切换通话模式，具体步骤如下：

1. 取消发布旧的本地流：调用client.unpublish(rtc.localStream)
2. 创建符合新需求的流：根据切换目标（音频转视频/视频转音频/切换屏幕共享）创建新的本地流
3. 发布新流：等待旧流取消发布完成的事件触发后，初始化新流并调用client.publish(newLocalStream)

关键事件处理

这个流程会触发Agora的一系列事件，需要在项目中监听这些事件来完成流的更新和UI调整：

• 调用client.unpublish后会触发stream-removed事件，代表旧流已经从频道中移除
• 发布新流时会触发stream-added事件，此时需要调用client.subscribe(newStream)来订阅新的本地/远程流
• 订阅完成后会触发stream-subscribed事件，在这个事件的回调函数中，你可以更新本地视频画面的展示、切换按钮的状态，以及处理远程流的渲染逻辑

另外，为了避免资源泄漏，在旧流取消发布后，建议调用rtc.localStream.close()来释放旧流占用的摄像头、麦克风等设备资源。

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