SpringBoot - FFmpeg 實現一個簡單的 M3U8 切片轉碼系統

作者:SpringBoot 中文社區
鏈接:https://www.jianshu.com/p/c801346c0753

使用大名鼎鼎的 ffmpeg,把視頻文件切片成 m3u8,並且通過 springboot,可以實現在線的點播。

客戶端上傳視頻到服務器,服務器對視頻進行切片後,返回 m3u8,封面等訪問路徑。可以在線的播放。
服務器可以對視頻做一些簡單的處理,例如裁剪,封面的截取時間。

視頻轉碼文件夾的定義

喜羊羊與灰太狼  // 文件夾名稱就是視頻標題
  |-index.m3u8  // 主m3u8文件,裏面可以配置多個碼率的播放地址
  |-poster.jpg  // 截取的封面圖片
  |-ts      // 切片目錄
    |-index.m3u8  // 切片播放索引
    |-key   // 播放需要解密的AES KEY

實現

需要先在本機安裝 FFmpeg,並且添加到 PATH 環境變量,如果不會先通過搜索引擎找找資料

工程

image

pom

<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 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <groupId>com.demo</groupId>
    <artifactId>demo</artifactId>
    <version>0.0.1-SNAPSHOT</version>

    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.4.5</version>
        <relativePath /> <!-- lookup parent from repository -->
    </parent>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>org.junit.vintage</groupId>
            <artifactId>junit-vintage-engine</artifactId>
            <scope>test</scope>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
            <exclusions>
                <exclusion>
                    <groupId>org.springframework.boot</groupId>
                    <artifactId>spring-boot-starter-tomcat</artifactId>
                </exclusion>
            </exclusions>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-undertow</artifactId>
        </dependency>
        <dependency>
            <groupId>commons-codec</groupId>
            <artifactId>commons-codec</artifactId>
        </dependency>
        <dependency>
            <groupId>com.google.code.gson</groupId>
            <artifactId>gson</artifactId>
        </dependency>

    </dependencies>

    <build>
        <finalName>${project.artifactId}</finalName>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <configuration>
                    <executable>true</executable>
                </configuration>
            </plugin>
        </plugins>
    </build>
</project>

配置文件

server:
  port: 80

app:
  # 存儲轉碼視頻的文件夾地址
  video-folder: "C:\\Users\\Administrator\\Desktop\\tmp"

spring:
  servlet:
    multipart:
      enabled: true
      # 不限制文件大小
      max-file-size: -1
      # 不限制請求體大小
      max-request-size: -1
      # 臨時IO目錄
      location: "${java.io.tmpdir}"
      # 不延遲解析
      resolve-lazily: false
      # 超過1Mb,就IO到臨時目錄
      file-size-threshold: 1MB
  web:
    resources:
      static-locations:
        - "classpath:/static/"
        - "file:${app.video-folder}" # 把視頻文件夾目錄,添加到靜態資源目錄列表

TranscodeConfig,用於控制轉碼的一些參數

package com.demo.ffmpeg;

public class TranscodeConfig {
    private String poster;              // 截取封面的時間          HH:mm:ss.[SSS]
    private String tsSeconds;           // ts分片大小,單位是秒
    private String cutStart;            // 視頻裁剪,開始時間        HH:mm:ss.[SSS]
    private String cutEnd;              // 視頻裁剪,結束時間        HH:mm:ss.[SSS]
    public String getPoster() {
        return poster;
    }

    public void setPoster(String poster) {
        this.poster = poster;
    }

    public String getTsSeconds() {
        return tsSeconds;
    }

    public void setTsSeconds(String tsSeconds) {
        this.tsSeconds = tsSeconds;
    }

    public String getCutStart() {
        return cutStart;
    }

    public void setCutStart(String cutStart) {
        this.cutStart = cutStart;
    }

    public String getCutEnd() {
        return cutEnd;
    }

    public void setCutEnd(String cutEnd) {
        this.cutEnd = cutEnd;
    }

    @Override
    public String toString() {
        return "TranscodeConfig [poster=" + poster + ", tsSeconds=" + tsSeconds + ", cutStart=" + cutStart + ", cutEnd="
                + cutEnd + "]";
    }
}

MediaInfo,封裝視頻的一些基礎信息

package com.demo.ffmpeg;

import java.util.List;

import com.google.gson.annotations.SerializedName;

public class MediaInfo {
    public static class Format {
        @SerializedName("bit_rate")
        private String bitRate;
        public String getBitRate() {
            return bitRate;
        }
        public void setBitRate(String bitRate) {
            this.bitRate = bitRate;
        }
    }

    public static class Stream {
        @SerializedName("index")
        private int index;

        @SerializedName("codec_name")
        private String codecName;

        @SerializedName("codec_long_name")
        private String codecLongame;

        @SerializedName("profile")
        private String profile;
    }

    // ----------------------------------

    @SerializedName("streams")
    private List<Stream> streams;

    @SerializedName("format")
    private Format format;

    public List<Stream> getStreams() {
        return streams;
    }

    public void setStreams(List<Stream> streams) {
        this.streams = streams;
    }

    public Format getFormat() {
        return format;
    }

    public void setFormat(Format format) {
        this.format = format;
    }
}

FFmpegUtils,工具類封裝 FFmpeg 的一些操作

package com.demo.ffmpeg;

import java.io.BufferedReader;
import java.io.File;
import java.io.IOException;
import java.io.InputStreamReader;
import java.nio.charset.StandardCharsets;
import java.nio.file.Files;
import java.nio.file.Path;
import java.nio.file.Paths;
import java.nio.file.StandardOpenOption;
import java.security.NoSuchAlgorithmException;
import java.util.ArrayList;
import java.util.List;

import javax.crypto.KeyGenerator;

import org.apache.commons.codec.binary.Hex;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.util.StringUtils;

import com.google.gson.Gson;

public class FFmpegUtils {

    private static final Logger LOGGER = LoggerFactory.getLogger(FFmpegUtils.class);

    // 跨平臺換行符
    private static final String LINE_SEPARATOR = System.getProperty("line.separator");

    /**
     * 生成隨機16個字節的AESKEY
     * @return
     */
    private static byte[] genAesKey ()  {
        try {
            KeyGenerator keyGenerator = KeyGenerator.getInstance("AES");
            keyGenerator.init(128);
            return keyGenerator.generateKey().getEncoded();
        } catch (NoSuchAlgorithmException e) {
            return null;
        }
    }

    /**
     * 在指定的目錄下生成key_info, key文件,返回key_info文件
     * @param folder
     * @throws IOException 
     */
    private static Path genKeyInfo(String folder) throws IOException {
        // AES 密鑰
        byte[] aesKey = genAesKey();
        // AES 向量
        String iv = Hex.encodeHexString(genAesKey());

        // key 文件寫入
        Path keyFile = Paths.get(folder, "key");
        Files.write(keyFile, aesKey, StandardOpenOption.CREATE, StandardOpenOption.TRUNCATE_EXISTING);

        // key_info 文件寫入
        StringBuilder stringBuilder = new StringBuilder();
        stringBuilder.append("key").append(LINE_SEPARATOR);                 // m3u8加載key文件網絡路徑
        stringBuilder.append(keyFile.toString()).append(LINE_SEPARATOR);    // FFmeg加載key_info文件路徑
        stringBuilder.append(iv);                                           // ASE 向量

        Path keyInfo = Paths.get(folder, "key_info");

        Files.write(keyInfo, stringBuilder.toString().getBytes(), StandardOpenOption.CREATE, StandardOpenOption.TRUNCATE_EXISTING);

        return keyInfo;
    }

    /**
     * 指定的目錄下生成 master index.m3u8 文件
     * @param fileName          master m3u8文件地址
     * @param indexPath         訪問子index.m3u8的路徑
     * @param bandWidth         流碼率
     * @throws IOException
     */
    private static void genIndex(String file, String indexPath, String bandWidth) throws IOException {
        StringBuilder stringBuilder = new StringBuilder();
        stringBuilder.append("#EXTM3U").append(LINE_SEPARATOR);
        stringBuilder.append("#EXT-X-STREAM-INF:BANDWIDTH=" + bandWidth).append(LINE_SEPARATOR);  // 碼率
        stringBuilder.append(indexPath);
        Files.write(Paths.get(file), stringBuilder.toString().getBytes(StandardCharsets.UTF_8), StandardOpenOption.CREATE, StandardOpenOption.TRUNCATE_EXISTING);
    }

    /**
     * 轉碼視頻爲m3u8
     * @param source                源視頻
     * @param destFolder            目標文件夾
     * @param config                配置信息
     * @throws IOException 
     * @throws InterruptedException 
     */
    public static void transcodeToM3u8(String source, String destFolder, TranscodeConfig config) throws IOException, InterruptedException {

        // 判斷源視頻是否存在
        if (!Files.exists(Paths.get(source))) {
            throw new IllegalArgumentException("文件不存在:" + source);
        }

        // 創建工作目錄
        Path workDir = Paths.get(destFolder, "ts");
        Files.createDirectories(workDir);

        // 在工作目錄生成KeyInfo文件
        Path keyInfo = genKeyInfo(workDir.toString());

        // 構建命令
        List<String> commands = new ArrayList<>();
        commands.add("ffmpeg");         
        commands.add("-i")                      ;commands.add(source);                  // 源文件
        commands.add("-c:v")                    ;commands.add("libx264");               // 視頻編碼爲H264
        commands.add("-c:a")                    ;commands.add("copy");                  // 音頻直接copy
        commands.add("-hls_key_info_file")      ;commands.add(keyInfo.toString());      // 指定密鑰文件路徑
        commands.add("-hls_time")               ;commands.add(config.getTsSeconds());   // ts切片大小
        commands.add("-hls_playlist_type")      ;commands.add("vod");                   // 點播模式
        commands.add("-hls_segment_filename")   ;commands.add("%06d.ts");               // ts切片文件名稱

        if (StringUtils.hasText(config.getCutStart())) {
            commands.add("-ss")                 ;commands.add(config.getCutStart());    // 開始時間
        }
        if (StringUtils.hasText(config.getCutEnd())) {
            commands.add("-to")                 ;commands.add(config.getCutEnd());      // 結束時間
        }
        commands.add("index.m3u8");                                                     // 生成m3u8文件

        // 構建進程
        Process process = new ProcessBuilder()
            .command(commands)
            .directory(workDir.toFile())
            .start()
            ;

        // 讀取進程標準輸出
        new Thread(() -> {
            try (BufferedReader bufferedReader = new BufferedReader(new InputStreamReader(process.getInputStream()))) {
                String line = null;
                while ((line = bufferedReader.readLine()) != null) {
                    LOGGER.info(line);
                }
            } catch (IOException e) {
            }
        }).start();

        // 讀取進程異常輸出
        new Thread(() -> {
            try (BufferedReader bufferedReader = new BufferedReader(new InputStreamReader(process.getErrorStream()))) {
                String line = null;
                while ((line = bufferedReader.readLine()) != null) {
                    LOGGER.info(line);
                }
            } catch (IOException e) {
            }
        }).start();

        // 阻塞直到任務結束
        if (process.waitFor() != 0) {
            throw new RuntimeException("視頻切片異常");
        }

        // 切出封面
        if (!screenShots(source, String.join(File.separator, destFolder, "poster.jpg"), config.getPoster())) {
            throw new RuntimeException("封面截取異常");
        }

        // 獲取視頻信息
        MediaInfo mediaInfo = getMediaInfo(source);
        if (mediaInfo == null) {
            throw new RuntimeException("獲取媒體信息異常");
        }

        // 生成index.m3u8文件
        genIndex(String.join(File.separator, destFolder, "index.m3u8")"ts/index.m3u8", mediaInfo.getFormat().getBitRate());

        // 刪除keyInfo文件
        Files.delete(keyInfo);
    }

    /**
     * 獲取視頻文件的媒體信息
     * @param source
     * @return
     * @throws IOException
     * @throws InterruptedException
     */
    public static MediaInfo getMediaInfo(String source) throws IOException, InterruptedException {
        List<String> commands = new ArrayList<>();
        commands.add("ffprobe");    
        commands.add("-i")              ;commands.add(source);
        commands.add("-show_format");
        commands.add("-show_streams");
        commands.add("-print_format")   ;commands.add("json");

        Process process = new ProcessBuilder(commands)
                .start();

        MediaInfo mediaInfo = null;

        try (BufferedReader bufferedReader = new BufferedReader(new InputStreamReader(process.getInputStream()))) {
            mediaInfo = new Gson().fromJson(bufferedReader, MediaInfo.class);
        } catch (IOException e) {
            e.printStackTrace();
        }

        if (process.waitFor() != 0) {
            return null;
        }

        return mediaInfo;
    }

    /**
     * 截取視頻的指定時間幀,生成圖片文件
     * @param source        源文件
     * @param file          圖片文件
     * @param time          截圖時間 HH:mm:ss.[SSS]     
     * @throws IOException 
     * @throws InterruptedException 
     */
    public static boolean screenShots(String source, String file, String time) throws IOException, InterruptedException {

        List<String> commands = new ArrayList<>();
        commands.add("ffmpeg"); 
        commands.add("-i")              ;commands.add(source);
        commands.add("-ss")             ;commands.add(time);
        commands.add("-y");
        commands.add("-q:v")            ;commands.add("1");
        commands.add("-frames:v")       ;commands.add("1");
        commands.add("-f");             ;commands.add("image2");
        commands.add(file);

        Process process = new ProcessBuilder(commands)
                    .start();

        // 讀取進程標準輸出
        new Thread(() -> {
            try (BufferedReader bufferedReader = new BufferedReader(new InputStreamReader(process.getInputStream()))) {
                String line = null;
                while ((line = bufferedReader.readLine()) != null) {
                    LOGGER.info(line);
                }
            } catch (IOException e) {
            }
        }).start();

        // 讀取進程異常輸出
        new Thread(() -> {
            try (BufferedReader bufferedReader = new BufferedReader(new InputStreamReader(process.getErrorStream()))) {
                String line = null;
                while ((line = bufferedReader.readLine()) != null) {
                    LOGGER.error(line);
                }
            } catch (IOException e) {
            }
        }).start();

        return process.waitFor() == 0;
    }
}

UploadController,執行轉碼操作

package com.demo.web.controller;

import java.io.IOException;
import java.nio.file.Files;
import java.nio.file.Path;
import java.nio.file.Paths;
import java.time.LocalDate;
import java.time.format.DateTimeFormatter;
import java.util.HashMap;
import java.util.Map;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestPart;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

import com.demo.ffmpeg.FFmpegUtils;
import com.demo.ffmpeg.TranscodeConfig;

@RestController
@RequestMapping("/upload")
public class UploadController {

    private static final Logger LOGGER = LoggerFactory.getLogger(UploadController.class);

    @Value("${app.video-folder}")
    private String videoFolder;

    private Path tempDir = Paths.get(System.getProperty("java.io.tmpdir"));

    /**
     * 上傳視頻進行切片處理,返回訪問路徑
     * @param video
     * @param transcodeConfig
     * @return
     * @throws IOException 
     */
    @PostMapping
    public Object upload (@RequestPart(name = "file"required = true) MultipartFile video,
                        @RequestPart(name = "config"required = true) TranscodeConfig transcodeConfig) throws IOException {

        LOGGER.info("文件信息:title={}, size={}", video.getOriginalFilename(), video.getSize());
        LOGGER.info("轉碼配置:{}", transcodeConfig);

        // 原始文件名稱,也就是視頻的標題
        String title = video.getOriginalFilename();

        // io到臨時文件
        Path tempFile = tempDir.resolve(title);
        LOGGER.info("io到臨時文件:{}", tempFile.toString());

        try {

            video.transferTo(tempFile);

            // 刪除後綴
            title = title.substring(0, title.lastIndexOf("."));

            // 按照日期生成子目錄
            String today = DateTimeFormatter.ofPattern("yyyyMMdd").format(LocalDate.now());

            // 嘗試創建視頻目錄
            Path targetFolder = Files.createDirectories(Paths.get(videoFolder, today, title));

            LOGGER.info("創建文件夾目錄:{}", targetFolder);
            Files.createDirectories(targetFolder);

            // 執行轉碼操作
            LOGGER.info("開始轉碼");
            try {
                FFmpegUtils.transcodeToM3u8(tempFile.toString(), targetFolder.toString(), transcodeConfig);
            } catch (Exception e) {
                LOGGER.error("轉碼異常:{}", e.getMessage());
                Map<String, Object> result = new HashMap<>();
                result.put("success"false);
                result.put("message", e.getMessage());
                return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body(result);
            }

            // 封裝結果
            Map<String, Object> videoInfo = new HashMap<>();
            videoInfo.put("title", title);
            videoInfo.put("m3u8", String.join("/""", today, title, "index.m3u8"));
            videoInfo.put("poster", String.join("/""", today, title, "poster.jpg"));

            Map<String, Object> result = new HashMap<>();
            result.put("success"true);
            result.put("data", videoInfo);
            return result;
        } finally {
            // 始終刪除臨時文件
            Files.delete(tempFile);
        }
    }
}

index.html,客戶端

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="https://cdn.jsdelivr.net/hls.js/latest/hls.min.js"></script>
    </head>
    <body>
        選擇轉碼文件: <input >
        <hr/>
        <video id="video"  width="500" height="400" controls="controls"></video>
    </body>
    <script>

        const video = document.getElementById('video');

        function upload (e){
            let files = e.target.files
            if (!files) {
                return
            }

            // TODO 轉碼配置這裏固定死了
            var transCodeConfig = {
                poster: "00:00:00.001", // 截取第1毫秒作爲封面
                tsSeconds: 15,              
                cutStart: "",
                cutEnd: ""
            }

            // 執行上傳
            let formData = new FormData();
            formData.append("file", files[0])
            formData.append("config", new Blob([JSON.stringify(transCodeConfig)]{type: "application/json; charset=utf-8"}))

            fetch('/upload'{
                method: 'POST',
                body: formData
            })
            .then(resp =>  resp.json())
            .then(message ={
                if (message.success){
                    // 設置封面
                    video.poster = message.data.poster;

                    // 渲染到播放器
                    var hls = new Hls();
                    hls.loadSource(message.data.m3u8);
                    hls.attachMedia(video);
                } else {
                    alert("轉碼異常,詳情查看控制檯");
                    console.log(message.message);
                }
            })
            .catch(err ={
                alert("轉碼異常,詳情查看控制檯");
                throw err
            })
        }
    </script>
</html>

使用

  1. 在配置文件中,配置到本地視頻目錄後啓動

  2. 打開頁面 localhost

  3. 點擊【選擇文件】,選擇一個視頻文件進行上傳,等待執行完畢(沒有做加載動畫)

  4. 後端轉碼完成後,會自動把視頻信息加載到播放器,此時可以手動點擊播放按鈕進行播放

可以打開控制檯,查看上傳進度,以及播放時的網絡加載信息

源碼

https://github.com/KevinBlandy/springboot-ffmpeg-demo

本文由 Readfog 進行 AMP 轉碼,版權歸原作者所有。
來源https://mp.weixin.qq.com/s/KLT9lIfyBteGkFqBL1XMDg