個人網(wǎng)站頁面模板怎樣在百度上免費建網(wǎng)站
學習鏈接
ffmpeg-demo 當前對應的 gitee代碼
Spring boot視頻播放(解決MP4大文件無法播放),整合ffmpeg,用m3u8切片播放。
springboot 通過javaCV 實現(xiàn)mp4轉(zhuǎn)m3u8 上傳oss
如何保護會員或付費視頻?優(yōu)酷是怎么做的? - HLS 流媒體加密
ffmpeg視頻轉(zhuǎn)切片m3u8并加密&videojs播放&hls.js播放&dplayer播放(彈幕效果)
video標簽學習 & xgplayer視頻播放器分段播放mp4
SpringBoot&FFmpeg實現(xiàn)上傳視頻到本地,使用M3U8切片轉(zhuǎn)碼后,下方使用hls.js播放(支持mp4&avi),SpringBoot + FFmpeg實現(xiàn)一個簡單的M3U8切片轉(zhuǎn)碼系統(tǒng)
文章目錄
- 學習鏈接
- 簡介
- 效果圖
- 代碼
- pom.xml
- application.yml
- WebConfig
- TestController
- FFmpegProcessor
- App
- nginx配置
- player.html
- 測試
簡介
將上傳的視頻文件,使用javacv拆分成m3u8文件和ts文件,m3u8文件和ts文件通過nginx訪問,而key文件則通過web服務來獲取。使用dplayer播放視頻。
也可以使用ffmpeg命令來做,可以參考上面鏈接。
(當前能把mp4這樣處理,但是不能處理avi,處理avi會報錯;處理avi的可以參考springboot-ffmpeg-m3u8-convertor - gitee代碼,或者這個springboot-ffmpeg-demo - gitee代碼)
效果圖
m3u8文件和ts文件通過nginx訪問,而key文件則通過web服務來獲取
拿不到key文件是無法播放的
代碼
pom.xml
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"><parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.3.4.RELEASE</version><relativePath/> <!-- lookup parent from repository --></parent><modelVersion>4.0.0</modelVersion><groupId>org.example</groupId><artifactId>ffmpeg-demo</artifactId><version>1.0-SNAPSHOT</version><properties><java.version>1.8</java.version><javacv.version>1.5.4</javacv.version><ffmpeg.version>4.3.1-1.5.4</ffmpeg.version></properties><dependencies><!--web 模塊 --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId><exclusions><!--排除tomcat依賴 --><exclusion><artifactId>spring-boot-starter-tomcat</artifactId><groupId>org.springframework.boot</groupId></exclusion></exclusions></dependency><!--undertow容器 --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-undertow</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId><scope>test</scope></dependency><!-- javacv 和 ffmpeg的依賴包 --><dependency><groupId>org.bytedeco</groupId><artifactId>javacv</artifactId><version>${javacv.version}</version><exclusions><exclusion><groupId>org.bytedeco</groupId><artifactId>*</artifactId></exclusion></exclusions></dependency><dependency><groupId>org.bytedeco</groupId><artifactId>ffmpeg-platform</artifactId><version>${ffmpeg.version}</version></dependency><dependency><groupId>cn.hutool</groupId><artifactId>hutool-all</artifactId><version>5.6.5</version></dependency></dependencies><build><plugins><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId></plugin></plugins></build></project>
application.yml
server:port: 8080
spring:servlet:multipart:max-file-size: 500MBmax-request-size: 500MB
WebConfig
@Configuration
public class WebConfig implements WebMvcConfigurer {@Overridepublic void addResourceHandlers(ResourceHandlerRegistry registry) {registry.addResourceHandler("/test/**").addResourceLocations("file:" + System.getProperty("user.dir") + "/test/");registry.addResourceHandler("/tmp/**").addResourceLocations("file:" + System.getProperty("user.dir") + "/tmp/");}@Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/**").maxAge(3600).allowCredentials(true).allowedOrigins("*").allowedMethods("*").allowedHeaders("*").exposedHeaders("token","Authorization");}
}
TestController
import cn.hutool.core.io.IoUtil;
import cn.hutool.core.io.file.FileReader;
import cn.hutool.core.io.file.FileWriter;
import com.zzhua.processor.FFmpegProcessor;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;import javax.servlet.ServletInputStream;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.FileInputStream;
import java.io.IOException;@RestController
public class TestController {/*** 目錄路徑,這個路徑需要包含test.info文件,test.key文件和test.mp4文件*/private static final String PATH = "D:\\Projects\\practice\\ffmpeg-demo\\test\\";@RequestMapping("uploadToM3u8")public void uploadToM3u8() throws Exception {FileInputStream inputStream = new FileInputStream(PATH + "test.mp4");/* 這里原來的邏輯是1、m3u8Url是將生成的m3u8文件流寫入的位置,可以填寫接收該請求的接口路徑2、infoUrl是獲取keyinfo文件的路徑,可以是接口路徑3、上面2個都可以是本地路徑*/// String m3u8Url = "http://localhost:8080/upload/test.m3u8";// String infoUrl = "http://localhost:8080/preview/test.keyinfo";String m3u8Url = "D:\\Projects\\practice\\ffmpeg-demo\\test\\test.m3u8";String infoUrl = "D:\\Projects\\practice\\ffmpeg-demo\\test\\test.keyinfo";String segmentPattern = "http://localhost:8080/upload/test-%d.ts";FFmpegProcessor.convertMediaToM3u8ByHttp(inputStream, m3u8Url, infoUrl, segmentPattern);}@RequestMapping("convertToM3u8")public void convertToM3u8(MultipartFile mfile) {FFmpegProcessor.convertMediaToM3u8(mfile);}@PostMapping("upload/{fileName}")public void upload(HttpServletRequest request, @PathVariable("fileName") String fileName) throws IOException {ServletInputStream inputStream = request.getInputStream();FileWriter writer = new FileWriter(PATH + fileName);writer.writeFromStream(inputStream);IoUtil.close(inputStream);}/*** 預覽加密文件*/@PostMapping("preview/{fileName}")public void preview(@PathVariable("fileName") String fileName, HttpServletResponse response) throws IOException {FileReader fileReader = new FileReader(PATH + fileName);fileReader.writeToStream(response.getOutputStream());}/*** 預覽加密文件*/@GetMapping("download/{fileName}")public void download(@PathVariable("fileName") String fileName, HttpServletResponse response) throws IOException {FileReader fileReader = new FileReader(PATH + fileName);fileReader.writeToStream(response.getOutputStream());}}
FFmpegProcessor
import org.bytedeco.ffmpeg.avcodec.AVPacket;
import org.bytedeco.ffmpeg.global.avcodec;
import org.bytedeco.ffmpeg.global.avutil;
import org.bytedeco.javacv.*;
import org.springframework.web.multipart.MultipartFile;import java.io.*;
import java.nio.file.Files;
import java.nio.file.Path;
import java.nio.file.Paths;public class FFmpegProcessor {/*** 這個方法的url地址都必須是一樣的類型 同為post*/public static void convertMediaToM3u8ByHttp(InputStream inputStream, String m3u8Url, String infoUrl, String segmentPattern) throws IOException {avutil.av_log_set_level(avutil.AV_LOG_INFO);FFmpegLogCallback.set();FFmpegFrameGrabber grabber = new FFmpegFrameGrabber(inputStream);grabber.start();FFmpegFrameRecorder recorder = new FFmpegFrameRecorder(m3u8Url, grabber.getImageWidth(), grabber.getImageHeight(), grabber.getAudioChannels());recorder.setFormat("hls");// 拆分時間片段長度recorder.setOption("hls_time", "60");recorder.setOption("hls_list_size", "0");recorder.setOption("hls_flags", "delete_segments");recorder.setOption("hls_delete_threshold", "1");recorder.setOption("hls_segment_type", "mpegts");/* 這里指定生成的ts文件保存位置,可以寫接口路徑, 該接口用于接收ts文件流*/// recorder.setOption("hls_segment_filename", "http://localhost:8080/upload/test-%d.ts");recorder.setOption("hls_segment_filename", segmentPattern);recorder.setOption("hls_key_info_file", infoUrl);// http屬性recorder.setOption("method", "POST");recorder.setFrameRate(25);recorder.setGopSize(2 * 25);recorder.setVideoQuality(1.0);recorder.setVideoBitrate(10 * 1024);recorder.setVideoCodec(avcodec.AV_CODEC_ID_H264);recorder.setAudioCodec(avcodec.AV_CODEC_ID_AAC);/*// 只保存圖像,而不保存聲音recorder.start();Frame frame;while ((frame = grabber.grabImage()) != null) {try {recorder.record(frame);} catch (FrameRecorder.Exception e) {e.printStackTrace();}}recorder.setTimestamp(grabber.getTimestamp());recorder.close();grabber.close();*//* 圖像 + 聲音 */recorder.start(grabber.getFormatContext());AVPacket packet;while ((packet = grabber.grabPacket()) != null) {try {recorder.recordPacket(packet);} catch (FrameRecorder.Exception e) {e.printStackTrace();}}recorder.setTimestamp(grabber.getTimestamp());recorder.stop();recorder.release();grabber.stop();grabber.release();}private static final String BASE_PATH = System.getProperty("user.dir") + "\\tmp\\";public static void convertMediaToM3u8(MultipartFile mfile) {String origFileName = mfile.getOriginalFilename();String fileName = origFileName.substring(0, origFileName.lastIndexOf("."));String dirName = fileName;String fileDir = BASE_PATH + fileName;File dirFile = new File(fileDir);if (!dirFile.exists()) {dirFile.mkdirs();}try {File rawFile = new File(dirFile, origFileName);// 保存文件mfile.transferTo(rawFile);// 生成密鑰文件String commonFileName = fileDir + "\\" + fileName;generateKeyFile(commonFileName + ".key");// 生成keyInfo文件generateKeyInfoFile(dirName, commonFileName + ".key", commonFileName + ".keyinfo");convertMediaToM3u8ByHttp(new FileInputStream(rawFile),commonFileName + ".m3u8",commonFileName + ".keyinfo",commonFileName + "-%d.ts");} catch (Exception e) {e.printStackTrace(System.err);}}/*** 生成keyInfo文件** @param keyFilePath 密鑰文件路徑* @param keyInfoFilePath keyInfo文件路徑*/private static void generateKeyInfoFile(String dirName, String keyFilePath, String keyInfoFilePath) {try {// 生成IVProcessBuilder ivProcessBuilder = new ProcessBuilder("openssl", "rand", "-hex", "16");Process ivProcess = ivProcessBuilder.start();BufferedReader ivReader = new BufferedReader(new InputStreamReader(ivProcess.getInputStream()));String iv = ivReader.readLine();// 寫入keyInfo文件String keyInfoContent ="http://127.0.0.1:8080/tmp/" + dirName + "/" + new File(keyFilePath).getName() + "\n"+ keyFilePath + "\n"+ iv;Files.write(Paths.get(keyInfoFilePath), keyInfoContent.getBytes());System.out.println("keyInfo文件已生成: " + keyInfoFilePath);} catch (IOException e) {e.printStackTrace();}}/*** 生成密鑰文件** @param keyFilePath 密鑰文件路徑*/private static void generateKeyFile(String keyFilePath) {try {ProcessBuilder processBuilder = new ProcessBuilder("openssl", "rand", "16");processBuilder.redirectOutput(new File(keyFilePath));Process process = processBuilder.start();process.waitFor();System.out.println("密鑰文件已生成: " + keyFilePath);} catch (IOException | InterruptedException e) {e.printStackTrace();}}
}
App
@SpringBootApplication
public class App {public static void main(String[] args) {SpringApplication.run(App.class, args);}}
nginx配置
#user nobody;
worker_processes 1;#error_log logs/error.log;
#error_log logs/error.log notice;
#error_log logs/error.log info;#pid logs/nginx.pid;events {worker_connections 1024;
}http {include mime.types;default_type application/octet-stream;server {listen 80;server_name localhost;add_header 'Access-Control-Allow-Origin' $http_origin always;add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS';add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization, X-Requested-With, token';add_header 'Access-Control-Allow-Credentials' 'true';location / {if ($request_method = 'OPTIONS') {return 204;}root D:/Projects/practice/ffmpeg-demo/tmp;}}}
player.html
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body {margin: 0;}.dplayer-container {width: 800px;height: 500px;display: flex;align-items: center;justify-content: center;}#dplayer {width: 100%;height: 100%;object-fit: cover;}</style><script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script><script src="https://cdn.jsdelivr.net/npm/dplayer@1.27.1/dist/DPlayer.min.js"></script>
</head><body><div class="dplayer-container"><div id="dplayer"></div></div><hr /><script>// 另一種方式,使用 customTypeconst dp = new DPlayer({container: document.getElementById('dplayer'),autoplay: false, // 自動播放video: {url: 'http://127.0.0.1/zzhua/zzhua.m3u8',type: 'customHls',customType: {customHls: function (video, player) {const hls = new Hls();hls.loadSource(video.src);hls.attachMedia(video);},},},});Window.dp = dp;</script>
</body></html>
測試
上傳1個301M的視頻,耗時15s,
共188個文件,其中184個ts文件
播放效果