Web浏览器播放rtsp视频流详细解决方案

1、背景

在当前项目中，需要实现Web端直接播放RTSP视频流。该功能的核心目标是使得用户能够通过浏览器观看来自不同品牌的IPC（Internet Protocol Camera）设备的实时视频流。主要的IPC设备来自海康威视、大华科技以及宇视等厂商，这些设备普遍使用RTSP协议来传输视频数据。

• 点播视频：MP4, WebM, MKV, AVI。
• 实时流媒体：RTMP, HLS, DASH, RTSP, WebRTC。
• 编码格式：H.264, H.265, VP8, VP9, AV1。

2、基于协议的视频流格式

这些格式用于实时视频传输和直播，通常用于广播、实时互动视频或流媒体平台：

• RTMP (Real-Time Messaging Protocol)：

  • 由Adobe开发，主要用于直播流媒体传输，通常结合Flash播放器使用。
  • 具有低延迟的特点，适合实时视频流和互动性强的视频。
  • 适用场景：直播平台（如Twitch、YouTube Live），实时互动视频。

• HLS (HTTP Live Streaming)：

  • 由Apple提出，基于HTTP协议，能够将视频文件分割成一系列小片段（TS文件），并通过M3U8播放列表传输。
  • HLS支持自适应比特率，能够根据网络状况调整视频质量。
  • 适用场景：直播和点播流媒体，广泛应用于iOS和Web端（如Netflix、Hulu）。

• DASH (Dynamic Adaptive Streaming over HTTP)：

  • 又称MPEG-DASH，是HLS的开源替代品，支持自适应比特率流，能够根据网络条件动态调整视频质量。
  • 与HLS类似，但不依赖Apple技术，更加开放。
  • 适用场景：视频点播、直播流媒体。

• RTSP (Real-Time Streaming Protocol)：

  • 主要用于控制流媒体服务器，支持实时流传输。RTSP本身并不传输视频数据，通常结合RTP（Real-Time Transport Protocol）一起使用。
  • 适用场景：视频监控、IP摄像头、实时视频播放。

• WebRTC (Web Real-Time Communication)：

  • 主要用于浏览器之间的实时视频通话，不需要插件，直接通过WebRTC协议进行音视频流的传输。
  • 适用场景：视频会议、P2P视频通话。

3、直播视频编码格式

这些编码格式用于压缩视频数据，降低带宽需求，提供更好的视频质量：

• H.264 (AVC, Advanced Video Coding)：

  • 最常用的视频编码格式，广泛应用于Web视频、流媒体、高清视频录制等场景。
  • 适用场景：几乎所有的视频流和播放设备，尤其是Web视频、4K视频。

• H.265 (HEVC, High Efficiency Video Coding)：

  • 是H.264的后继者，提供比H.264更高的压缩效率，适合4K视频流和高质量视频存储。
  • 需要更高的解码能力，适用于现代硬件。
  • 适用场景：4K视频流、超高清视频、网络视频流。

• VP8/VP9：

  • 由Google推出，VP8是WebM的标准视频编码，VP9是其后继者，提供类似H.265的压缩效率。
  • 适用场景：YouTube等视频平台，尤其是需要开放格式的场景。

• AV1：

  • 开放且高效的视频编码格式，目标是提供更高的压缩效率，适用于未来的视频流和存储需求。
  • 目前的硬件支持较少，但越来越多的浏览器和平台开始支持AV1。
  • 适用场景：未来的视频流、4K及以上视频内容。

4、实时视频流格式

适用于需要低延迟的实时视频流，常见于直播、视频会议、IP摄像头等场景：

• MJPEG (Motion JPEG)：

  • 每一帧图像都以JPEG格式压缩，适合低延迟要求的视频流，通常用于监控和摄像头。
  • 适用场景：视频监控、IP摄像头。

• VP8/VP9：

  • 与视频流格式一样，VP8/VP9也适用于实时视频流传输，特别是在WebRTC中广泛使用。

5、其他协议和格式

• MPEG-2：

  • 传统的视频流格式，广泛用于电视广播和DVD视频，虽然现在被H.264和H.265替代，但仍在某些场合使用。
  • 适用场景：电视广播、卫星电视、DVD视频播放。

• SRT (Secure Reliable Transport)：

  • 一种低延迟、安全的视频流协议，特别适用于直播内容传输，确保在不稳定的网络条件下也能保证视频质量。
  • 适用场景：实时直播、电视台直播。

6、在web上实现播放rtsp/rtmp视频流，由于浏览器不 能自定义协议，不能直接播放，主要解决方案如下：

（1）、浏览器插件方案

　　这种方案依赖于浏览器插件或者控件，在浏览器中播放 RTSP/RTMP 流，但这种方法存在一些局限性，尤其在移动平台上不可用。

a. VLC浏览器控件（已过期）

• 简介：VLC是一个开源的媒体播放器，曾经可以通过浏览器插件来播放RTSP流。
• 缺点：VLC控件已经过时，仅支持老版本的浏览器，而且在移动端完全不支持。
• 推荐度：不推荐，已经过时，无法满足现代Web的需求。

b. Flash控件（已淘汰）

• 简介：Flash曾是Web视频流的标准，通过Flash插件可以播放RTMP流。
• 缺点：Flash已被大多数现代浏览器淘汰，不支持移动平台，且存在安全问题。
• 推荐度：不推荐，已经被现代浏览器废弃。

总结：浏览器插件方案已经过时，不能满足现代Web应用的需求，不推荐在新项目中使用。

（2）、中间服务器方案

为了在Web端播放RTSP流，通常需要通过某些中间服务进行转换或处理，以下是几种主流的方案：

a. RTSP转换为HTTP流

• 工作原理：在服务器端使用工具（如FFmpeg）将RTSP流转为HTTP流（如HLS、DASH等），然后通过常规的HTML5 <video> 标签进行播放。
• 优点：
  • 支持现代浏览器和移动设备（因为HLS是基于HTTP的，支持跨平台）。
  • 使用FFmpeg等工具进行流转换，广泛支持。
• 缺点：适用场景：播放静态的RTSP流、点播视频流。
  • 转码延迟较高，实时性差，适用于点播或低延迟要求不高的场景。
  • 需要消耗较多的服务器资源进行转码。

b. WebRTC技术

• 工作原理：通过WebRTC将RTSP流转换为WebRTC流（RTSP to WebRTC），并在浏览器中播放。
• 优点：
  • 支持低延迟，适用于实时视频流（如视频会议、实时直播等）。
  • 无需插件，直接在浏览器中运行，支持现代浏览器（如Chrome、Firefox等）。
• 缺点：适用场景：实时视频流、低延迟直播。
  • 设置复杂，需要专门的服务器和协议转换。
  • 需要较高的技术要求和服务器支持。

c. 流媒体服务器

• 工作原理：使用流媒体服务器（如Nginx-RTMP、Wowza Streaming Engine等）来处理RTSP流，并通过HTTP协议（如HLS、DASH、RTMP等）转发到Web端。
• 优点：
  • 适用于大规模的流媒体分发，支持RTSP、RTMP等协议。
  • HLS或DASH格式支持所有现代浏览器，尤其是移动设备。
  • 支持负载均衡、高可用性等企业级功能。
• 缺点：适用场景：大规模直播分发、点播视频。
  • 需要搭建并维护流媒体服务器。
  • 服务器资源消耗较大，特别是在高并发下。

d. 使用第三方云服务

• 工作原理：将RTSP流上传到云服务提供商（如AWS、Google Cloud、Alibaba Cloud等）的服务器，然后通过他们提供的API或者工具进行播放。
• 优点：
  • 省去自己搭建和维护流媒体服务器的麻烦。
  • 高可用、低延迟，支持全球分发。
  • 通常具有强大的后台分析、监控功能。
• 缺点：适用场景：需要稳定、高可用的视频流服务，适用于直播、实时流媒体服务。
  • 成本较高，特别是在流量大的情况下。
  • 依赖第三方服务，可能存在网络延迟或服务中断的风险。

7、本案例使用开源项目webRTC实时播放视频流

前端页面使用vue.js+elementui框架集成（webrtc-streamer目前rtsp视频流仅支持H264,目前不支持H265视频格式，下面有讲解另外一种模式播放H265的视频流）

　　webrtc开源项目地址：https://github.com/mpromonet/webrtc-streamer/releases

　　webrtc-streamer启动页面

集成页面vue代码（组件）

<template>
    <div id="video-contianer">
      <video
        class="video"
        ref="video"
        preload="auto"
        autoplay="autoplay"
        muted
        controls
        :width="width"
        :height="height"
      />
      <!-- <div
        class="mask"
        @click="handleClickVideo"
        :class="{ 'active-video-border': selectStatus }"
      ></div> -->
    </div>
  </template>

  <script>
  import WebRtcStreamer from "../../../public/webrtcstreamer";
  const WEBRTC_STREAMER_URL = 'http://192.168.168.194:8000'

  export default {
    name: "videoCom",
    props: {
      rtsp: {
        type: String,
        required: true,
      },
      isOn: {
        type: Boolean,
        default: false,
      },
      spareId: {
        type: Number,
      },
      selectStatus: {
        type: Boolean,
        default: false,
      },
      height: {
        type: Number,
        default: 360,
      },
      width: {
        type: Number,
        default: 440
      },
    },
    data() {
      return {
        socket: null,
        result: null, // 返回值
        pic: null,
        webRtcServer: null,
        clickCount: 0, // 用来计数点击次数
      };
    },
    watch: {
      rtsp() {
        // do something
        console.log(this.rtsp);
        this.webRtcServer && this.webRtcServer.disconnect();
        this.initVideo();
      },
    },
    destroyed() {
      this.webRtcServer && this.webRtcServer.disconnect();
    },
    beforeCreate() {
      window.onbeforeunload = () => {
        this.webRtcServer && this.webRtcServer.disconnect();
      };
    },
    created() {},
    mounted() {
      this.initVideo();
    },
    methods: {
      initVideo() {
        try {
          //连接后端的IP地址和端口
          this.webRtcServer && this.webRtcServer.disconnect();
          var url = WEBRTC_STREAMER_URL;
          this.webRtcServer = new WebRtcStreamer(
            this.$refs.video,
            url
            //此处需要改为所部署的服务器IP
          );
          //向后端发送rtsp地址
          this.webRtcServer.connect(this.rtsp);
        } catch (error) {
          console.log(error);
        }
      },
      /* 处理双击 单机 */
      dbClick() {
        this.clickCount++;
        if (this.clickCount === 2) {
          this.btnFull(); // 双击全屏
          this.clickCount = 0;
        }
        setTimeout(() => {
          if (this.clickCount === 1) {
            this.clickCount = 0;
          }
        }, 250);
      },
      /* 视频全屏 */
      btnFull() {
        const elVideo = this.$refs.video;
        if (elVideo.webkitRequestFullScreen) {
          elVideo.webkitRequestFullScreen();
        } else if (elVideo.mozRequestFullScreen) {
          elVideo.mozRequestFullScreen();
        } else if (elVideo.requestFullscreen) {
          elVideo.requestFullscreen();
        }
      },
      /*
      ison用来判断是否需要更换视频流
      dbclick函数用来双击放大全屏方法
      */
      handleClickVideo() {
        if (this.isOn) {
          this.$emit("selectVideo", this.spareId);
          this.dbClick();
        } else {
          this.btnFull();
        }
      },
    },
  };
  </script>

  <style scoped lang="scss">
  .active-video-border {
    border: 2px salmon solid;
  }
  #video-contianer {
    position: relative;
    // width: 100%;
    // height: 100%;
    // .video {
    //   // width: 100%;
    //   // height: 100%;
    //   // object-fit: cover;
    // }
    .mask {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      cursor: pointer;
    }
  }
  </style>

<Vedio rtsp="rtsp://admin:abc123456@192.168.168.168/video" :height="height" :width="width" ref="vedioSon"></Vedio>

<script>

import Vedio from "../../vedio/vedio.vue";

export default {

  name: "User",

  components: {Vedio },

}

</srcipt>

注意摄像头视频编码格式H264,webrtc目前不支持H265编码格式

8、使用EasyMedia流媒体服务进行视频转码，支持H265编码格式，还可以直接将海康视频直接解码播放

 github地址：https://github.com/Janix520/EasyMedia

Springboot、netty实现的http-flv、websocket-flv流媒体服务（可用于直播点播），支持rtsp、h264、h265等、rtmp等多种源，h5纯js播放（不依赖flash），不需要依赖nginx等第三方，延迟大部分在1-5秒内（已经支持转复用，h264的流自动转封装，超低延迟）。

播放地址：http://192.168.168.154:8866/live?url=rtsp://admin:abc123456@192.168.168.168/video

前端使用flv.js就能直接播放视频流，或者使用西瓜播放器（npm install xgplayer npm install xgplayer-flv）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>FLV.js Demo</title>
  <script src="https://cdn.jsdelivr.net/npm/flv.js/dist/flv.min.js"></script>
</head>
<body>
  <h1>FLV.js </h1>
  <video id="videoElement" controls width="640" height="360"></video>

  <script>
    // 检查浏览器是否支持 MSE (Media Source Extensions)
    if (flvjs.isSupported()) {
      // 初始化 FLV.js 播放器
      const videoElement = document.getElementById('videoElement');
      const flvPlayer = flvjs.createPlayer({
        type: 'flv',
        url: 'ws://192.168.168.154:8866/live?url=rtsp://admin:abc123456@192.168.168.168/video',
      });
      flvPlayer.attachMediaElement(videoElement);
      flvPlayer.load();
      flvPlayer.play();
    } else {
      alert('FLV.js 不支持您的浏览器');
    }
  </script>
</body>
</html>

西瓜视频播放器vue demo

<template>
  <div>
    <!-- 视频播放器容器 -->
    <div id="video-container" />
  </div>
</template>

<script>
// 引入西瓜播放器
import Player from 'xgplayer';
import FlvPlugin from "xgplayer-flv";
import 'xgplayer/dist/index.min.css'

export default {
  name: 'XGPlayerFlvComponent',
  data() {
    return {
      player: null, // 存储播放器实例
    };
  },
  mounted() {
    // 初始化西瓜播放器
    this.player = new Player({
      id: 'video-container', // 对应 HTML 容器的 ID
      url: 'http://192.168.168.154:8866/live?url=rtsp://admin:abc123456@192.168.168.168/video', // 视频 URL
      poster: 'https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/byted-player-videos/1.0.0/xgplayer-demo-thumbnail.jpg', // 视频封面
      volume: 0.6, // 默认音量
      playsinline: true, // 移动端内嵌播放
      autoplay: false, // 是否自动播放
      pip: true, // 画中画支持
      keyShortcut: 'on', // 启用快捷键
      playbackRate: [0.5, 1, 1.5, 2], // 倍速播放选项
      plugins: [FlvPlugin]
    });
  },
  beforeDestroy() {
    // 销毁播放器，防止内存泄漏
    if (this.player) {
      this.player.destroy();
      this.player = null;
    }
  },
};
</script>

<style scoped>
#video-container {
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #000;
}
</style>

视频流地址测试工具VLC，万能解码器