Windows下Rust编码实现MP4点播服务器

mp4-server/

├── Cargo.toml            # 项目依赖配置

├── videos/               # 存放MP4视频文件的目录

├── static/                # 前端静态文件

│   └── index.html             # 交互操控界面

└── src/

    ├── main.rs                # 服务器入口

    ├── handlers.rs             # HTTP请求处理

    └── mp4_utils.rs            # MP4文件处理工具

[package]name = "mp4_server2"version = "0.1.0"edition = "2024"[dependencies]warp = "0.3"                                   # HTTP服务器框架

tokio = { version = "1", features = ["full"] }          # 异步运行时

serde = { version = "1.0", features = ["derive"] }      # 序列化

serde_json = "1.0"                              # JSON处理

mp4 = "0.14.0"                                 # MP4文件处理库

futures = "0.3"                                  # 异步支持

lazy_static = "1.4"regex = "1.11.1"                                # 静态初始化

encoding = "0.2.33"percent-encoding = "2.3.1"tokio-util = "0.7.16"hyper = "0.14.32"                               # 支持GBK/GB18030解码

use mp4::{Mp4Reader, Result}; use std::fs::File;

use std::io::{BufReader, Read, Seek, SeekFrom}; use std::path::Path;

// 获取视频文件元数据

pub fn get_video_metadata(path: &Path) -> Result<(u64, u32, u32)> {

    let file = File::open(path)?;

    let size = file.metadata()?.len();

    let reader = BufReader::new(file);

    let mp4 = Mp4Reader::read_header(reader, size)?;

    let duration = mp4.duration().as_secs();

    let width = mp4.tracks().values().next().map(|t| t.width()).unwrap_or(0);

    let height = mp4.tracks().values().next().map(|t| t.height()).unwrap_or(0);

    Ok((duration, width as u32, height as u32))

}

// 流式传输视频文件

pub fn stream_video_file(path: &Path, start: u64, end: Option<u64>) -> std::io::Result<Vec<u8>> {

    let mut file = File::open(path)?;

    let file_size = file.metadata()?.len();

    // 计算实际读取范围

    let end = end.unwrap_or(file_size); let length = end - start;

    // 定位并读取数据

    file.seek(SeekFrom::Start(start))?;

    let mut buffer = vec![0; length as usize];

    file.read_exact(&mut buffer)?;

    Ok(buffer)

}

src/handlers.rs

use warp::{Rejection, Reply};

use std::path::{PathBuf}; use std::fs; use std::ffi::OsString;

use encoding::{all::GB18030, EncoderTrap, Encoding};

use percent_encoding::{percent_decode, utf8_percent_encode, NON_ALPHANUMERIC};

use serde::Serialize; use tokio_util::io::ReaderStream; use hyper::Body; use crate::mp4_utils;

#[derive(Serialize)]

struct VideoInfo { name: String, duration: u64, width: u32, height: u32, }

// 获取视频列表（兼容中文文件名）

pub async fn list_videos() -> Result<impl Reply, Rejection> {

    let videos_dir = PathBuf::from("./videos"); let mut videos = Vec::new();

    if let Ok(entries) = fs::read_dir(videos_dir) {

        for entry in entries.flatten() {

            let path = entry.path();

            if path.is_file() && path.extension().map_or(false, |ext| ext == "mp4") {

                // 使用OsString原生处理文件名（兼容GBK/UTF-8）

                let os_name: OsString = entry.file_name();

                let name = os_name.to_string_lossy().into_owned(); // 转换为UTF-8字符串

                if let Ok((duration, width, height)) = mp4_utils::get_video_metadata(&path) {

                    videos.push(VideoInfo { name, duration, width, height });

                }

            }

        }

    }

    Ok(warp::reply::json(&videos))

}

// 流式传输视频

pub async fn stream_video(name: String, range: Option<String>) -> Result<impl Reply, Rejection> {

    // 1. URL解码文件名（前端encodeURIComponent的逆操作）

    let decoded_name = percent_decode(name.as_bytes())

        .decode_utf8().map_err(|_| warp::reject::not_found())?

        .into_owned();

    // 2. 将UTF-8转换为GBK（Windows原生编码）

    let _gbk_bytes = GB18030.encode(&decoded_name, EncoderTrap::Strict)

        .map_err(|_| warp::reject::not_found())?;

    // 3. 通过OsString构建路径（关键修复）

    // 使用OsString::from而不是from_vec

    let os_name = OsString::from(decoded_name.clone());

    let path = PathBuf::from("./videos").join(os_name);

    // 4. 解析Range头

    let (start, end) = if let Some(range_header) = range {

        parse_range_header(&range_header, &path)?

    } else {

        (0, None)

    };

    // 5. 异步读取文件

    let file = tokio::fs::File::open(&path).await

        .map_err(|_| warp::reject::not_found())?;

    // 6. 创建流式响应体

    let stream = ReaderStream::new(file); let body = Body::wrap_stream(stream);

    // 7. 获取文件元数据

    let metadata = tokio::fs::metadata(&path).await.map_err(|_| warp::reject::not_found())?;

    let file_size = metadata.len();

    // 8. 构建Content-Range头

    let content_range = if let Some(end) = end {

        let end = end.min(file_size - 1);

        format!("bytes {}-{}/{}", start, end, file_size)

    } else {

        format!("bytes {}-{}/{}", start, file_size - 1, file_size)

    };

    // 9. 设置响应头（解决浏览器中文乱码）

    let safe_name = utf8_percent_encode(&decoded_name, NON_ALPHANUMERIC).to_string();

    let content_disposition = format!(

        "attachment; filename=\"{}\"; filename*=utf-8''{}", safe_name, safe_name );

    // 10. 构建响应，使用warp::reply::Response包装Body

    let mut response = warp::reply::Response::new(body);

    let headers = response.headers_mut();

    headers.insert("Content-Type", "video/mp4".parse().unwrap());

    headers.insert("Content-Range", content_range.parse().unwrap());

    headers.insert("Content-Disposition", content_disposition.parse().unwrap());

    Ok(response)

}

// 解析Range头

fn parse_range_header(range: &str, path: &PathBuf) -> Result<(u64, Option<u64>), Rejection> {

    let file_size = fs::metadata(path).map_err(|_| warp::reject::not_found())?.len();

    if let Some(captures) = regex::Regex::new(r"bytes=(\d+)-(\d*)").unwrap()captures(range) {

        let start = captures.get(1).unwrap().as_str().parse::<u64>()

            .map_err(|_| warp::reject::not_found())?;

        let end = captures.get(2).unwrap().as_str();

        let end = if end.is_empty() {

            None

        } else {

            Some(end.parse::<u64>().map_err(|_| warp::reject::not_found())?.min(file_size - 1))

        };

        return Ok((start, end));

    }

    Err(warp::reject::not_found())

}

// 辅助函数：URL编码转换（供前端使用）

pub fn encode_filename(name: &str) -> String {

    utf8_percent_encode(name, NON_ALPHANUMERIC).to_string()

}

mod handlers; mod mp4_utils;

use warp::Filter; use handlers::{list_videos, stream_video};

#[tokio::main]

async fn main() {

    // 创建路由

    let list_route = warp::path!("api" / "videos").and(warp::get()).and_then(list_videos);

    let stream_route = warp::path!("api" / "videos" / String)

        .and(warp::get()).and(warp::header::optional("Range")).and_then(stream_video);

    let static_files = warp::path("static").and(warp::fs::dir("./static"));

    let index = warp::path::end().and(warp::fs::file("./static/index.html"));

    // 组合所有路由

    let routes = list_route.or(stream_route).or(static_files).or(index)

        .with(warp::cors().allow_any_origin());

    // 启动服务器

    println!("Server started at http://localhost:9700");

    warp::serve(routes).run(([0, 0, 0, 0], 9700)).await;

}

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>MP4视频服务器</title>

  <style>

    :root { --primary-color: #3498db; --secondary-color: #2980b9;

      --background-color: #f5f7fa; --card-bg: #ffffff; --text-color: #333333;

      --border-color: #e0e0e0; --success-color: #2ecc71; --hover-color: #f1f9ff; }

    * { margin: 0; padding: 0; box-sizing: border-box;

      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }

    body { background-color: var(--background-color);

      color: var(--text-color); line-height: 1.6; padding: 2px; }

    .container { max-width: 1200px; margin: 0 auto; display: grid;

      grid-template-columns: 1fr 2fr; gap: 10px; }

    @media (max-width: 768px) { .container { grid-template-columns: 1fr; } }

    header { grid-column: 1 / -1; text-align: center; margin-bottom: 2px;

      padding: 20px 0; border-bottom: 1px solid var(--border-color); }

    h1 { color: var(--primary-color); font-size: 2.5rem; margin-bottom: 1px; }

    .card { background: var(--card-bg); border-radius: 10px; padding: 25px;

      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease; }

    .card:hover { transform: translateY(-5px); }

    .video-list-container { height: 100%; display: flex; flex-direction: column; }

    .video-list-header { display: flex; justify-content: space-between;

      align-items: center; margin-bottom: 15px; padding-bottom: 10px;

      border-bottom: 1px solid var(--border-color); }

    .video-list-header h2 { font-size: 1.5rem; color: var(--primary-color); }

    .video-count { background: var(--primary-color); color: white;

      border-radius: 20px; padding: 2px 10px; font-size: 0.9rem; }

    #videoList { list-style: none; max-height: 500px; overflow-y: auto;

      flex-grow: 1; border: 1px solid var(--border-color);

      border-radius: 8px; padding: 5px; }

    #videoList::-webkit-scrollbar { width: 8px; }

    #videoList::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 4px; }

    #videoList::-webkit-scrollbar-thumb { background: var(--primary-color); border-radius: 4px; }

    #videoList li { padding: 12px 15px; border-bottom: 1px solid var(--border-color);

      cursor: pointer; transition: background-color 0.2s; display: flex;

      justify-content: space-between; align-items: center; }

    #videoList li:last-child { border-bottom: none; }

    #videoList li:hover { background-color: var(--hover-color); }

    #videoList li.active { background-color: var(--primary-color); color: white; }

    .video-duration { background: var(--secondary-color); color: white;

      border-radius: 4px; padding: 2px 8px; font-size: 0.85rem; }

    .player-container { display: flex; flex-direction: column; gap: 20px; }

    .video-player-wrapper { position: relative; padding-bottom: 56.25%; /* 16:9 aspect ratio */

      height: 0; overflow: hidden; border-radius: 8px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); }

    #videoPlayer { position: absolute; top: 0; left: 0; width: 100%; height: 100%;background: #000; }

    .controls { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; background:var(--card-bg);

      padding: 15px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); }

    .btn { background: var(--primary-color); color: white; border: none; padding: 10px 15px;

      border-radius: 5px; cursor: pointer; transition: background 0.3s;

      font-weight: 600; display: flex; align-items: center; gap: 5px; }

    .btn:hover { background: var(--secondary-color); }

    .btn i { font-size: 1.2rem; }

    .seek-container { flex-grow: 1; display: flex; align-items: center; gap: 10px;

    #seekBar { flex-grow: 1; height: 8px; -webkit-appearance: none;

      background: #e0e0e0; border-radius: 4px; outline: none; }

    #seekBar::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px;

      background: var(--primary-color); border-radius: 50%; cursor: pointer; }

    .time-display { font-size: 0.9rem; color: #666; min-width: 80px; text-align: center; }

    .search-container { margin-top: 15px; position: relative; }

    #searchInput { width: 100%; padding: 10px 15px 10px 40px;

      border: 1px solid var(--border-color); border-radius: 5px; font-size: 1rem; }

    .search-icon { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: #777; }

    .empty-state { text-align: center; padding: 30px; color: #777; }

    .empty-state i { font-size: 3rem; margin-bottom: 15px; color: #ddd; }

    .video-info { display: flex; justify-content: space-between;

      font-size: 0.9rem; color: #666; margin-top: 5px; }

  </style>

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

</head>

<body>

<div class="container">

  <header>

    <h1><i class="fas fa-play-circle"></i>MP4视频服务器</h1>

    <p>流式传输管理MP4视频流，恺肇乾，2025-08-06</p>

  </header>

  <div class="video-list-container card">

    <div class="video-list-header">

      <h2>有效视频数</h2>

      <span class="video-count">12 videos</span>

    </div>

    <div class="search-container">

      <i class="fas fa-search search-icon"></i>

      <input type="text" id="searchInput" placeholder="搜索视频...">

    </div>

    <ul id="videoList">

      <!-- Videos will be populated by JavaScript -->

      <li>

        <span>Introduction to Rust Programming</span>

        <span class="video-duration">10:24</span>

      </li>

      <li class="active">

        <span>Building Web Servers with Rust</span>

        <span class="video-duration">15:42</span>

      </li>

      <li>

        <span>Concurrency in Rust Explained</span>

        <span class="video-duration">22:18</span>

      </li>

      <li>

        <span>Rust vs C++ Performance Comparison</span>

        <span class="video-duration">18:05</span>

      </li>

      <li>

        <span>Memory Management in Rust</span>

        <span class="video-duration">12:37</span>

      </li>

      <li>

        <span>Creating CLI Tools with Rust</span>

        <span class="video-duration">14:56</span>

      </li>

      <li>

        <span>WebAssembly with Rust Tutorial</span>

        <span class="video-duration">25:12</span>

      </li>

      <li>

        <span>Async Programming in Rust</span>

        <span class="video-duration">20:45</span>

      </li>

      <li>

        <span>Rust for Embedded Systems</span>

        <span class="video-duration">16:33</span>

      </li>

      <li>

        <span>Testing Strategies in Rust</span>

        <span class="video-duration">11:29</span>

      </li>

      <li>

        <span>Building REST APIs with Actix</span>

        <span class="video-duration">19:17</span>

      </li>

      <li>

        <span>Rust Macros Deep Dive</span>

        <span class="video-duration">17:48</span>

      </li>

    </ul>

  </div>

  <div class="player-container">

    <div class="card">

      <div class="video-player-wrapper">

        <video id="videoPlayer" controls poster="https://picsum.photos/800/450?random">

          <source src="" type="video/mp4">Your browser does not support the video tag.

        </video>

      </div>

    </div>

    <div class="controls card">

      <button id="playBtn" class="btn"><i class="fas fa-play"></i>播放</button>

      <button id="pauseBtn" class="btn"><i class="fas fa-pause"></i>暂停</button>

      <div class="seek-container">

        <span class="time-display" id="currentTime">0:00</span>

        <input type="range" id="seekBar" min="0" max="100" value="0">

        <span class="time-display" id="duration">0:00</span>

      </div>

      <button id="fullscreenBtn" class="btn"><i class="fas fa-expand"></i></button>

    </div>

    <div class="card">

      <h3>现在正在播放: <span id="nowPlaying">Building Web Servers with Rust</span></h3>

      <div class="video-info">

        <span>时长: <span id="videoDuration">15:42</span></span>

        <span>分辩率: 1080p</span>

        <span>大小: 未定 MB</span>

      </div>

    </div>

  </div>

</div>

</body>

<script>

  // 获取视频列表

  async function loadVideos() {

    try {

      const response = await fetch('/api/videos');

      const videos = await response.json();

      const listElement = document.getElementById('videoList');

      const videoCount = document.querySelector('.video-count');

      // 清空列表（除了示例项）

      listElement.innerHTML = '';

      if (videos.length === 0) {

        listElement.innerHTML = `

            <div class="empty-state">

              <i class="fas fa-film"></i>

              <p>No videos found</p>

              <p>Upload videos to the server to get started</p>

            </div>

          `;

        videoCount.textContent = '0 个';

        return;

      }

      videoCount.textContent = `${videos.length} ${videos.length === 1 ? '个' : '个'}`;

      videos.forEach(video => {

        const li = document.createElement('li');

        // 格式化时间为 MM:SS

        const minutes = Math.floor(video.duration / 60);

        const seconds = video.duration % 60;

        const formattedTime = `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;

        li.innerHTML = `

            <span>${video.name}</span>

            <span class="video-duration">${formattedTime}</span>

          `;

        li.onclick = () => {

          // 移除所有active类

          document.querySelectorAll('#videoList li').forEach(item => {

            item.classList.remove('active');

          });

          // 添加active类到当前项

          li.classList.add('active');

          playVideo(video.name);

        };

        listElement.appendChild(li);

      });

      // 默认选择第一个视频

      if (videos.length > 0) {

        listElement.firstChild.classList.add('active');

        playVideo(videos[0].name);

      }

    } catch (error) {

      console.error('Error loading videos:', error);

      const listElement = document.getElementById('videoList');

      listElement.innerHTML = `

          <div class="empty-state">

            <i class="fas fa-exclamation-triangle"></i>

            <p>Failed to load videos</p>

            <p>Please check your connection</p>

          </div>

        `;

    }

  }

  // 播放视频

  function playVideo(name) {

    const player = document.getElementById('videoPlayer');

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

    const encodedName = encodeURIComponent(name);

    nowPlaying.textContent = name;

    player.src = `/api/videos/${encodedName}`;

    player.load();

    // 更新视频信息

    updateVideoInfo(name);

  }

  // 更新视频信息（模拟）

  function updateVideoInfo(name) {

    const durationElement = document.getElementById('videoDuration');

    const videoItems = document.querySelectorAll('#videoList li');

    // 在实际应用中，这里会从API获取详细信息

    // 这里只是模拟从列表项中获取时长

    videoItems.forEach(item => {

      if (item.textContent.includes(name)) {

        const durationSpan = item.querySelector('.video-duration');

        if (durationSpan) {

          durationElement.textContent = durationSpan.textContent;

        }

      }

    });

  }

  // 搜索功能

  function setupSearch() {

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

    searchInput.addEventListener('input', function() {

      const searchTerm = this.value.toLowerCase();

      const videoItems = document.querySelectorAll('#videoList li');

      videoItems.forEach(item => {

        const videoName = item.querySelector('span:first-child').textContent.toLowerCase();

        if (videoName.includes(searchTerm)) {

          item.style.display = 'flex';

        } else {

          item.style.display = 'none';

        }

      });

    });

  }

  // 播放控制

  function setupPlayerControls() {

    const player = document.getElementById('videoPlayer');

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

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

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

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

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

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

    playBtn.addEventListener('click', () => {

      player.play();

    });

    pauseBtn.addEventListener('click', () => {

      player.pause();

    });

    // 更新进度条和时间显示

    player.addEventListener('timeupdate', () => {

      const value = (player.currentTime / player.duration) * 100;

      seekBar.value = isNaN(value) ? 0 : value;

      // 更新时间显示

      currentTime.textContent = formatTime(player.currentTime);

    });

    // 视频加载后更新总时长

    player.addEventListener('loadedmetadata', () => {

      duration.textContent = formatTime(player.duration);

    });

    seekBar.addEventListener('input', () => {

      const time = player.duration * (seekBar.value / 100);

      player.currentTime = time;

    });

    // 全屏功能

    fullscreenBtn.addEventListener('click', () => {

      if (player.requestFullscreen) {

        player.requestFullscreen();

      } else if (player.mozRequestFullScreen) {

        player.mozRequestFullScreen();

      } else if (player.webkitRequestFullscreen) {

        player.webkitRequestFullscreen();

      } else if (player.msRequestFullscreen) {

        player.msRequestFullscreen();

      }

    });

  }

  // 格式化时间为 MM:SS

  function formatTime(seconds) {

    const minutes = Math.floor(seconds / 60);

    const secs = Math.floor(seconds % 60);

    return `${minutes}:${secs < 10 ? '0' : ''}${secs}`;

  }

  // 初始化

  window.onload = function() {

    loadVideos();

    setupPlayerControls();

    setupSearch();

  };

</script>

</html>

    warp::serve(routes).run(([0, 0, 0, 0], 9700)).await;