序言：書接上文，我們繼續(xù)
SSM架構 +Nginx+FFmpeg實現(xiàn)rtsp流轉(zhuǎn)hls流，在前端html上實現(xiàn)視頻播放

步驟一：把rtsp流轉(zhuǎn)化為hls流，用Java代碼進行轉(zhuǎn)換

package com.tools;import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStreamReader;public class RTSPtoHLS {public static void main(String[] args) {System.out.println("111111111111111111");String inputVideoPath="rtsp://admin:bfm100766@192.168.1.64:554/streaming/channels/101";String outputVideoPath ="D:/nginx/html/orb/test.m3u8";generateVideo( inputVideoPath,  outputVideoPath);}//視頻拼接的接口public static boolean generateVideo(String inputVideoPath, String outputVideoPath) {try {// 構建FFmpeg命令，這里假設是將輸入視頻與模板視頻合成，并輸出成片// 命令示例: ffmpeg -i input.mp4 -i template.mp4 -filter_complex "your_complex_filter_graph" output.mp4// "your_complex_filter_graph" 是你用來應用模板的復雜濾波圖// ffmpeg -fflags +genpts -i rtsp://admin:bfm100766@192.168.1.64:554/streaming/channels/101 -c copy -f hls -hls_time 2.0 -hls_list_size 1  D:/nginx/html/hls/test.m3u8String[] command = new String[]{"ffmpeg","-fflags", "+genpts","-i", inputVideoPath,"-c", "copy","-f", "hls","-hls_time","10","-hls_list_size","10",outputVideoPath};                                        ProcessBuilder processBuilder = new ProcessBuilder(command);Process process = processBuilder.start();// 讀取錯誤流并打印BufferedReader errorReader = new BufferedReader(new InputStreamReader(process.getErrorStream()));String line;while ((line = errorReader.readLine()) != null) {System.out.println(line);}// 等待進程結束　process.waitFor();System.out.println("Video generation completed!!!");return true;} catch (IOException | InterruptedException e) {e.printStackTrace();System.out.println("Error generating video.");}return false;}}

步驟二：SSM 架構中Controller層 如何調(diào)用

package com.controller;import java.util.Calendar;
import java.util.Timer;import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;import com.alibaba.fastjson.JSONObject;
import com.tools.FileCleanupTask;
import com.tools.RTSPtoHLS;@Controller
@RequestMapping("/rh")
public class RtspHlsController {//1跳轉(zhuǎn)到前端首頁面@RequestMapping("/rh_login.html")public String  getdrLogin(HttpServletRequest request,HttpSession session){return "rh_login";}//使用傳遞 參數(shù)改變?nèi)肿兞康膮?shù)@ResponseBody@RequestMapping(value="/setHls")public String set_Entity(HttpServletRequest request)			{ JSONObject  jsonObject=new JSONObject();//第一步先清空nginx中hls文件夾中的內(nèi)容 String directoryPath = "D:/nginx/html/hls/";long thresholdSize = 2000 * 1024; //  文件閾值大小，例如10KB// 創(chuàng)建定時任務FileCleanupTask cleanupTask = new FileCleanupTask(directoryPath, thresholdSize);// 創(chuàng)建定時器并設置初始延遲為0，之后每5分鐘執(zhí)行一次任務（5 * 60 * 1000毫秒）Timer timer = new Timer();timer.schedule(cleanupTask, 60*60*1000, 60 * 60 * 1000); // 初始延遲為1000毫秒，之后每5分鐘執(zhí)行一次（5分鐘=5*60*1000毫秒）//第二步nginx中錄入中hls文件夾中內(nèi)容 //rtsp視頻流的訪問路徑String inputVideoPath="rtsp://admin:bfm100766@192.168.1.64:554/streaming/channels/101";//nginx的路徑 把hls視頻流輸入到nginx服務器 hls文件夾中下String outputVideoPath ="D:/nginx/html/hls/test.m3u8";RTSPtoHLS.generateVideo( inputVideoPath,  outputVideoPath);jsonObject.put("saveUrl", outputVideoPath);return   jsonObject.toString();}//使用傳遞 參數(shù)改變?nèi)肿兞康膮?shù)@ResponseBody@RequestMapping(value="/setHls1")public String set_Entity1(HttpServletRequest request)			{ JSONObject  jsonObject=new JSONObject();//第一步先清空nginx中hls文件夾中的內(nèi)容 String directoryPath = "D:/nginx/html/hls/";long thresholdSize = 5000 * 1024; //  文件閾值大小，例如5000KB==5M// 創(chuàng)建定時任務FileCleanupTask cleanupTask = new FileCleanupTask(directoryPath, thresholdSize);// 創(chuàng)建定時器并設置初始延遲為0，之后每5分鐘執(zhí)行一次任務（5 * 60 * 1000毫秒）Timer timer = new Timer();//timer.schedule(cleanupTask, 60*60*1000, 60 * 60 * 1000); // 初始延遲為1000毫秒，之后每5分鐘執(zhí)行一次（5分鐘=5*60*1000毫秒）//********設置每天的12點，執(zhí)行某一函數(shù)************// 計算下一個12點的時間Calendar calendar = Calendar.getInstance();calendar.set(Calendar.HOUR_OF_DAY, 16); // 設置小時為12calendar.set(Calendar.MINUTE, 40); // 設置分鐘為0calendar.set(Calendar.SECOND, 0); // 設置秒為0calendar.set(Calendar.MILLISECOND, 0); // 設置毫秒為0// 如果當前時間已超過今天的12點，則設置明天的12點if (calendar.before(Calendar.getInstance())) {calendar.add(Calendar.DATE, 1); // 明天的日期}// 安排任務在計算出的時間執(zhí)行timer.schedule(cleanupTask, calendar.getTime());//第二步nginx中錄入中hls文件夾中內(nèi)容 //rtsp視頻流的訪問路徑String inputVideoPath="rtsp://admin:bfm100766@192.168.1.64:554/streaming/channels/101";//nginx的路徑 把hls視頻流輸入到nginx服務器 hls文件夾中下String outputVideoPath ="D:/nginx/html/hls/test.m3u8";RTSPtoHLS.generateVideo( inputVideoPath,  outputVideoPath);jsonObject.put("saveUrl", outputVideoPath);return   jsonObject.toString();}}

步驟三：html播放hls流視頻

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>  
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0" /><title>FLV-HLS 監(jiān)控視頻播放展示界面</title><link rel="stylesheet" href="${pageContext.request.contextPath }/statics/common/commonCss/bootstrap.min.css" /><link rel="stylesheet" href="${pageContext.request.contextPath }/statics/common/demo.css" /><script type="text/javascript" src="${pageContext.request.contextPath }/statics/common/commonJs/jquery.min.js"></script><script type="text/javascript" src="${pageContext.request.contextPath }/statics/common/commonJs/bootstrap.min.js"></script><script type="text/javascript" src="${pageContext.request.contextPath }/statics/common/player/dhhls.min.js"></script><script type="text/javascript" src="${pageContext.request.contextPath }/statics/common/player/dhflv.min.js"></script></head><style>.mgt20 {margin-top: 20px;margin-bottom: 20px;}</style><%-- ${saveUrl} --%><body><div class="demo-box"><div class="title">HLS播放器Demo</div><div class="content"><!-- 左側(cè)導航欄 -->
<!--                 <div class="nav-box"><ul class="nav nav-pills" role="tablist" id="mainTabs"><li role="presentation" class="nav-link list-group-item active-item"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">HLS 視頻流播放</a></li><li role="presentation" class="nav-link list-group-item"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">FLV 視頻流播放</a></li></ul></div> --><!-- tab主要內(nèi)容 --><div class="tab-content content-box"><!-- HLS 播放 --><div role="tabpanel" class="tab-pane active" id="home"><!-- 步驟引導 --><!-- <div class="common-step play-step"><div class="sec-title">HLS視頻流播放步驟</div><div class="step-box"><div class="step-item">1. 獲取HLS實時流地址（如何獲取流地址請查看<a href="https://open-icc.dahuatech.com/hlsplayer/#5">HLS詳細說明</a>），獲取HLS錄像回放流地址（如何獲取流地址請查看<a href="https://open-icc.dahuatech.com/#/home?url=%3Fnav%3Dwiki%2Fadmin%2Freplay.html&version=enterprisebase/5.0.15&blank=true">詳細說明</a>）</div><div class="line-with-arrow"></div><div class="step-item">3. 播放配置輸入流地址</div><div class="step-item">4. 開始播放</div></div></div> --><!-- 播放配置--><div class="common-step play-setting"><div class="sec-title">播放配置</div><div id="oneInput" class="mgt20 mgl10"><label style="display: none;">流地址：</label><input type="text" style="display: none;" class="stream-input" id="oneStartUrl" placeholder="請輸入流地址" value="http://192.168.1.103:80/hls/test.m3u8"><button class="common-btn" id="oneStartVideo">播放</button><button class="common-btn" style="display: none;" id="downloadVideo">錄像下載</button><br><br></div></div><!-- 播放器 --><div><video class="video-box" id="myVideo" controls preload="auto" autoplay="autoplay"></video></div><!--  <div><strong>補充說明</strong>: hls H265視頻編碼播放僅Chrome104及以上版本支持</div> --></div></div></div></div></body><script src="${pageContext.request.contextPath }/statics/common/player/dhflv.min.js"></script><script src="${pageContext.request.contextPath }/statics/common/player/dhhls.min.js"></script><script type="text/javascript">//異步請求處理，開始進行視頻流輸出$.ajax({async:true,   type:"post",url:"${pageContext.request.contextPath }/rh/setHls1",dataType:"json",success:function(data){console.log("nginx 輸出視頻流的絕對路徑路徑"+data.saveUrl);},error:function(){//layer.msg('出現(xiàn)異常');}});//菜單切換$('#mainTabs a').click(function (e) {$(this).tab('show');$(this).siblings().removeClass('active');$(this).parent().siblings().removeClass('active-item active');$(this).parent().addClass('active-item');})/*** 第一部分* HLS實時播放**///檢測瀏覽器是否支持HLS 播放器if (!Hls.isSupported()) {alert("瀏覽器不支持 HLS, 請升級！");}//視頻流幀數(shù)據(jù)、用于下載let fmp4Data = {audio: [],video: [],};let url = "";let hlsplayer = null;$('#oneStartVideo').click(function(e) {url = $('#oneStartUrl').val();if(!url) {alert("請輸入流地址！");return}//初始化錄像配置$('#downloadVideo')[0].innerText = "錄像下載";fmp4Data = {audio: [],video: [],};//開始播放playHls('myVideo',url)})$(document).ready(function(e){url = $('#oneStartUrl').val();//url ="http://127.0.0.1:80/hls/test.m3u8";if(!url) {alert("請輸入流地址！");return}//初始化錄像配置$('#downloadVideo')[0].innerText = "錄像下載";fmp4Data = {audio: [],video: [],};//開始播放playHls('myVideo',url)})//定時重新播放視頻function refreshPageAfter() {//console.log("設定時間符合當前時間")url = $('#oneStartUrl').val();//url ="http://127.0.0.1:80/hls/test.m3u8";if(!url) {alert("請輸入流地址！");return}//初始化錄像配置$('#downloadVideo')[0].innerText = "錄像下載";fmp4Data = {audio: [],video: [],};//開始播放playHls('myVideo',url)}//啟動定時器//self.setInterval("refreshPageAfter()", 61 * 60 *1000);//莫一時間定時器function scheduleRefresh() {var now = new Date();var targetTime = new Date();// 設置目標時間為今天的12點15分targetTime.setHours(17, 36, 0, 0);// 如果當前時間已經(jīng)超過12點15分，則將目標時間設置為明天的12點15分if (now >= targetTime) {targetTime.setDate(targetTime.getDate() + 1);}// 計算從現(xiàn)在到目標時間的毫秒數(shù)var delay = targetTime - now;console.log("設定時間符合當前時間"+delay)// 設置延時，直到目標時間到達setTimeout(refreshPageAfter, delay);console.log("設定時間符合當前時間")}//初始化調(diào)用== 調(diào)用函數(shù)以設置定時刷新scheduleRefresh();//創(chuàng)建hls播放器function playHls(id, url) {//先觸發(fā)銷毀if(hlsplayer != null) {hlsplayer.destroy();}//創(chuàng)建播放let video = document.getElementById(id);if(Hls.isSupported()) {hlsplayer = new Hls();hlsplayer.loadSource(url);hlsplayer.attachMedia(video);hlsplayer.on(Hls.Events.MANIFEST_PARSED, function() {hlsplayer.play(); });} else if(video.canPlayType('application/vnd.apple.mpegurl')) {console.log("apple原生");// 如果支持原生播放video.src = url;video.play();}}//hls錄像下載$('#downloadVideo').click(function(e) {if(!hlsplayer) {alert("請先觸發(fā)播放");return}let text = e.target.innerText;if(text === "錄像下載") {$('#downloadVideo')[0].innerText = "錄像中";playHls('myVideo',url);hlsplayer.on(Hls.Events.BUFFER_APPENDING, function (eventName, data) {//錄像數(shù)據(jù)緩存fmp4Data[data.type].push(data.data);console.log(fmp4Data)});} else {$('#downloadVideo')[0].innerText = "錄像下載";//結束并下載錄像let type = "video";if (fmp4Data[type].length) {const blob = new Blob([arrayConcat(fmp4Data[type])], {type: 'application/octet-stream',});const filename = type + '-' + new Date().toISOString() + '.mp4';let aDom = document.createElement('a')aDom.setAttribute("download",`hlsjs-` + filename);aDom.setAttribute("href", self.URL.createObjectURL(blob));aDom.style.display = 'none';document.body.appendChild(aDom)aDom.click()document.body.removeChild(aDom);}//重置錄像數(shù)據(jù)fmp4Data = {audio: [],video: [],};}})//組合視頻數(shù)據(jù)function arrayConcat(inputArray) {const totalLength = inputArray.reduce(function (prev, cur) {return prev + cur.length;}, 0);const result = new Uint8Array(totalLength);let offset = 0;inputArray.forEach(function (element) {result.set(element, offset);offset += element.length;});return result;} /*** 第二部分* FLV實時播放**///檢測瀏覽器是否支持flv 播放器if ( !dhflvjs.isSupported() ){alert("瀏覽器不支持 FLV, 請升級！");}let flvUrl = "";let flvPlayer = null;$('#oneStartVideoFlv').click(function(e) {flvUrl = $('#oneStartUrlFlv').val();if(!flvUrl) {alert("請輸入流地址！");return}//開始播放playflv('myVideoflV',flvUrl)})//創(chuàng)建flv播放器function playflv(id, url) {if (typeof flvPlayer !== "undefined") {if (flvPlayer != null) {flvPlayer.unload();flvPlayer.detachMediaElement();flvPlayer.destroy();flvPlayer = null;}}const video = document.getElementById(id);flvPlayer = dhflvjs.createPlayer({type: 'flv',url : flvUrl,});flvPlayer.attachMediaElement(video);flvPlayer.load();flvPlayer.play();}//錄像下載$('#downloadVideoFlv').click(function(e) {if(!flvPlayer) {alert("請先觸發(fā)播放");return}let text = e.target.innerText;if(text === "錄像下載") {$('#downloadVideoFlv')[0].innerText = "錄像中";//開始錄像downloadFLV(1);} else {$('#downloadVideoFlv')[0].innerText = "錄像下載";//結束錄像downloadFLV(0);}})//下載錄像function downloadFLV(startFlag) {if( startFlag ) {flvPlayer && flvPlayer.startRecord()} else {flvPlayer && flvPlayer.endRecord()}}</script><script type="text/javascript" src="${pageContext.request.contextPath }/statics/jquery-2.1.0.min.js"></script>
<%-- <script type="text/javascript" src="${pageContext.request.contextPath }/statics/js/sebeiqiehuan.js"></script> --%><script type="text/javascript" src="${pageContext.request.contextPath }/statics/video.min.js"></script></html>

步驟四：所需物料庫
鏈接下載：SSM架構 +Nginx+FFmpeg實現(xiàn)rtsp流轉(zhuǎn)hls流—物料包
地址為：https://download.csdn.net/download/qq_39951524/90465236