**微信小程式** 實現實時音視訊與 **uniapp 轉碼成微信小程式** 實現實時音視訊兩者是一樣的，區別僅僅是一個是原生小程式一個是 uniapp 轉碼成小程式

本文使用uniapp轉碼成小程式實現音視訊通話

## 前提
  * 確保**微信開發平臺** =》**開發** =》**開發管理** =》**介面設定** 的 **實時播放音視訊流**與**實時錄製音視訊流**開啟

![在這裡插入圖片描述](https://img-blog.csdnimg.cn/ae960e9ee6b34ad58e9116adb3b511b5.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAYW55UlRD,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)

* 線上版本配置 anyRTC 相關的伺服器域名(本地除錯可設定不校驗域名)
    如圖所示：小程式原生本地設定不校驗域名
  
  ![在這裡插入圖片描述](https://img-blog.csdnimg.cn/27df1d5b5ec3485ea320db2aa9d9044b.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAYW55UlRD,size_19,color_FFFFFF,t_70,g_se,x_16#pic_center)

* uniapp 轉小程式可以在**小程式編輯器**中配置也可在 uniapp 的 **manifest.json** 中配置
    
![在這裡插入圖片描述](https://img-blog.csdnimg.cn/38282c7dfb7b49cc9219cca1c3798b15.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAYW55UlRD,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)

## 程式碼邏輯
  #### 1. 引入anyRTC 小程式版的實時音視訊 SDK
  #### 2. 初始化 SDK
  #### 3. 加入相同的頻道並將自己的視訊流釋出出去
  #### 4. 根據相關事件回撥處理相關邏輯

> **必須填寫 appid (在 anyRTC 控制檯的專案管理中獲取)**
   > **使用者 uid 型別必須為字串並且不重複**
   > **只有加入同一頻道房間(型別必須為字串)才可進行通話**

## 程式碼實現
  ### 1. npm 引入 ar-rtc-miniapp
       ```js
         npm i ar-rtc-miniapp
       ```
  ### 2. 封裝 rtc.js

~~~javascript
  ```javascript
    // 引入 RTC
    import ArRTC from "ar-rtc-miniapp";
    console.log("ArRTC 版本", ArRTC);
    // 定義
    let Store = {
        appId: '',
        // 本地使用者uid
        userId: "",
        // 頻道房間
        channelId: "",

// RTC 客戶端
        rtcClient: null,
        // 本地錄製地址(小程式特有推流)
        livePusherUrl: "",
        // 遠端播放(小程式特有拉流)
        livePlayerUrl: "",
    };
    // 初始化 RTC
    const InItRTC = async (info) => {
       Store = Object.assign(Store, info)
       // 建立RTC客戶端 
       Store.rtcClient = new ArRTC.client();
       // 初始化
       await Store.rtcClient.init(Store.appId);
       // 已新增遠端音視訊流
       Store.rtcClient.on('stream-added', rtcEvent.userPublished);
       // 已刪除遠端音視訊流
       Store.rtcClient.on('stream-removed', rtcEvent.userUnpublished);
       // 通知應用程式發生錯誤
       Store.rtcClient.on('error', rtcEvent.error);
       // 更新 Url 地址
       Store.rtcClient.on('update-url', rtcEvent.updateUrl);
       // 遠端視訊已旋轉
       Store.rtcClient.on('video-rotation', rtcEvent.videoRotation);
       // 遠端使用者已停止傳送音訊流
       Store.rtcClient.on('mute-audio', rtcEvent.muteAudio);
       // 遠端使用者已停止傳送視訊流
       Store.rtcClient.on('mute-video', rtcEvent.muteVideo);
       // 遠端使用者已恢復傳送音訊流
       Store.rtcClient.on('unmute-audio', rtcEvent.unmuteAudio);
       // 遠端使用者已恢復傳送視訊流
       Store.rtcClient.on('unmute-video', rtcEvent.unmuteAudio);
       return
   }
  // RTC 監聽事件處理
  const rtcEvent = {
      // RTC SDK 監聽使用者釋出
      userPublished: ({uid}) => {
	    console.log("RTC SDK 監聽使用者釋出", uid);
	    if (Store.Mode == 0) {
		    uni.showLoading({
			    title: '遠端載入中',
			    mask: true,
		    })
	    }

// 訂閱遠端使用者釋出音視訊
	   Store.rtcClient.subscribe(uid, (url) => {
		   console.log("遠端使用者釋出音視訊", url);
		   // 向視訊頁面傳送遠端拉流地址
		   uni.$emit("livePusherUrlEvent", {
			   livePlayerUrl: url
		   });
	   }, (err) => {
		console.log("訂閱遠端使用者釋出音視訊失敗", err);
	   })
   },
       // RTC SDK 監聽使用者取消釋出
       userUnpublished: ({uid }) => {
	       console.log("RTC SDK 監聽使用者取消釋出", uid);
       },
     // 更新 Url 地址
     updateUrl: ({
	      uid,
	      url
      }) => {
	      console.log("包含遠端使用者的 ID 和更新後的拉流地址", uid, url);
	      // 向視訊頁面傳送遠端拉流地址
	      uni.$emit("livePusherUrlEvent", {
		      livePlayerUrl: url
	      });
      },
      // 視訊的旋轉資訊以及遠端使用者的 ID
      videoRotation: ({
	      uid,
	      rotation
      }) => {
	      console.log("視訊的旋轉資訊以及遠端使用者的 ID", uid, rotation);
      },
      // 遠端使用者已停止傳送音訊流
      muteAudio: ({
	      uid
      }) => {
	      console.log("遠端使用者已停止傳送音訊流", uid);
      },
      // 遠端使用者已停止傳送視訊流
      muteVideo: ({
	      uid
      }) => {
	      console.log("遠端使用者已停止傳送視訊流", uid);
      },
      // 遠端使用者已恢復傳送音訊流
      unmuteAudio: ({
	      uid
      }) => {
	      console.log("遠端使用者已恢復傳送音訊流", uid);
      },
      // 遠端使用者已恢復傳送視訊流
      unmuteAudio: ({
	      uid
      }) => {
	      console.log("遠端使用者已恢復傳送視訊流", uid);
      },
      // 通知應用程式發生錯誤。 該回撥中會包含詳細的錯誤碼和錯誤資訊
      error: ({
	      code,
	      reason
      }) => {
	      console.log("錯誤碼:" + code, "錯誤資訊:" + reason);
      },
     }
 // RTC 內部邏輯
 const rtcInternal = {
     // 加入頻道
     joinChannel: () => {
	     console.log("加入頻道", Store.rtcClient);
	     return Store.rtcClient.join(undefined, Store.channelId,      Store.userId, () => {
		// uni.showModal({
		// 	title: '加入頻道'
		// })
		console.log("加入頻道成功", Store.rtcClient);
		// 釋出視訊
		rtcInternal.publishTrack();

}, (err) => {
		console.log("加入頻道失敗");
	});
},
// 離開頻道
leaveChannel: (sendfase = true) => {
	console.log("RTC 離開頻道", Store);

},
// 釋出本地音視訊
publishTrack: () => {
	Store.rtcClient.publish((url) => {
		console.log("釋出本地音視訊", url);
		// 本地錄製地址(小程式特有推流)
		Store.livePusherUrl = url;
		// 向視訊頁面傳送本地推流地址
		uni.$emit("livePusherUrlEvent", {
			livePusherUrl: url
		});
	}, ({
		code,
		reason
	}) => {
		console.log("釋出本地音視訊失敗", code, reason);
	})
   },
  }
     module.exports = {
        InItRTC,
        rtcInternal,
     }
 ```
~~~

### 3. 頁面呼叫

* 頁面
  ```html
       
       <live-pusher v-if="livePusherUrl" :url="livePusherUrl" mode="RTC" autopush="" style="height: 100%;width: 100%;"></live-pusher>
       
       <live-player v-if="livePlayerUrl" :src="livePlayerUrl" mode="RTC" autoplay="" style="height: 100%;width: 100%;position: absolute;z-index: -100;"></live-player>
  ```
  * 頁面邏輯
  ```javascript
    import RTC from "../rtc.js";
    export default {
    	data() {
    		return {
    			// 可用寬度
    			windowWidth: "",
    			// 本地錄製地址(小程式特有推流)
    			livePusherUrl: "",
    			// 遠端播放(小程式特有拉流)
    			livePlayerUrl: "",
    		}
    	},
    	async onLoad() {
    	    // 初始化 RTC
    		await ArRTC.InItRTC({
    					appId: "------------anyRTC 控制檯專案管理中獲取"
    					userId: "----------------自定義",
    					channelId: "----------自定義"
    				});
    		// 加入頻道
    		await ArRTC.rtcInternal.joinChannel();
    		
    	const _this = this;
    		// // 推拉流變更
    		uni.$on("livePusherUrlEvent", (data) => {
    			if (data.livePusherUrl) {
    			_this.livePusherUrl = data.livePusherUrl
    			}
    
    			if (data.livePlayerUrl) {
    				_this.livePlayerUrl = data.livePlayerUrl
    			}
    
    		});
    		// 獲取頁面寬度
    		try {
    			const res = uni.getSystemInfoSync();
    			this.windowWidth = res.windowWidth;
    
    		} catch (e) {
    			// error
    		}
    	},
    	onUnload() {
    		// uni.$off()
    	},
    	methods: {
    		// 元件狀態
    		statechange(e) {
    			console.log('元件狀態:', e)
    		},
    		// 元件錯誤
    		error(e) {
    			console.log("元件錯誤", e);
    		}
    	}
    }
  ```

![在這裡插入圖片描述](https://img-blog.csdnimg.cn/f2d7c19d162c481d8a810de6e887db3d.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAYW55UlRD,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)

uni-app技術分享| uni-app轉小程式_實時音視訊

相關文章