vue播放rtsp流方案

前言
如果rtsp没有H265的，建议直接使用webrtc-stream，简单好用，参考我之前的笔记：基于WebRtc的web播放大华海康rtsp视频流（延迟一秒以内） - Stitchhhhh - 博客园
项目地址：https://github.com/mpromonet/webrtc-streamer/releases
使用方法参考（感谢博主）：https://blog.csdn.net/qq_20937557/article/details/129879697

如果有H265的视频流，可用以下几种方式实现：

一、rtsp2web+ffmpeg

参考：rtsp2web https://blog.csdn.net/csdn_yudong/article/details/124124137
优点：使用方法简单，传入rtsp视频流，直接播放；支持H265；前端使用jsmpeg.js延迟低；能使用H5直接播放；
个人使用认为的不足之处：

前端使用jsmpeg.js时，延迟很低，没有卡顿花屏，但是没有全屏功能，不过使用js实现一下也很简单；
使用flv.js时，延迟较大，卡顿比较严重，没有找到合适的办法解决；
在windows中部署没有问题，但是我在ubuntu18（其它linux的没有试）中没有部署成功，试过了安装ffmpeg从3、4、5、6各种版本的各种安装方式，使用ffmpeg命令都能正常处理视频流，但是在rtsp2web都没能成功；因为没有日志，没有办法找到问题和解决问题，虽然付费作者也没有给解决办法；
作者在视频加了水印，需找作者付费去除水印，知识付费也能理解，但是遇到的问题作者都没有给出解决办法，加上没有日志的处理，有问题时难以解决；

二、node-rtsp-stream+ffmpeg

前端也是使用jsmpeg.js，跟rtsp2web类似，也使用websocket；使用vue的可以使用此方法。

三、重点推荐：mediamtx（原rtsp-simple-server）

项目地址：https://github.com/bluenviron/mediamtx/tree/main
参考（感谢博主）：https://blog.csdn.net/qq_20937557/article/details/132271507?spm=1001.2014.3001.5501

先说优点：

不管是在windows还是linux，安装和使用都极其简单；
作者写的文档比较详细，使用过程中遇到的问题很少，不需要去参考其他文档；
在github上进行提问以及bug提交作者都能回复并及时修复bug，非常赞；
支持rtsp、rtmp、hsl；并且延迟处理的比较好；
集成webrtc可直接播放视频；
可进行视频访问加密处理；

1.安装ffmpeg
这个比较简单，网上教程也比较多，此处不做介绍。
ubuntu18.04上安装ffmpeg5.1可以参考：ubuntu18安装ffmpeg5 https://blog.csdn.net/haixiangyun/article/details/132583757

2.下载运行mediamtx_v1.0.0
下载地址：mediamtx下载地址

不管是windows还是linux，都是有三个文件

运行方式：

windows直接双击mediamtx.exe；
linux下在当前目录直接运行sudo ./mediamtx

mediamtx.yml文件的配置：配置成功后使用webrtc可以直接在网页中浏览视频
具体配置根据需求查询，下面内容主要讲webrtc的方式，hls方式延迟比较严重

工作原理

RTSP 源 → mediamtx (WebRTC 转码) → WHEP/WHIP 协议 → 前端 WebRTC 播放

前端安装webrtc-player.js

<script setup lang="ts">
import { onMounted, onUnmounted, ref, nextTick } from "vue";
import { WebRTCPlayer } from "@eyevinn/webrtc-player";

const count = ref(0);
let player: WebRTCPlayer | null = null;
let retryTimer: any = null;
const loading = ref(true); // 控制加载中提示的状态

const initVideo = async () => {
  const video = document.querySelector("video") as HTMLVideoElement;
  if (!video) return;

  video.muted = true;

  // 如果之前存在 player，销毁它，确保不复用旧连接
  if (player) {
    player.destroy();
    player = null;
  }

  player = new WebRTCPlayer({
    video,
    type: "whep",
    statsTypeFilter: "^candidate-*|^inbound-rtp",
  });

  player.on("connectionstatechange", (state: any) => {
    console.log("Connection:", state);
    if (state === "failed" || state === "disconnected") {
      clearTimeout(retryTimer);
      retryTimer = setTimeout(initVideo, 2000);
    }
  });

  try {
    // 设置加载提示
    loading.value = true;

    // 防止缓存问题，确保请求不被缓存
    const videoUrl = new URL("http://192.168.137.131:8889/cam_h264/whep");
    videoUrl.searchParams.set('nocache', Date.now().toString());  // 添加唯一参数防止缓存

    // 加载视频流
    await player.load(videoUrl);
    player.unmute();
    await video.play();

    // 视频播放成功，隐藏加载提示
    loading.value = false;
  } catch (err) {
    console.warn("Playback failed:", err);
    loading.value = false;
  }
};

onMounted(() => {
  nextTick(() => setTimeout(initVideo, 200));
  setInterval(() => count.value++, 1000);
});

onUnmounted(() => {
  clearTimeout(retryTimer);
  if (player) {
    player.destroy();  // 确保销毁 WebRTC 连接
    player = null;
  }
});
</script>

<template>
  <div class="app-container">
    <div>
      <h2>视频展示{{ count }}s</h2>
      <!-- 加载中提示 -->
      <div v-if="loading" class="loading-overlay">
        <span>加载中...</span>
      </div>
      <video style="width: 100%; height: 700px" playsinline />
    </div>
  </div>
</template>

<style scoped>
.loading-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
  color: white;
  background: rgba(0, 0, 0, 0.5);
  padding: 20px;
  border-radius: 8px;
}
</style>

但是这种方式有个问题就是切换页面可以重新正常加载播放了，但是刷新就会直接加载失败，抛出错误：Playback failed: NotAllowedError: play() failed because the user didn't interact with the document first.
这是因为浏览器（特别是 Chrome、Edge、Safari）在执行 自动播放策略（Autoplay Policy）。

一句话解释原因

浏览器禁止页面在“用户未与页面交互（click、touch、key）”之前自动播放带声音的视频。

即使你设置了 video.muted = true，某些浏览器在页面刚刷新时，仍可能认为你没有“主动操作页面”，从而阻止自动播放。
解决方案只有使用“点击播放”等交互提示，在刷新时引导用户手动允许播放（最稳定）。
如果实在不愿意用交互的方式解决，最终版也可以直接使用iframe

参考原文出处链接：https://blog.csdn.net/haixiangyun/article/details/132489160

posted @ 2025-10-13 15:08 Stitchhhhh 阅读(163) 评论(0) 收藏举报

刷新页面返回顶部

Stitchhhhh