超碰人人人人人,亚洲AV午夜福利精品一区二区,亚洲欧美综合区丁香五月1区,日韩欧美亚洲系列

LOGO OA教程 ERP教程 模切知識(shí)交流 PMS教程 CRM教程 開發(fā)文檔 其他文檔  
 
網(wǎng)站管理員

如何使用 Uni-app 實(shí)現(xiàn)視頻聊天(源碼,支持安卓、iOS)

admin
2025年2月24日 16:14 本文熱度 881

  現(xiàn)在使用Uni-app開發(fā)手機(jī)端APP已經(jīng)變得很普遍,同一套代碼就可以打包成Android App 和 iOS App,相比原生開發(fā),可以節(jié)省客觀的人力成本。那么如何使用Uni-app來開發(fā)視頻聊天軟件或視頻會(huì)議軟件了?本文將詳細(xì)介紹在Uni-app中,如何基于OMCS來快速搭建視頻聊天程序。

一、準(zhǔn)備工作

1.在Uni-app項(xiàng)目的根目錄下新建如下目錄結(jié)構(gòu),用來存儲(chǔ)Android和iOS原生插件。

 

2.插件目錄說明

android:在插件android目錄下新建libs目錄,將OMCS原生插件中使用的OMCS非托管庫及jar包放入該目錄下。將OMCS原生插件arr包放入android目錄下

 

ios:將OMCS原生插件中使用的OMCSFramework.framework及OMCS原生插件OMCSPlugin.framework放到ios目錄下

 

3.插件配置文件:nativeplugins根目錄下新建package.json文件,詳細(xì)配置說明及模版請(qǐng)參考uni官網(wǎng)uni小程序SDK

(1)修改package.json配置文件中插件的name及id為omcs-plugin

 

(2)android插件配置

 

(3)ios插件配置

 

4.在uni-app項(xiàng)目配置文件manifest.json中將OMCS原生插件加入項(xiàng)目中

注意:修改配置后,需要重新打包app基座才能生效

 二、正式開發(fā)

首先,我們?cè)趗ni-app項(xiàng)目中引入OMCS-Uni.js文件,然后在依照如下步驟操作。

1.構(gòu)造并初始化OMCS多媒體設(shè)備管理器。如果要設(shè)置一些配置參數(shù),可以在調(diào)用初始化方法之前通過設(shè)置 multimediaManager 的相關(guān)屬性來完成。

const multimediaManager = MultimediaManagerFactory.GetSingleton();  
multimediaManager.initialize(
    this.userID,
    this.password,
    this.serverIP,
    this.serverPort,
    (res)=>{
        if(res == 'OMCS登錄成功' || res == '登錄成功'){}
    }
);

2.本demo中,我們定義了一個(gè)簡(jiǎn)單的客戶端home頁面:home.vue ,用于展示OMCS提供的各個(gè)功能。在home頁面的onLoad方法中,我們請(qǐng)求了手機(jī)的音視頻權(quán)限:

onLoad(options) {
    this.query = options;
    this.loginId = this.query.loginid;
    MultimediaManagerFactory.GetSingleton().checkPermission();
},

home頁界面如下所示:

頁面上的各個(gè)按鈕,用于演示OMCS提供的各個(gè)多媒體連接器的功能。我們以視訊功能為例,當(dāng)攝像頭和話筒的checkbox都勾選上時(shí),表示連接到目標(biāo)用戶的攝像頭和麥克風(fēng)設(shè)備。點(diǎn)擊“語音視頻”按鈕,將跳轉(zhuǎn)至video頁面:

注意:必須勾選攝像頭,并進(jìn)入video頁面后(此時(shí)將看到自己攝像頭的預(yù)覽畫面),其他人才可以連接到自己的攝像頭。

3.開始連接

(1)當(dāng)點(diǎn)擊【開始連接對(duì)方】按鈕時(shí),將連接到對(duì)方攝像頭和麥克風(fēng)

(2)我們封裝了一個(gè)組件UniCameraPanel.nvue,其中使用了OMCS原生控件OMCSSurfaceView作為存放對(duì)方視頻圖像的容器,OMCS原生控件CameraSurfaceView作為存放自己視頻預(yù)覽的容器:

<template>
    <CameraSurfaceView
        ref="camera_self_panel_view" 
        v-if="isSelf" 
        class="selfVideoView"
        ></CameraSurfaceView>
    <OMCSSurfaceView 
        ref="camera_other_panel_view" 
        v-if="!isSelf" 
        class="otherVideoView"
        ></OMCSSurfaceView>
</template>

(3)video頁面使用了UniCameraPanel.nvue控件,根據(jù)isSelf屬性判斷是否為自己預(yù)覽的攝像頭:

<div class="otherView" v-if="isVideo"  @click.stop="changeShowIcon">
    <UniCameraPanelVue
        :isSelf="false" 
        ref="otherCameraPanel"
        class="otherVideoView"
    ></UniCameraPanelVue>
</div>
<div class="selfView"  v-if="isVideo" >
    <UniCameraPanelVue
        :isSelf="true" 
        ref="selfVideoView"
        class="selfVideoView"
    ></UniCameraPanelVue>
</div>

注意:video頁面必須為nvue頁面才能使用UniCameraPanel.nvue控件

(4)在video頁面OnLoad初始化方法中,我們分別定義了CameraConnector和MicrophoneConnector連接器用于連接目標(biāo)用戶的攝像頭和話筒,并通過setConnectorEventListener預(yù)定了CameraConnector和MicrophoneConnector的連接結(jié)束事件和連接斷開事件

onLoad(options) {
    this.query = options;
    this.othername = this.query.destUserID;
    this.username = this.query.username;
    this.isAndroid = uni.getSystemInfoSync().platform == 'android';
    this.isVideo = Boolean(Number(this.query.openCamera));
    if(this.isVideo){
        this.cameraConnector = new CameraConnector(this.query.destUserID);
        this.cameraConnector.setConnectorEventListener(
            this.CameraConnector_ConnectEnded,
            this.CameraConnector_DisConnected
        );
        this.cameraConnector.setVideoDrawMode(VideoDrawMode.Scale);
    };
    if(Boolean(Number(this.query.openMic))){
        this.microphoneConnector = new MicrophoneConnector(this.query.destUserID);
        this.microphoneConnector.setConnectorEventListener(
            this.MicrophoneConnector_ConnectEnded,
            this.MicrophoneConnector_DisConnected
        );
    };
}

注意:CameraConnector連接器需要在OnLoad初始化時(shí)創(chuàng)建

(5)在video頁面【開始連接對(duì)方】按鈕點(diǎn)擊事件中調(diào)用了CameraConnector和MicrophoneConnector連接器的beginConnect方法:

contentOtherBtnClick(){
    if(Boolean(Number(this.query.openCamera))){
        this.cameraConnector.beginConnect();
    };
    if(Boolean(Number(this.query.openMic))){
        this.microphoneConnector.beginConnect();
    };
}

注意:

在調(diào)用CameraConnector連接器的beginConnect方法之前需要執(zhí)行UniCameraPanel控件的SetVideo方法:

SetVideo(_cameraConnector){
    try{
        if(_cameraConnector){
            if(this.isSelf){
                this.$refs.camera_self_panel_view.setVideo();
            }else{
                this.cameraConnector = _cameraConnector;
                const userID = this.cameraConnector.destUserID;
                this.videoDrawMode = this.cameraConnector.videoDrawMode;
                this.$refs.camera_other_panel_view.setVideo({destUserID:userID});
            }
        }
    }catch(e){
        console.log(e)
    }
}

4.當(dāng)退出video頁面或者主動(dòng)斷開連接時(shí),需要調(diào)用CameraConnector連接器和MicrophoneConnector連接器的disconnect方法,并且通過removeConnectorEventListener方法取消預(yù)定的事件,最后還需要調(diào)用多媒體管理器的closeCamera方法斷開自己的預(yù)覽攝像頭

closeVideo(){
    if(this.cameraConnector){
        this.cameraConnector.disconnect();
        this.cameraConnector.removeConnectorEventListener();
        this.cameraConnector = null;
    }
    if(this.microphoneConnector){
        this.microphoneConnector.disconnect();
        this.microphoneConnector.removeConnectorEventListener();
        this.microphoneConnector = null;
    }
    this.isShowVideo = false;
    MultimediaManagerFactory.GetSingleton().closeCamera();
},

三、源碼下載

該Demo的源碼下載地址如下:OMCS.UniappDemo.rar(Android、iOS)

至于服務(wù)端,我們已經(jīng)打包好了exe文件,可以下載后直接雙擊運(yùn)行:

OMCS 服務(wù)端可執(zhí)行程序(解壓后,雙擊exe即可運(yùn)行)

Uniapp版本的Demo還可以與PC版本(Windows、銀河麒麟、統(tǒng)信UOS)的Demo進(jìn)行音視頻通話,PC版可以轉(zhuǎn)到此處下載。


閱讀原文:https://www.cnblogs.com/zhuweisky/p/18734018


該文章在 2025/2/24 18:11:46 編輯過
關(guān)鍵字查詢
相關(guān)文章
正在查詢...
點(diǎn)晴ERP是一款針對(duì)中小制造業(yè)的專業(yè)生產(chǎn)管理軟件系統(tǒng),系統(tǒng)成熟度和易用性得到了國(guó)內(nèi)大量中小企業(yè)的青睞。
點(diǎn)晴PMS碼頭管理系統(tǒng)主要針對(duì)港口碼頭集裝箱與散貨日常運(yùn)作、調(diào)度、堆場(chǎng)、車隊(duì)、財(cái)務(wù)費(fèi)用、相關(guān)報(bào)表等業(yè)務(wù)管理,結(jié)合碼頭的業(yè)務(wù)特點(diǎn),圍繞調(diào)度、堆場(chǎng)作業(yè)而開發(fā)的。集技術(shù)的先進(jìn)性、管理的有效性于一體,是物流碼頭及其他港口類企業(yè)的高效ERP管理信息系統(tǒng)。
點(diǎn)晴WMS倉儲(chǔ)管理系統(tǒng)提供了貨物產(chǎn)品管理,銷售管理,采購管理,倉儲(chǔ)管理,倉庫管理,保質(zhì)期管理,貨位管理,庫位管理,生產(chǎn)管理,WMS管理系統(tǒng),標(biāo)簽打印,條形碼,二維碼管理,批號(hào)管理軟件。
點(diǎn)晴免費(fèi)OA是一款軟件和通用服務(wù)都免費(fèi),不限功能、不限時(shí)間、不限用戶的免費(fèi)OA協(xié)同辦公管理系統(tǒng)。
Copyright 2010-2025 ClickSun All Rights Reserved