阅读 425

声网Agora音频通话实践 | 掘金技术征文

前言

在互联网快速发展的时代,用户体验 可以说是一个重要的关键词,不论什么样的产品,都要考虑的是用户的一个真实感受,同类型的产品,有很多,但是用的舒服的,方便的,寥寥无几,这就是导致了市面上为什么产品有很多,但是真正做的好的,就那么几款。

相比于直播,音频视频通话可以更直观的让用户接收或者发送,甚至是参与到直播的氛围当中,今天,我们就用 声网Agora 的音频通话功能,实现一个简单的音频通话功能(包括官网案例优化)。

正文

项目创建

这是 声网Agora 官网登陆后的首页,红框创建一个项目;

默认登陆是英文,右上角设置可以修改语言;

创建完成后,会有一个这样的项目,App ID 在我们项目当中,会用到;

实例化对象

首先,我们要创建一个 Client 的对象:

let client = AgoraRTC.createClient({mode: 'live', codec: "h264"});
复制代码

然后初始化一下 client 对象,初始化后可以使用 Agora SDK ,进行加入频道、发布和订阅音频流;

let init = new Promise((resolve, reject) => {
  client.init('这里是 APP ID', resolve, reject);
});
let initResolve = init.then(resolve => {
  console.log("初始化完成");
});
initResolve.catch(reject => {
  console.log("初始化失败");
});
复制代码

这里的 app id 就是在项目创建以后,获取到的 id

官方的案例,使用的不是 Promise ,是回调的 function 

这样的话,后期会有很多的回调,会造成回调地狱的情况,不利于维护,所以我使用的是 Promise
复制代码

初始化 Client 对象完成后, 在成功的回调中调用 client.join 方法。

var joinChannel = new Promise((resolve, reject) => {
    client.join(null, "123", null, resolve, reject);
});
var joinChannelResolve = joinChannel.then(uid => {
    console.log("用户 " + uid + " 加入频道成功");
    localStream.play('agora_local');
});
joinChannelResolve.catch(reject => {
    console.log("加入频道失败", reject);
});
复制代码

在加入频道成功后,创建一个音频流对象,然后初始化一下:

var localStream = AgoraRTC.createStream({
    streamID: uid,
    audio: true,
    video: false,
    screen: false
});
return new Promise((resolve, reject) => {
    localStream.init(resolve, reject);
});
复制代码

初始化完成后,在成功的回调中通过 client.publish 方法发布音频流:

client.publish(localStream, err => {
  console.log("发送本地流错误: " + err);
});

client.on('stream-published', evt => {
  console.log("成功发布本地流");
});
复制代码

在创建好后,就可以用来发布音频了。

完整代码用例:

let client = AgoraRTC.createClient({ mode: "live", codec: "h264" });
let init = new Promise((resolve, reject) => {
  client.init('这里是 APP ID', resolve, reject);
});
let initResolve = init.then(resolve => {
  console.log("初始化完成");
  return new Promise((resolve, reject) => {
    client.join(null, "123", null, resolve, reject);
  });
});
let joinChannelResolve = initResolve.then(uid => {
  console.log("用户 " + uid + " 加入频道成功");
  let localStream = AgoraRTC.createStream({
    streamID: uid,
    audio: true,
    video: false,
    screen: false
  });
  return new Promise((resolve, reject) => {
    localStream.init(resolve, reject);
  });
});
let localStreamPromiseResolve = joinChannelResolve.then(localStream => {
  console.log("成功获得用户媒体");
  localStream.play("agora_local");
});
localStreamPromiseResolve.catch(reject => {
  console.log("获取用户媒体失败", reject);
});
joinChannelResolve.catch(reject => {
  console.log("加入频道失败", reject);
});
initResolve.catch(reject => {
  console.log("初始化失败");
});
复制代码

代码层面的东西,其实对于基础应用来说,很简单,如果追求高质量,高性能的用户体验,那就要根据官网提供的 api 去做自定义了:

结束语

总体产品的体验还是不错的,最起码在使用者角度来说,很简单,很便捷,就是在 回调 部分,会比较麻烦,这是一个需要检查一下是否可以优化的地方

因为对于一些对异步编程理解不是很透彻的开发来说,这样的后期维护,成本很高

Agora SDK 使用体验征文大赛 | 掘金技术征文,征文活动正在进行中

关注下面的标签,发现更多相似文章
评论