WebRTC H5頁面 實現服務器轉發的視頻聊天(二) -- 遷移Spring Boot

WebRTC H5頁面 實現服務器轉發的視頻聊天(二) – 遷移Spring Boot

背景

最近一段時間,工作內容也是在遷移項目,加上之前有讀者要源碼,所以打算重構下。

這個項目是之前因爲工作中的調研(項目最後因爲難度太大放棄了 == ),需要了解關於 WebRTC H5 + Java 如何實現實現網頁端的視頻聊天,而編寫的sample。

原理就是 WebRTC + WebSocket。使用 WebRTC 採集視頻看,通過 WebSocket 截取頁面的視頻流轉發到後臺,再經過後臺分發到其他的客戶端網頁。

項目本身使用 Spring,打成 war,直接部署到 Tomcat 的方式運行。而寫這個sample的時候,MyEcplise 還是我的最愛。

現在我已經習慣了 IDEA ,所以打算改成 Spring Boot,然後用 IDEA 跑起來。

項目實現基本不變,代碼實現可考古 WebRTC H5實現服務器轉發的視頻聊天

流程

流程如下

WebRTC
WebSocket
WebSocket
WebRTC
用戶A
瀏覽器
tomcat
瀏覽器
用戶B
  1. 用戶A 訪問頁面,瀏覽器通過 WebRTC API 從攝像頭讀取數據。
  2. 在A的瀏覽器中,流數據轉換爲字節數據,通過 WebSocket 發送到運行在 tomcat 的後臺程序。
  3. 後臺程序緩存視頻數據。
  4. 用戶B 訪問頁面。
  5. 後臺程序從緩存中取出字節數據,通過 WebSocket 分發到用戶B的瀏覽器。
  6. 用戶B的瀏覽器,接收到字節數據,通過 WebRTC API 將字節數據轉爲視頻流,在頁面播放。

遷移過程

以前的架構:Spring

目標:Maven + Spring Boot

改造的過程很簡單,三步走

  1. 將依賴的 lib 統一改爲 maven 管理
  2. 前端等文件統一剛在 src/resouces/static
  3. 後端修改爲 Spring Boot 啓動。

訪問 http://localhost:9090/chat/index.html 即可
在這裏插入圖片描述

注意瀏覽器必須支持 WebRTC 纔可用

使用方式:

打開兩個頁面,分別點擊 init 按鈕,創建連接(途中可能會彈出是否允許使用攝像頭等,需要點擊允許)

然後分別點擊 start 按鈕,此時兩個頁面就會出現兩個畫面,上面的是本端,下面的是對端。

畫面會有延時。

遇到的問題

歷史問題,使用 Spring Boot 2 運行失敗

調整爲 Maven 項目,引入了Spring Boot 後,編譯正常。

自行地 Run ,運行失敗了。。。
在這裏插入圖片描述
編譯錯誤,提示沒有 this 變量, MessageInbound 也提示棄用了。

這說明內置 Tomcat 和項目本身依賴的好像不太不一樣。。。

排查 Spring Boot 自動引入的 tomcat 的版本,果然不適用我的 demo。

內置 Tomcat 通過 spring-boot-starter-web 時自動引入spring-boot-starter-tomcat

此時Sring Boot 的版本爲 2.0.9.RELEASE ,內部 Tomcat 的版本爲 8,而 Tomcat 8 沒有了 MessageInbound
在這裏插入圖片描述

項目本身用的是 Tomcat 7,目前也只有最古老的版本 1.1.12.RELEASE 還支持 Tomcat 7。

所以這裏直接替換 Spring Boot,運行成功了。

Spring Boot 版本引起的問題

Caused by: org.springframework.context.ApplicationContextException: Unable to start EmbeddedWebApplicationContext due to missing EmbeddedServletContainerFactory bean.

1.1.12.RELEASE這個版本的啓動,使用 @EnableAutoConfiguration ,而非 @SpringApplication

@WebServlet 沒效果

要添加 WebServlet 的註冊方式,如下

@Bean
public ServletRegistrationBean mc() {
    return new ServletRegistrationBean(new Monitor(), "/data");
}

代碼託管:https://github.com/bottomheater/WebRTCApplication
代碼託管:https://gitee.com/bottomheater/WebRTCApplication

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