目前，小程式已經成為了我們生活中的一部分，其功能齊全、記憶體佔用小、推廣成本低、利於轉化等優勢促使其發展迅速。伴隨著各行各業在小程式上應用，實時音影片的需求也越來越多，anyRTC 在小程式面世後第一時間推出小程式實時音影片 SDK，幫助開發者在小程式中整合實時音影片功能。

在小程式的實時音影片中，除了典型的視訊會議這樣的應用外，用的最多的便是類似於微信呼叫邀請的功能了，anyRTC 在推出 ARCall 開源示例後，不斷有客戶讓適配小程式來實現呼叫邀請通話，今天就來帶大家微信小程式原生實現 ARCall，來跟 Web 以及 Native 互通。

## 前提準備

### 1. 微信公眾平臺

* 賬號登入[微信公眾平臺](https://mp.weixin.qq.com/)

* 進入`開發`下的`開發管理`，選擇`介面設定`，開啟 **實時播放音影片流**、**實時錄製音影片流**
  
  ![在這裡插入圖片描述](https://img-blog.csdnimg.cn/881ca19a7b164d1986fa5d505f9e4e3b.jpeg#pic_center)

* 進入`開發`下的`開發管理`，選擇`介面設定`，配置伺服器域名

* request合法域名

```
    https://official.opensso.tencent-cloud.com;
    https://rtmgw.agrtc.cn;
    https://wtgw.agrtc.cn;
    ```

* socket合法域名

```
    wss://ctsone.anyrtc.cc;
    wss://ctstwo.anyrtc.cc;
    wss://node1.rtm.agrtc.cn:443;
    wss://node2.rtm.agrtc.cn:443;
    wss://ws.anyrtc.cc;
    wss://wtnode.agrtc.cn;
    ```

* 伺服器域名配置完成後，複製 `AppID(小程式ID)`
 
 ![在這裡插入圖片描述](https://img-blog.csdnimg.cn/306311dd24bf45978998a0c243236b0b.jpeg#pic_center)

### 2. 專案建立、外掛引入

* 建立專案

* 引入外掛

* 初始化npm

```
    npm init
    ```

* 引入 `ar-rtm-sdk`、`ar-rtc-miniapp`

```
    npm install --save ar-rtm-sdk
    npm install --save ar-rtc-miniapp
    ```

![在這裡插入圖片描述](https://img-blog.csdnimg.cn/7a275eafe1e442a8acbce4d9643f1140.jpeg#pic_center)

* 微信開發者配置
  必須先完成上一步驟的外掛引入

* 工具 》 構建 npm
    ![在這裡插入圖片描述](https://img-blog.csdnimg.cn/7c0cf01d5c8f40108dcc52d1a873e0d9.png#pic_center)
    ![在這裡插入圖片描述](https://img-blog.csdnimg.cn/d77801fe36cd445a97892d867c647bf2.jpeg#pic_center)

* 本地執行配置
    ![在這裡插入圖片描述](https://img-blog.csdnimg.cn/6a80bbc29be9407aa6057a136c99e3f0.jpeg#pic_center)

## 程式碼流程邏輯

![在這裡插入圖片描述](https://img-blog.csdnimg.cn/fdf93afa6588481c89c3eb3a007fd4af.jpeg#pic_center)

## 實現效果

![在這裡插入圖片描述](https://img-blog.csdnimg.cn/f9aa05a0fee84f40afd2b32e0b295676.png#pic_center)

## 體驗地址

微信搜尋`anyRTC影片雲`點選`AR 呼叫`即可體驗小程式版 ARCall

## 程式碼地址

檔案`Call_WeChat`
[https://github.com/anyRTC-UseCase/ARCall](https://github.com/anyRTC-UseCase/ARCall)

![在這裡插入圖片描述](https://img-blog.csdnimg.cn/042b1f5e7b1648bbae2a1955015b1ca7.jpeg#pic_center)

開源demo| ARCall 小程式開源示例釋出

相關文章