用微信小程序加市面上的網絡攝像頭實現視頻會議

項目介紹

這是本人的畢業設計項目,寫的很糙,但是對網頁開發有了一定的瞭解,現在把項目分享出來。
本系統是採用vue框架搭建視頻管理端,用小程序作爲用戶使用端,其服務器與控制攝像頭模塊都是用node下的koa框架搭建的,開發架構圖如下:

用的攝像頭是淘寶上買的網絡攝像頭,長這樣
在這裏插入圖片描述
數據傳輸格式是xml報文形式,像這樣
在這裏插入圖片描述

開發流程

準備工作

小程序要開通live-play/live-push組件,小程序的類型要滿足如下需求纔可以開啓:


實現視頻會議是使用騰訊雲平臺的雲直播和實時音視頻,其官方介紹文檔:
雲直播:https://cloud.tencent.com/document/product/267/13551
實時音視頻: https://cloud.tencent.com/document/product/647
按照騰旭的官方文檔配置完畢後,就可以進行開發了。

用戶界面截圖

小程序端界面如下:

用戶登陸
用戶定位:

用戶認證:
用戶要使用創建會議功能的話就需要通過用戶認證,用戶認證的題目由視頻管理端錄入
開啓會議界面:
單人會議模式,多人會議模式,帶攝像頭的會議模式。其中多人模式和帶攝像頭的會議模式最多隻支持4人同屏在這裏插入圖片描述在這裏插入圖片描述

視頻管理端截圖:

在這裏插入圖片描述
在這裏插入圖片描述
查看用戶信息:用於查看從微信小程序那邊授權登陸的用戶在這裏插入圖片描述
題目錄入:可以增刪改查題目信息,題目類型做了判斷,單選,多選,其中單選只能增加4個選項,多選能增加到6個選項在這裏插入圖片描述
設備設置,關於這部分我邏輯做的蠻繞的。是通過將服務器發送請求查詢攝像頭的mac地址,通過將mac地址綁定到對應的表中實現硬件控制的。在這裏插入圖片描述
歷史會議:展示小程序端那邊創建的歷史會議在這裏插入圖片描述
項目正在上傳git中。
項目地址: https://github.com/yiyawu/bishe.
如果覺得還行的話,麻煩各位大佬點個贊。
至於數據庫方面,有想了解的朋友可以私聊我,我給你數據庫表。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章