聲網Agora音訊通話實踐 | 掘金技術徵文

熱情的劉大爺發表於2019-04-17
Go音訊

前言

在網際網路快速發展的時代，使用者體驗 可以說是一個重要的關鍵詞，不論什麼樣的產品，都要考慮的是使用者的一個真實感受，同型別的產品，有很多，但是用的舒服的，方便的，寥寥無幾，這就是導致了市面上為什麼產品有很多，但是真正做的好的，就那麼幾款。

相比於直播，音訊視訊通話可以更直觀的讓使用者接收或者傳送，甚至是參與到直播的氛圍當中，今天，我們就用 聲網Agora 的音訊通話功能，實現一個簡單的音訊通話功能（包括官網案例優化）。

正文

專案建立

聲網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音訊通話實踐 | 掘金技術徵文

結束語

總體產品的體驗還是不錯的，最起碼在使用者角度來說，很簡單，很便捷，就是在 回撥 部分，會比較麻煩，這是一個需要檢查一下是否可以優化的地方

因為對於一些對非同步程式設計理解不是很透徹的開發來說，這樣的後期維護，成本很高

Agora SDK 使用體驗徵文大賽 | 掘金技術徵文，徵文活動正在進行中

相關文章