agora基本流程

声网(agora)简单流程

一、获取SDK

SDK:代表软件开发工具包是一些被软件工程师用于为特定的软件包、软件框架、硬件平台、操作系统等创建应用软件的开发工具的集合,一般而言SDK即开发Windows平台下的应用程序所使用的SDK。

  1. 使用npm获取SDK:npm install agora-rtc-sdk-ng --save
  2. 使用CDN方法获取SDK:
  3. 手动下载SDK:下载 Agora Web SDK 4x版本SDK包

二、常用对象

  • [AgoraRTCClient](https://docs.agora.io/cn/Video/API Reference/web_ng/interfaces/iagorartcclient.html) 对象,代表一个本地客户端。AgoraRTCClient 类的方法提供了音视频通话的主要功能,例如加入频道、发布音视频轨道等。
  • [LocalTrack](https://docs.agora.io/cn/Video/API Reference/web_ng/interfaces/ilocalaudiotrack.html) 对象,代表本地的音视频轨道对象,用于播放等音视频相关的控制。
  • [RemoteTrack](https://docs.agora.io/cn/Video/API Reference/web_ng/interfaces/iremotetrack.html) 对象,远端的音视频轨道对象,用于播放等音视频相关的控制。

三、基本流程

  1. 根据项目的 App ID 创建一个本地客户端 AgoraRTCClient 对象。
  2. 通过 AgoraRTCClient.join 加入到一个指定的频道中。
  3. 通过麦克风采集的音频创建一个 MicrophoneAudioTrack 对象(本地音频轨道对象);通过摄像头采集的视频创建一个 CameraVideoTrack 对象(本地视频轨道对象)。
  4. 通过 AgoraRTCClient.publish 将创建的本地音视频轨道对象发布到频道中。
  5. 当有其他用户加入频道并且也发布音视频轨道时:
    1. ​ SDK会触发client.on(“user-published”)事件,在这个事件回调函数的参数中你可以拿到远端用户对象AgoraRTCRemoteUser,表示这个用户刚刚发布了音视频轨道。
    2. 通过 AgoraRTCClient.subscribe 订阅获取到的 AgoraRTCRemoteUser
    3. 订阅完成后,访问 AgoraRTCRemoteUser.audioTrackAgoraRTCRemoteUser.videoTrack 即可获取到 RemoteAudioTrack(远端音频轨道对象)和 RemoteVideoTrack(远端视频轨道对象)。

四、简单代码示例

var rtc = {
  // 用来放置本地客户端。
  client: null,
  // 用来放置本地音视频频轨道对象。
  localAudioTrack: null,
  localVideoTrack: null,
};

var options = {
  // 替换成你自己项目的 App ID。
  appId: "<YOUR APP ID>",
  // 传入目标频道名。
  channel: "demo_channel_name",
  // 如果你的项目开启了 App 证书进行 Token 鉴权,这里填写生成的 Token 值。
  token: null,
};

async function startBasicCall() {
  /**
   * 接下来的代码写在这里。
   */
   // 创建本地客户端
   // mode: rtc-通信场景|live-直播场景
    rtc.client = AgoraRTC.createClient({ mode: "live", codec: "vp8" 
    // 加入频道
    /**
   	* appid: 你的 App ID。详见创建 Agora 项目和获取 App ID。
channel: 频道名,长度在 64 字节以内的字符串。在我们的示例项目中,channel 的值设为 demo_channel_name。
token: (可选)如果你的 Agora 项目开启了 App 证书,你需要在该参数中传入一个 Token,详见使用 Token。
   	*/
    const uid = await rtc.client.join(options.appId, options.channel, options.token, null);
    
    // 通过麦克风采集的音频创建本地音频轨道对象。
    rtc.localAudioTrack = await AgoraRTC.createMicrophoneAudioTrack();
    // 通过摄像头采集的视频创建本地视频轨道对象。
    rtc.localVideoTrack = await AgoraRTC.createCameraVideoTrack();
    // 将这些音视频轨道对象发布到频道中。
    await rtc.client.publish([rtc.localAudioTrack, rtc.localVideoTrack]);

    console.log("publish success!");
    
    // 订阅远端用户
    rtc.client.on("user-published", async (user, mediaType) => {
      // 开始订阅远端用户。
      await rtc.client.subscribe(user, mediaType);
      console.log("subscribe success");

      // 表示本次订阅的是视频。
      if (mediaType === "video") {
        // 订阅完成后,从 `user` 中获取远端视频轨道对象。
        const remoteVideoTrack = user.videoTrack;
        // 动态插入一个 DIV 节点作为播放远端视频轨道的容器。
        const playerContainer = document.createElement("div");
        // 给这个 DIV 节点指定一个 ID,这里指定的是远端用户的 UID。
        playerContainer.id = user.uid.toString();
        playerContainer.style.width = "640px";
        playerContainer.style.height = "480px";
        document.body.append(playerContainer);

        // 订阅完成,播放远端音视频。
        // 传入 DIV 节点,让 SDK 在这个节点下创建相应的播放器播放远端视频。
        remoteVideoTrack.play(playerContainer);

        // 也可以只传入该 DIV 节点的 ID。
        // remoteVideoTrack.play(playerContainer.id);
        
         // 获取刚刚动态创建的 DIV 节点。
    const playerContainer = 			document.getElementById(user.uid.toString());
    // 销毁这个节点。
    playerContainer.remove();
      }

      // 表示本次订阅的是音频。
      if (mediaType === "audio") {
        // 订阅完成后,从 `user` 中获取远端音频轨道对象。
        const remoteAudioTrack = user.audioTrack;
        // 播放音频因为不会有画面,不需要提供 DOM 元素的信息。
        remoteAudioTrack.play();
      }
    });
   
	
    
  });
}
 
// 离开频道
/*  1、销毁创建的本地音视频轨道,解除网页对摄像头和麦克风的访问。
	2、手动销毁之前动态创建的 DIV 节点。
	3、调用 leave 离开频道。
*/
async function leaveCall() {
  // 销毁本地音视频轨道。
  rtc.localAudioTrack.close();
  rtc.localVideoTrack.close();

  // 遍历远端用户。
  rtc.client.remoteUsers.forEach(user => {
    // 销毁动态创建的 DIV 节点。
    const playerContainer = document.getElementById(user.uid);
    playerContainer && playerContainer.remove();
  });

  // 离开频道。
  await rtc.client.leave();
}

startBasicCall();
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

懒羊羊我小弟

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值