,,

如何使用 Uni-app 實現視頻聊天（源碼，支持安卓、iOS）

admin

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

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

一、準備工作

1.在Uni-app項目的根目錄下新建如下目錄結構，用來存儲Android和iOS原生插件。

2.插件目錄說明

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

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

3.插件配置文件：nativeplugins根目錄下新建package.json文件，詳細配置說明及模版請參考uni官網uni小程序SDK

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

（2）android插件配置

（3）ios插件配置

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

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

二、正式開發

首先，我們在uni-app項目中引入OMCS-Uni.js文件，然后在依照如下步驟操作。

1.構造并初始化OMCS多媒體設備管理器。如果要設置一些配置參數，可以在調用初始化方法之前通過設置 multimediaManager 的相關屬性來完成。

const multimediaManager = MultimediaManagerFactory.GetSingleton();

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

2.本demo中，我們定義了一個簡單的客戶端home頁面：home.vue ，用于展示OMCS提供的各個功能。在home頁面的onLoad方法中，我們請求了手機的音視頻權限：

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

home頁界面如下所示：

頁面上的各個按鈕，用于演示OMCS提供的各個多媒體連接器的功能。我們以視訊功能為例，當攝像頭和話筒的checkbox都勾選上時，表示連接到目標用戶的攝像頭和麥克風設備。點擊“語音視頻”按鈕，將跳轉至video頁面：

注意：必須勾選攝像頭，并進入video頁面后（此時將看到自己攝像頭的預覽畫面），其他人才可以連接到自己的攝像頭。

3.開始連接

（1）當點擊【開始連接對方】按鈕時，將連接到對方攝像頭和麥克風

（2）我們封裝了一個組件UniCameraPanel.nvue，其中使用了OMCS原生控件OMCSSurfaceView作為存放對方視頻圖像的容器，OMCS原生控件CameraSurfaceView作為存放自己視頻預覽的容器：

    <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控件，根據isSelf屬性判斷是否為自己預覽的攝像頭：

    <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連接器用于連接目標用戶的攝像頭和話筒，并通過setConnectorEventListener預定了CameraConnector和MicrophoneConnector的連接結束事件和連接斷開事件

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初始化時創建

（5）在video頁面【開始連接對方】按鈕點擊事件中調用了CameraConnector和MicrophoneConnector連接器的beginConnect方法：

contentOtherBtnClick(){

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

注意：

在調用CameraConnector連接器的beginConnect方法之前需要執行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.當退出video頁面或者主動斷開連接時，需要調用CameraConnector連接器和MicrophoneConnector連接器的disconnect方法，并且通過removeConnectorEventListener方法取消預定的事件，最后還需要調用多媒體管理器的closeCamera方法斷開自己的預覽攝像頭

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）

至于服務端，我們已經打包好了exe文件，可以下載后直接雙擊運行：

OMCS 服務端可執行程序（解壓后，雙擊exe即可運行）

Uniapp版本的Demo還可以與PC版本（Windows、銀河麒麟、統信UOS）的Demo進行音視頻通話，PC版可以轉到此處下載。

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

該文章在 2025/2/24 18:11:46 編輯過

關鍵字查詢

正在查詢...

點晴ERP是一款針對中小制造業的專業生產管理軟件系統,系統成熟度和易用性得到了國內大量中小企業的青睞。

點晴PMS碼頭管理系統主要針對港口碼頭集裝箱與散貨日常運作、調度、堆場、車隊、財務費用、相關報表等業務管理，結合碼頭的業務特點，圍繞調度、堆場作業而開發的。集技術的先進性、管理的有效性于一體，是物流碼頭及其他港口類企業的高效ERP管理信息系統。

點晴WMS倉儲管理系統提供了貨物產品管理,銷售管理,采購管理,倉儲管理,倉庫管理,保質期管理,貨位管理,庫位管理,生產管理,WMS管理系統,標簽打印,條形碼,二維碼管理,批號管理軟件。

點晴免費OA是一款軟件和通用服務都免費，不限功能、不限時間、不限用戶的免費OA協同辦公管理系統。

午夜视频在线观看区二区-午夜视频在线观看视频-午夜视频在线观看视频在线观看-午夜视频在线观看完整高清在线-午夜视频在线观看网站-午夜视频在线观看亚洲天堂

如何使用 Uni-app 實現視頻聊天（源碼，支持安卓、iOS）

一、準備工作

二、正式開發

三、源碼下載