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）。video.js可直接播放HLS（H264）视频流
[*]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: });},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，万能解码器
页:
[1]