1. 程式人生 > >Wex5+海康攝像頭+cordova封裝 實現流媒體對接視訊線上監控

Wex5+海康攝像頭+cordova封裝 實現流媒體對接視訊線上監控

上個專案是用wex5開發的,專案中有用到視訊播放功能,對於本地視訊或者儲存到伺服器的視訊,wex5自帶的外掛都支援播放,海康視訊監控在原生端做的很好了,h5目前還不支援,我們的思路只能是將海康視訊播放器封裝成cordova外掛,然後在wex5中呼叫,其中有部分坑記錄下來備用。

執行海康給的原生播放demo,需要地址、使用者名稱、密碼,登陸進去就能實現播放。首先我們將海康原生中沒用的程式碼移除,只保留一個播放視訊的介面,將多餘的檔案全部刪除,原生端弄完後可以直接執行,傳遞四個引數:ip地址、使用者名稱、密碼、視訊編碼值。

原生端做完後需要封裝成cordova外掛,參照wex5官網的cordova外掛封裝的demo:

wex5封裝cordova外掛步驟  ,前面的基本沒啥用,我們最後要的是一個cordova外掛,直接從 2.4 整合程式碼為標準的cordova外掛 開始看就行 ,參照voiceManager的目錄自己建一個目錄,然後我們要做的就是修改整兒的檔名內容配置檔案,最後將完成的cordova外掛拷貝到wex5的Native目錄中的plugins,然後我們在打包的時候搜尋我們的命令就可以看著這個外掛,在wex5頁面直接呼叫方法就可以,下面介紹下cordova外掛封裝的幾個坑

1.新建cordova目錄


2.將目錄拷貝到wex5中的Native/plugins目錄下,打包的時候就會顯示出來


3.目錄檔案中的plugin.xml配置說明

第一次做的時候完全可以參照voiceManager複製一份修改報名及方法名


這個配置檔案中特別注意啟動頁配置及.so型別的jar包配置,做過原生開發的應該清楚.so型別的jar包在android目錄中一般有兩個目錄


原生頁面中的類一個不能少必須全部配置


4. video.js 中實現呼叫原生頁面的方法


5.這是實現你原生想法的頁面,進入到這個頁面就說明你封裝原生程式碼成功了,我在此頁面實現了資料的傳遞及頁面跳轉,MyLiveActivityNoXml.java頁面是實現視訊監控的正真原生頁面
6.wex5頁面中呼叫video.js頁面中的方法,通過呼叫setPlayMode()方法實現資料傳遞
7.然後在上一個打包wex5安裝包選擇外掛時的描述頁

最後總結下整個操作的流程1.在wex5頁面或者別的h5頁面呼叫cordova外掛中的方法將資料傳遞到www/video.js中的方法2.video.js 接受到資料後執行VideoManager.java中的方法3.VideoManager.java原生頁面接受資料並跳轉到正真的視訊播放頁面實現播放下面上一下我寫的一個demo的效果,點選第二個按鈕實現監控攝像頭的視訊播放,點選第三個按鈕實現跳轉到一個原生的頁面
程式碼包括一下內容:

相關推薦

Wex5+攝像頭+cordova封裝 實現媒體對接視訊線上監控

上個專案是用wex5開發的,專案中有用到視訊播放功能,對於本地視訊或者儲存到伺服器的視訊,wex5自帶的外掛都支援播放,海康視訊監控在原生端做的很好了,h5目前還不支援,我們的思路只能是將海康視訊播放器封裝成cordova外掛,然後在wex5中呼叫,其中有部分坑記錄下來備用。

攝像頭遇到的不明白的地方

stat ID 屬性 靜態鏈接庫 部分 tdi 說明 有一個 創建 AfxEnableControlContainer 函數的使用與意義 AfxEnableControlContainer()函數是允許應用程序作為控件容器來使用,對於用MFC向導自動生成的單文檔框架程序的C

搜狗瀏覽器連線攝像頭,無法顯示畫面

根據領導安排,昨天購買並測試了攝像頭及網橋的連線工作。HTTP進入攝像頭之後,始終沒有畫面。這真是……連線已經成功,這個攝像頭壞了?不至於吧?這都很成熟了。 後來換了個QQ瀏覽器,進入攝像頭,就提示要安裝WEB外掛。這個好說!裝上之後,就看到畫面了。抹了一下頭上的急汗,終於放心了,原來不是裝置問

命令列(CMD) 模式下使用 ffplay 播放攝像頭 rtsp 資料

簡述 【海康攝像頭碼流】 主碼流取流: rtsp://admin:[email protected]:554/h264/ch1/main/av_stream 子碼流取流:rtsp://admin:[email protected]:554/h264/ch1/sub/av

命令行(CMD) 模式下使用 ffplay 播放攝像頭 rtsp 數據

cmd admin water png 圖片 ip地址 簡述 密碼 播放 簡述 【海康攝像頭碼流】 主碼流取流: rtsp://admin:[email protected]:554/h264/ch1/main/av_stream 子碼流取流:rtsp://adm

初識TensorFlow之將自己訓練好的模型遷移到電腦攝像頭和外接攝像頭上,並在視訊中實時檢測

有了訓練好的模型之後,可以將模型遷移到電腦或者手機上 電腦: # -*- coding: utf-8 -*- """ @author: Terry n """ # Imports import numpy as np import os import sys impor

攝像頭配置固定IP

前言 首先要海康裝置連線好網線,電腦客戶端跟海康裝置在同一個區域網絡。   1、直接在海康網站下載SADP工具軟體,安裝SADP工具,如圖所示:     2、安裝成功後,桌面的出現裝置網路搜尋,     面板介紹:這裡將SADP軟

live555直播usb 攝像頭實現媒體服務

題記:本篇部落格是根據http://blog.csdn.net/nieyongs/article/details/17919325,的基礎上,對於其環境的搭建做一闡述,記之防止遺忘。首先感謝博主,能夠將自己除錯的原碼分享,但是下載的程式碼是不能執行的,缺少庫的支撐。下面就將

攝像頭第一次RTSP成功

經過兩天的測試,海康RTSP終於測試成功,目前主流型號DS-7804N-SNH可以使用如下的RTSP語句在VLC測試 rtsp://admin:[email protected]:554/Streamin

Ubuntu下使用Python-opencv獲取威視RTSP碼教程

已更新(前面的方法雖然可行但不能解決根本問題,對不住大家了,讓大家浪費了時間!實際有更簡單的方案,請直接檢視分割線以下的內容) /* 下面這部分內容被作廢了 筆者在釋出這篇部落格之前為了拿到海康威視的碼流費了九牛二虎之力,當然也可能是筆者太菜,但是既然折騰出來

攝像頭 Stream Channels的寫法

測試了一天,終於有了點結果,關於海康攝像頭的RTSP寫法 rtsp://xxx:[email protected]:554/Streaming/Channels/101 最後的101很

通過nginx,nginx-rtmp-module實現媒體直播

1、 下載nginx http://nginx.org/en/download.html 下載nginx-rtmp-module: nginx-rtmp-module的官方github地址:https://github.com/arut/nginx-rtmp-module

【史上最全】Nginx+ffmpeg實現媒體系統

#centos6.6安裝搭建nginx+ffmpeg流媒體伺服器 #此係統實現了視訊檔案的直播及快取點播,並支援移動端播放(支援Apple和Android端) #系統需要自行安裝,流媒體伺服器配置完成之後桌面可能掛掉,以後維護需要進命令列進行操作 #必須按照以下步驟配置流媒

最新海攝像機、NVR、媒體伺服器、回放取RTSP地址規則說明

本文件主要介紹海康威視裝置預覽、回放、流媒體取流的RTSP URL和IE直接預覽、回放的HTTP URL。RTSP為取流協議,取到碼流後需要解碼顯示,可以通過VLC播放器進行測試,IE等瀏覽器網頁不支援RTSP協議直接取流預覽或者回放。網頁上需要跳過登入介面直接訪問我們裝置的

阿里雲 實現媒體 直播 demo

原理圖: 我們使用是h5 所以我們直播通過手機端進行訪問 讓我們一起開始奇妙的流媒體之旅吧! 1、下載nginx-rtmp-module: 使用命令: git clone https://github.com/arut/nginx-rtmp

vlc-android 中呼叫用libvlcjni.so實現媒體播放

最近公司搞的專案中涉及到流媒體播放,並且需要硬解碼,所以想到了VLC這個開源專案。去官網下載了vlc-android原始碼進行編譯,生成的apk安裝在公司的裝置上可以執行,不錯不錯,有現成的東西當然不會再去“造輪胎”,把編譯後的android 工程匯入eclipse 看

FFmpeg3.3.2+SDL2實現媒體音訊播放

前言: 由於我比較喜歡聽廣播(中國之聲的“千里共良宵”),這個節目也是滿滿的雞湯,不過確實能觸碰到我們夜行俠的內心深處,併產生共鳴,大家也可以去聽聽試試。不過最好用自己製作的播放器,那感覺倍感親切,固現在把我製作的過程拋磚引玉一番。 正文:

基於SOA架構和媒體技術的線上教育平臺的研究

簡介               現代遠端教育是指通過音訊、視訊(直播或錄影)以及包括實時和非實時在內的計算機技術把課程傳送的教育。現代遠端教育是隨著現代資訊科技的發展而產生的一種新型教育方式。計算機技術、多媒體技術、通訊技術的發展,特別是因特網(Internet)的迅猛發展,使遠端教育的手段有了質的飛躍,成

Android rtsp 媒體視訊幀的處理流程

轉自 http://blog.sina.com.cn/foreverlovelost 先把從收到rtp包到封裝成完整的一幀涉及的相關函式從上到下羅列一遍, 後續在忘記的情況下理清的時候可以作為線索,不用從頭去分析程式碼 (MyHandler.h)onMessageRecei

媒體&音視訊開發流程框架

前言 好久沒有發過部落格了…這幾個月以來一直在複習考研,沒想到獲得了推免資格…閒來無事,最近研究起了流媒體的音視訊開發,在網上查了很多的資料,大致地瞭解了一些皮毛…在這裡特別推薦雷神的部落格.…網上有一句話是這麼說的,沒有看過他的部落格都不好說自己入門了音視訊