小型直播系統系列-樂聊TV的開發(三)

版權聲明:本文爲博主原創文章,未經博主允許不得轉載。 https://blog.csdn.net/qq_18885315/article/details/77989572

小型直播系統系列-樂聊TV的開發(三)

上一節我們講到系統概括,這一節我們詳細講解一下spring-boot jpa的使用:


spring-boot的使用

如今,隨着微服務框架的發展,出現了諸如dubbo的開源微服務框架,springcloud相比更容易上手,spring-boot作爲微服務的入門框架,有着十分重要的地位。

package com.dingjianlei.springboot;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.scheduling.annotation.EnableScheduling;
/**
 * 
 * @author dingjianlei
 *
 */
@SpringBootApplication
@EnableScheduling
public class LeChatTvApplication {
    public static void main(String[] args) {
        SpringApplication.run(LeChatTvApplication.class, args);
    }
}

如上圖,就已經生成了一個spring-boot的應用,它自帶容器運行,便捷開發,開箱操作,省去了spring的大把配置文件,讓你編碼走路帶風,用它編碼就感覺走路輕飄飄,再也不用理會煩人的xml配置了
本項目的spirng-boot結構如下
這裏寫圖片描述

項目分爲6大模塊

  • 1

    根模塊下面放着啓動項目的入口程序,裝配bean

  • 2

    這裏寫圖片描述

  • 3
    這裏寫圖片描述
    config模塊放着啓動項目時各種監聽器,配置裝載,

  • 4

  • 這裏寫圖片描述
    常用常量

  • 5

  • 常用controller模塊

  • 6
    爬蟲模塊

項目靜態配置文件

這裏寫圖片描述

採用spring-data-jpa 框架,自動建表,dao聲明接口自動幫我們生成方法。

前端播放m3u8視頻

當我們成功安裝好了rtmp模塊之後,就可以用作爲直播服務器,那麼直播的來源哪裏來呢?這裏用到一個推流播放器 obs。

obs的使用

http://soft.qazwaxs.com/OBS到這裏現在下載obs,然後進行設置,步驟如下圖

步驟一:

這裏寫圖片描述

——————————

步驟二

這裏寫圖片描述

步驟三

現在你已經成功的推流成功,cd到你設置的目錄下面,就可以看到後綴是.m3u8的視頻了,下面開始拉流,介紹的是前端拉流用到的框架結構 vue-video-player + videojs-contrib-hls。如果你迫不及待,現在就可以用頁面進行觀看一波

<!DOCTYPE html>  
<html>  
<head>  
    <meta http-equiv="content-type" content="text/html; charset=utf-8">  
    <title>HLS Player</title>  
</head>  
<body>  
<video poster="poster.png" height="720" width="1280" controls>  
    <source src="http://192.168.90.26:8080/hls/mystream.m3u8" type="application/vnd.apple.mpegurl" />  
    <p class="warning">Your browser does not support HTML5 video.</p>  
</video>  
</body>  
</html>

但是很遺憾,只有蘋果手機的Safari瀏覽器支持,安卓手機的沒測試。

vue-video-player + videojs-contrib-hls

前端拉流採用的是 vue-video-player + videojs-contrib-hls,github地址是https://github.com/videojs/videojs-contrib-hls,video.js是一個開源的視頻播放器,開始我使用的是一個cdplayer,同樣支持m3u8的播放,這裏可能有人有疑問,爲什麼不用h5直接播放呢?
因爲蘋果手機天生支持m3u8格式的播放,但是pc很遺憾並不支持,所以需要我們自己編寫播放規則
可以百度一下 vue-video-player + videojs-contrib-hls的使用
很重要的一點,需要解決視頻跨域問題。也就是視頻播放路徑和我們的項目在同一域名端口下。

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