記錄--uniapp 使用原生子窗體進行視頻聊天

来源:https://www.cnblogs.com/smileZAZ/archive/2022/11/24/16922500.html
-Advertisement-
Play Games

這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 現在 uniapp 開發的實時音視頻聊天類的 APP 大部分都要在 nvue 頁面上進行開發。雖然 nvue 與 vue 的區別不是很大,但還是有所差異的。 仔細查看了 uniapp 官網,發現了可以使用原生子窗體進行開發,可以把整個視頻 ...


這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助

現在 uniapp 開發的實時音視頻聊天類的 APP 大部分都要在 nvue 頁面上進行開發。雖然 nvue 與 vue 的區別不是很大,但還是有所差異的。

仔細查看了 uniapp 官網,發現了可以使用原生子窗體進行開發,可以把整個視頻聊天封裝到一個原生子窗體中,方便移植。

一、原生子窗體 subNVue

subNVue 頁面可以和 vue 頁面進行通信,來告知 vue 頁面用戶執行的操作。或者通過 vue 頁面對 subNVue 進行數據和狀態的更新。 subNVue 除了與 vue 頁面進行通信,還 可以與 nvue 頁面進行通信

通信實現方式

// 在 subNVue/vue 頁面註冊事件監聽方法  
// $on(eventName, callback)  
uni.$on('page-popup', (data) => {  
    vm.title = data.title;  
    vm.content = data.content;  
})  

// 在 subNVue/vue 頁面觸發事件  
// $emit(eventName, data)  
uni.$emit('page-popup', {  
    title: '我是一個title',  
    content: '我是data content'  
});

存放位置、相關配置

因為想封裝成一整個模塊,所以建議放在最外層與 pages 文件同級的 paltform\app-plus\subNVue 下。

具體可查看官網 ask.dcloud.net.cn/article/359…

二、開發

(1)引入視頻聊天插件

  1. 使用 anyRTC 提供的 uniapp 插件
  1. 註冊 anyRTC 賬號,創建應用獲取appid
  2. 製作自定義基座

(2) 配置原生子窗體 subNVue

  • 文件位置

  • pages.json 中的配置

(3)簡易實現

<script>
	// 引入 RTC 插件
	const RtcModule = uni.requireNativePlugin('AR-RtcModule');
	// 引入原生子窗體
	const subNVueLocation = uni.getSubNVueById('LocationCanvasView');
	const subNVueRemote = uni.getSubNVueById('RemoteCanvasView');
	export default {
		data() {
			return {
				appid: "2437529dd3ae7e238a7617c61f22daee",
				channel: "",
				uid: "",
				canvasView: {
					typeOption: "location", // 本地/遠端
				},
			};
		},
		// 接受頁面參數
		onLoad(option) {
			// 頻道
			this.channel = option.channel;
			// 用戶
			this.uid = option.uid;
		},
		mounted() {
			this.init()
		},
		methods: {
			// 初始化
			async init() {
				// 初始化 callback
				await RtcModule.setCallBack(event => {
					switch (event.engineEvent) {
						case "onWarning":
							console.log("onWarning", event);
							break;
						case "onError":
							console.log("onError", event);
							break;
						case "onJoinChannelSuccess": //用戶加入成功
							console.log("用戶" + event.uid + "加入成功");	
							
							this.localAudioVideoFn()
							break;
						case "onLeaveChannel": //離開頻道回調

							break;
						case "onUserJoined": //遠端用戶加入當前頻道回調。
							// this.promptFn("info", "遠端用戶加入當前頻道回調");

							break;
						case "onUserOffline": //遠端用戶離開當前頻道回調。

							break;

						case "onFirstLocalAudioFrame": //已發送本地音頻首幀的回調。(頁面上添加音頻)
							break;
						case "onFirstLocalVideoFrame": //已顯示本地視頻首幀的回調。(頁面添加本地視頻)
							// this.promptFn("error", "已顯示本地視頻首幀的回調");
							break;
						case "onFirstRemoteVideoDecoded": //已完成遠端視頻首幀解碼回調。(頁面添加遠端視頻)
							// this.promptFn("info", "已完成遠端視頻首幀解碼回調");
							this.remoteAudioVideoFn(event.uid, this.channel);
							break;
					}

				});
				// 初始化 appid
				await RtcModule.create({
					"appId": this.appid
				}, (res) => {});

				//設置直播場景下的用戶角色 主播
				await RtcModule.setClientRole({
					"role": 1
				}, (ret) => {});

				//加入房間
				await RtcModule.joinChannel({
					"token": "",
					"channelId": this.channel,
					"uid": this.uid
				}, (res) => {})
				// 隱藏原生子窗體
				subNVueLocation.hide();
				subNVueRemote.hide();
			},
			// 採集視頻
			async localAudioVideoFn() {
				// 採集本地視頻
				this.canvasView = await Object.assign(this.canvasView, {
					channelId: this.channel,
					uid: this.uid,
					RtcModule
				})
				// 打開 本地視頻容器 子窗體  
				await subNVueLocation.show();
				await uni.$emit('LocationCanvasViewFn', this.canvasView);
			},
			// 遠端視頻渲染
			async remoteAudioVideoFn(uid, channelId) {
				// 通過 id 獲取 nvue 子窗體
				this.open2 = true;
				// 打開 遠端視頻容器 子窗體  
				await subNVueRemote.show();
				await uni.$emit('RemoteCanvasViewFn', {
					uid,
					channelId,
					typeOption: "remote"
				});
			}
		}
	}
</script>

本文轉載於:

https://juejin.cn/post/6964583553761804301

如果對您有所幫助,歡迎您點個關註,我會定時更新技術文檔,大家一起討論學習,一起進步。

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 在實際使用時,必不可少地需要將多個文檔甚至是多個集合彙總到一起計算、分析,MongoDB 提供了原生聚合框架支持這樣的計算、分析。 ...
  • 一、創建表的完整語法 1、創建表的語法 create table 表名( ​ 欄位名1 欄位類型(數字) 約束條件, ​ 欄位名2 欄位類型(數字) 約束條件, ​ 欄位名3 欄位類型(數字) 約束條件,...) 2、創建表的條件 create table: 創建表的關鍵字 表名:表的名字 欄位名: ...
  • 一、SQL與NoSQL ​ 資料庫服務端可以服務多種類型的客戶端 ​ 客戶端可以是自己開發的,也可以是python代碼編寫的,也可以是其他編程語言編寫的 SQL 操作關係型數據的語言 NoSQL 操作非關係型數據的語言 須知: ​ 1、SQL有時又也指代關係型資料庫 ​ 2、NoSQL有時候也指代非 ...
  • 一、MySQL簡介 ​ MySQL是一種關係型資料庫管理系統,關係資料庫將數據保存在不同的表中,而不是將所有數據放在一個大倉庫內,這樣就增加了速度並提高了靈活性。 二、安裝與下載 1、下載流程 1、訪問官方(www.mysql.com) 2、點擊‘DOWNLOADS’,進入下載界面 3、下拉,找到‘ ...
  • 關於 uniapp 獲取已安裝應用列表 uniapp 中返回的數據問題 獲取所有安裝的app 判斷是否是系統應用 獲取詳細app信息 遇到的問題 參考文檔 uniapp 中返回的數據問題 在uniapp中有時候放回的數據是 一個對象裡面(如下麵所示這種)根本不知大怎麼處理,查閱資料也沒相關資料,只能 ...
  • Android開發之線程間通信 當我們的軟體啟動的時候,電腦會分配進程給到我們運行的程式,在進程中包含多個線程用於提高軟體運行速度。 在android網路請求中,我們知道在日常開發中不能在子線程中跟新ui,否則報錯Only the original thread that created a vi ...
  • 現如今, AR技術不斷發展,人們不再滿足於運用鍵盤、滑鼠等簡單器械來實現傳統的人機交互模式。隨著用戶接觸機器的多樣化,繁瑣的操作不但對一些用戶有門檻,而且還增加其學習成本;如果能用自然且符合日常生活習慣的人機交互模式,不僅更好上手,也能讓開發者們在應用內開發更多玩法。比如在視頻直播或者拍照過程中,一 ...
  • 對象中可以直接寫變數 ES6 允許在大括弧裡面,直接寫入變數和函數,作為對象的屬性和方法。 const foo = 'bar'; const obj = {foo}; //key值就是foo,value值是 foo變數對應的值 // 輸出的是 {foo: "bar"} console.log(obj ...
一周排行
    -Advertisement-
    Play Games
  • public static void GetRegistData() { string name = "huishuangzhu"; //搜索到註冊表根目錄 RegistryKey hkml = Registry.ClassesRoot; //搜索到註冊表根目錄下的XXX文件夾。 RegistryK ...
  • 用acme.sh自動部署功能變數名稱證書 安裝ACME 目前使用量最大的免費SSL證書就是Let’s Encrypt,自2018-03開始,Let’s Encrypt官方發佈上線了免費的SSL泛功能變數名稱證書,目前通過DNS方式獲取比較快,國內可以通過鵝雲的DNSPod功能變數名稱API或者貓雲功能變數名稱API自動簽發Let’ ...
  • 經常看到有群友調侃“為什麼搞Java的總在學習JVM調優?那是因為Java爛!我們.NET就不需要搞這些!”真的是這樣嗎?今天我就用一個案例來分析一下。 昨天,一位學生問了我一個問題:他建了一個預設的ASP.NET Core Web API的項目,也就是那個WeatherForecast的預設項目模 ...
  • 1、環境搭建 1.1 依賴 <!-- nacos註冊中心 註解 @EnableDiscoveryClient --> <dependency> <groupId>com.alibaba.cloud</groupId> <artifactId>spring-cloud-starter-alibaba- ...
  • ULID:Universally Unique Lexicographically Sortable Identifier(通用唯一詞典分類標識符) UUID:Universally Unique Identifier(通用唯一標識符) 為什麼不選擇UUID UUID 目前有 5 個版本: 版本1: ...
  • 虛基類/抽象類 抽象類:有純虛函數的類 虛繼承 通過修飾繼承方式, 如代碼2是虛繼承,被虛繼承的類稱為虛基類 虛繼承派生類的記憶體佈局方式 先是vbptr => 派生類的數據 =>基類的數據 , 對比代碼1和代碼2,發現原本基類數據在前面,派生類數據在後面,但是在虛繼承的時候 基類數據方式放到了後面, ...
  • 下麵給出 Kafka 一些重要概念,讓大家對 Kafka 有個整體的認識和感知,後面還會詳細的解析每一個概念的作用以及更深入的原理 • Producer:消息生產者,向 Kafka Broker 發消息的客戶端。 • Consumer:消息消費者,從 Kafka Broker 取消息的客戶端。 • ...
  • 前面介紹了對稱加密演算法,本文將介紹密碼學中另一類重要應用:消息摘要(Digest),什麼是消息摘要?簡單的定義是:對一份數據,進行一個單向的Hash函數,生成一個固定長度的Hash值,這個值就是這份數據的摘要,也稱為指紋。 ...
  • 弟弟最近要考試,臨時抱佛腳在網上找了一堆學習資料複習,這不剛就來找我了,說PDF上有水印,影響閱讀效果,到時候考不好就怪資料不行,氣的我差點當場想把他揍一頓! 算了,弟弟長大了,看在打不過他的份上,就不打他了~ 稍加思索,我想起了Python不是可以去水印?說搞就搞! 去除水印原理 去除方法: 用 ...
  • 作者:陳昌浩 1 導讀 if…else…在代碼中經常使用,聽說可以通過Java 8的Function介面來消滅if…else…!Function介面是什麼?如果通過Function介面介面消滅if…else…呢?讓我們一起來探索一下吧。 2 Function介面 Function介面就是一個有且僅有 ...