SSM架构 +java后台 实现rtsp流转hls流，在前端html上实现视频播放

序言：书接上文，我们继续
SSM架构 +Nginx+FFmpeg实现rtsp流转hls流，在前端html上实现视频播放

步骤一：把rtsp流转化为hls流，用Java代码进行转换

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层 如何调用

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跳转到前端首页面@RequestMapping("/rh_login.html")public String  getdrLogin(HttpServletRequest request,HttpSession session){return "rh_login";}//使用传递 参数改变全局变量的参数@ResponseBody@RequestMapping(value="/setHls")public String set_Entity(HttpServletRequest request)			{ JSONObject  jsonObject=new JSONObject();//第一步先清空nginx中hls文件夹中的内容 String directoryPath = "D:/nginx/html/hls/";long thresholdSize = 2000 * 1024; //  文件阈值大小，例如10KB// 创建定时任务FileCleanupTask cleanupTask = new FileCleanupTask(directoryPath, thresholdSize);// 创建定时器并设置初始延迟为0，之后每5分钟执行一次任务（5 * 60 * 1000毫秒）Timer timer = new Timer();timer.schedule(cleanupTask, 60*60*1000, 60 * 60 * 1000); // 初始延迟为1000毫秒，之后每5分钟执行一次（5分钟=5*60*1000毫秒）//第二步nginx中录入中hls文件夹中内容 //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();}//使用传递 参数改变全局变量的参数@ResponseBody@RequestMapping(value="/setHls1")public String set_Entity1(HttpServletRequest request)			{ JSONObject  jsonObject=new JSONObject();//第一步先清空nginx中hls文件夹中的内容 String directoryPath = "D:/nginx/html/hls/";long thresholdSize = 5000 * 1024; //  文件阈值大小，例如5000KB==5M// 创建定时任务FileCleanupTask cleanupTask = new FileCleanupTask(directoryPath, thresholdSize);// 创建定时器并设置初始延迟为0，之后每5分钟执行一次任务（5 * 60 * 1000毫秒）Timer timer = new Timer();//timer.schedule(cleanupTask, 60*60*1000, 60 * 60 * 1000); // 初始延迟为1000毫秒，之后每5分钟执行一次（5分钟=5*60*1000毫秒）//********设置每天的12点，执行某一函数************// 计算下一个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); // 明天的日期}// 安排任务在计算出的时间执行timer.schedule(cleanupTask, calendar.getTime());//第二步nginx中录入中hls文件夹中内容 //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 监控视频播放展示界面</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"><!-- 左侧导航栏 -->
<!--                 <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主要内容 --><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('出现异常');}});//菜单切换$('#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, 请升级！");}//视频流帧数据、用于下载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);// 如果当前时间已经超过12点15分，则将目标时间设置为明天的12点15分if (now >= targetTime) {targetTime.setDate(targetTime.getDate() + 1);}// 计算从现在到目标时间的毫秒数var delay = targetTime - now;console.log("设定时间符合当前时间"+delay)// 设置延时，直到目标时间到达setTimeout(refreshPageAfter, delay);console.log("设定时间符合当前时间")}//初始化调用== 调用函数以设置定时刷新scheduleRefresh();//创建hls播放器function playHls(id, url) {//先触发销毁if(hlsplayer != null) {hlsplayer.destroy();}//创建播放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("请先触发播放");return}let text = e.target.innerText;if(text === "录像下载") {$('#downloadVideo')[0].innerText = "录像中";playHls('myVideo',url);hlsplayer.on(Hls.Events.BUFFER_APPENDING, function (eventName, data) {//录像数据缓存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);}//重置录像数据fmp4Data = {audio: [],video: [],};}})//组合视频数据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)})//创建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("请先触发播放");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实现rtsp流转hls流—物料包
地址为：https://download.csdn.net/download/qq_39951524/90465236