uniapp 直播 声网

### UniApp 中集成声网实现直播功能

#### 集成准备
为了在 UniApp 应用程序中成功集成声网(Agora) SDK 来创建实时音视频互动场景，比如在线教育中的直播课堂，开发者需先完成一系列准备工作。这包括但不限于注册 Agora 账号获取 App ID 和 Temp Token 或者通过服务端生成的正式 Token[^3]。

#### 安装依赖包
安装 `agora-rtc-sdk` 到项目里是必要的一步。可以通过 npm 方式来快速引入此库：

npm install agora-rtc-sdk-ng --save

对于 UniApp 项目而言，考虑到其跨平台特性以及打包机制的影响，建议按照官方文档指引操作以确保兼容性最佳实践[^4]。

#### 初始化 RTC 客户端实例
初始化客户端对象时需要传入应用唯一标识符即 AppID，并设置频道模式为广播型（LiveBroadcasting），以便区分主播与观众角色差异处理逻辑[^5]:

import AgoraRTC from 'agora-rtc-sdk-ng';

const client = AgoraRTC.createClient({ mode: "live", codec: "vp8" });
client.init(appId, () => {
    console.log('AgoraRTC client initialized');
}, (err) => {
    console.error(err);
});

#### 加入频道前配置权限
加入具体房间之前应当请求麦克风摄像头访问授权，这部分工作通常借助浏览器 API 完成；另外还需注意不同操作系统上可能存在的特殊限制条件[^6]。

#### 创建本地流并发布到远端
当用户同意授予媒体设备使用权之后就可以采集音频视频数据形成 MediaStream 对象进而推送给服务器分发给其他参与者共享观看体验了[^7]。

async function publishLocalStream() {
    const stream = await AgoraRTC.createMicrophoneAndCameraStream();
    
    // 发布自己的音视频轨道至远程节点
    client.publish(stream);

    // 将自己画面显示出来供调试查看用途
    document.body.appendChild(stream.play());
}

#### 订阅来自他人的媒体资源
除了推送自身的多媒体信息外还需要监听新成员加入事件从而动态加载对方发送过来的内容呈现于界面之上共同构建完整的交互环境[^8]。

client.on('stream-added', async evt => {
    let remoteStream = evt.stream;
    try{
        await client.subscribe(remoteStream);  
        document.getElementById('remote-video').appendChild(remoteStream.play());   
    } catch(error){
        console.warn(`subscribe stream failed`, error);
    }
})

以上就是基于 UniApp 平台利用声网提供的 Web SDK 构建简单版直播系统的概要介绍和技术要点说明[^9]。