实战之如何在VUE中播放RTSP实时推流播放解决方案

news2025/2/20 23:54:47
一、知识点

常见的直播协议有以下几种

  1. RTMP（Real-Time Messaging Protocol）实时消息传输协议：是一种用于互联网应用中的协议，最初由 Adobe 公司设计，用于 Flash Player 向 Flash Media Server 或其他支持 RTMP 的服务器之间传输音频、视频和数据。

  2. HLS（HTTP Live Streaming）：是苹果公司为移动设备（如 iPhone 和 iPad）和 Mac OS X
    平台开发的 HTTP 数据流协议。HLS 使用标准的 HTTP 协议作为传输协议，可以有效地传输多种类型的媒体流，如音频、视频和文本。

  3. FLV（Flash Video）：是一种用于互联网电视（IPTV）和在线多媒体应用程序的 Adobe Flash 技术。FLV文件可以通过 Adobe Flash Player 在 Web 浏览器中播放。

  4. HDS（HTTP Dynamic Streaming）：是 Adobe 公司为 Flash Player
    播放器设计的一种流式播放协议，它使用 HTTP 作为传输协议，可以有效地传输动态的音频和视频。

  5. DASH（Dynamic Adaptive Streaming over HTTP）：是一种使用 HTTP
    协议传输音频和视频的流式传输协议，支持多种编码格式和分辨率。DASH支持自适应比特率流（ABR），可以根据用户的网络带宽和设备性能调整播放质量。

  6. HTTP-FLV 是通过 HTTP 协议传输 FLV 视频流的一种技术，是直播领域的一种新型协议。在传统的 RTMP 协议中，需要使用专门的服务端软件实现直播服务，而 HTTP-FLV 则可以使用普通的 Web 服务器即可实现视频直播服务，因此可以降低服务器成本、提高可扩展性。
    HTTP-FLV 技术基于 HTTP 协议和 FLV 格式，将视频数据以小块分割并存储在 Web 服务器上，用户使用 HTTP 请求获取这些分块数据并将其合并成完整的视频流。HTTP-FLV 技术支持多种编码格式和分辨率的视频数据，并且具有自适应比特率调整功能，可以根据用户的网络带宽和设备性能调整视频质量。HTTP-FLV 技术的出现，拓宽了视频直播技术的应用范围，使得更多的视频网站和应用程序能够通过 HTTP-FLV 实现低延迟、高性能、高质量的视频直播服务。目前，HTTP-FLV 已被广泛应用于各种视频直播场景中。

  7. WebSocket-FLV: 基于WebSocket传输FLV，依赖浏览器支持播放FLV。WebSocket建立在HTTP之上，建立WebSocket连接前还要先建立HTTP连接。
    以上是常见的几种直播协议，每种协议都有其特点和应用场景，您可以根据实际需求选择合适的协议。

ps:WebSocket-FLV 和 HTTP-FLV 都它们之间的主要区别包括：

  1. 传输协议不同：HTTP-FLV 是基于 HTTP 协议，而 WebSocket-FLV 是基于 WebSocket 协议。相较于 HTTP 协议，WebSocket 具有双向通信、低延迟等优势，因此可以实现更加稳定和高效的视频直播服务。

  2. 连接方式不同：HTTP-FLV 采用短连接方式，即客户端和服务器建立一次连接后就断开；WebSocket-FLV 则采用长连接方式，即客户端和服务器建立一个持久性的连接，并且可以进行双向通信。

  3. 实时性不同：HTTP-FLV 的实时性较弱，需要不断地向服务器发送请求获取数据，因此延迟较高；WebSocket-FLV 则可以实现实时、低延迟的视频直播服务。

  4. 实现难度不同：HTTP-FLV 的实现相对比较简单，可以使用普通的 Web 服务器即可；WebSocket-FLV 的实现则相对复杂，需要使用支持 WebSocket 的服务器，并且需要开发 WebSocket 客户端代码。

二、正文

目前大多数网络摄像头都是通过 RTSP 协议传输视频流的，但是 HTML 并不标准支持 RTSP 流。除了 Firefox 浏览器可以直接播放 RTSP 流之外，几乎没有其他浏览器可以直接播放 RTSP 流。Electron 应用是其于 Chromium 内核的，因此也不能直接播放 RTSP流
在借助一定工具的情况下，可以实现在 Web 页面上放 RTSP流。本文介绍的方法可以应用于传统 Web 应用和 Electron 应用中，唯一的区别是将Electron 应用的主进程当作传统 Web 应用的服务器在这里插入图片描述

1.基于 flv.js 的 RTSP 播放无插件方案

flv.js 是 Bilibili 开源的一款 HTML5 浏览器。依赖于 Media Source Extension 进行视频播放，视频通过 HTTP-FLV 或 WebSocket-FLV 协议传输，视频格式需要为 FLV 格式。

flv.js在获取到FLV格式的音视频数据后将 FLV 文件流转码复用成 ISO BMFF（MP4 碎片）片段，再通过Media Source Extensions API 传递给原生HTML5 Video标签进行播放；

Flv.js 是 HTML5 Flash 视频（FLV）播放器，纯原生 JavaScript 开发，没有用到 Flash。由 bilibili 网站开源。

该项目依托于 Media Source Extensions，受到 hls.js 的启发。

概览：

一个实现了在 HTML5 视频中播放 FLV 格式视频的 JavaScript 库。它的工作原理是将 FLV 文件流转码复用成 ISO BMFF（MP4 碎片）片段，然后通过 Media Source Extensions 将 MP4 片段喂进浏览器。

flv.js 是使用 ECMAScript 6 编写的，然后通过 Babel Compiler 编译成 ECMAScript 5，使用 Browserify 打包。

功能：

FLV 容器，具有 H.264 + AAC 编解码器播放功能

多部分分段视频播放

HTTP FLV 低延迟实时流播放

FLV 通过 WebSocket 实时流播放

兼容 Chrome, FireFox, Safari 10, IE11 和 Edge

十分低开销，并且通过你的浏览器进行硬件加速
  1. 服务器端（主进程）

服务器端采用 express + express-ws 框架进行编写，当有 HTTP 请求发送到指定的地址时，启动 ffmpeg 串流程序，直接将 RTSP 流封装成 FLV 格式的视频流，推送到指定的 WebSocket 响应流中。

import * as express from "express";
import * as expressWebSocket from "express-ws";
import ffmpeg from "fluent-ffmpeg";
import webSocketStream from "websocket-stream/stream";
import WebSocket from "websocket-stream";
import * as http from "http";

function localServer() {
    let app = express();
    app.use(express.static(__dirname));
    expressWebSocket(app, null, {
        perMessageDeflate: true
    });
    app.ws("/rtsp/:id/", rtspRequestHandle)
    app.listen(8888);
    console.log("express listened")
}

function rtspRequestHandle(ws, req) {
    console.log("rtsp request handle");
    const stream = webSocketStream(ws, {
        binary: true,
        browserBufferTimeout: 1000000
    }, {
        browserBufferTimeout: 1000000
    });
    let url = req.query.url;
    console.log("rtsp url:", url);
    console.log("rtsp params:", req.params);
    try {
        ffmpeg(url)
            .addInputOption("-rtsp_transport", "tcp", "-buffer_size", "102400")  // 这里可以添加一些 RTSP 优化的参数
            .on("start", function () {
                console.log(url, "Stream started.");
            })
            .on("codecData", function () {
                console.log(url, "Stream codecData.")
          			// 摄像机在线处理
            })
            .on("error", function (err) {
                console.log(url, "An error occured: ", err.message);
            })
            .on("end", function () {
                console.log(url, "Stream end!");
          			// 摄像机断线的处理
            })
            .outputFormat("flv").videoCodec("copy").noAudio().pipe(stream);
    } catch (error) {
        console.log(error);
    }
}

当然这个实现还比较粗糙。当有多个相同地址的请求时，应当增加 ffmpeg 的输出，而不是启动一个新的 ffmpeg 进程串流

浏览器端（渲染进程）
示例使用 Vue 框架进行页面设计。

npm install --save flv.js
//  "flv.js": "^1.6.2",

<template>
    <div>
        <video class="demo-video" ref="player" muted autoplay></video>
    </div>
</template>
<script>
import flvjs from "flv.js";
export default {
    data () {
        return {
            player: ''
        }
    },
    mounted () {
        if (flvjs.isSupported()) {
            let video = this.$refs.player;
            if (video) {
                this.player = flvjs.createPlayer({
                    type: "flv",
                    isLive: true,
                    url: `https://dxsnvr.com:2443/live/ch1443_0_1.flv`
                });
                this.player.attachMediaElement(video);
                try {
                    this.player.load();
                    this.player.play();
                } catch (error) {
                    console.log(error);
                };
            }
        }
    },
    beforeDestroy () {
        this.player.destory();
    }
}
</script>
<style>
    .demo-video {
        max-width: 880px; 
        max-height: 660px;
    }
</style>

在这里插入图片描述

2.基于有插件方案

近期在做摄像头监控视频在网页中播放的工作，现在大部分摄像头厂商如海康威视、大华、华为等都支持标准的RTSP协议，RTSP协议的优势是实时性高、流畅度度高，同时支持H.265和H.264，清晰度也更高，对于要求比较高的安防、交通等领域很适合，交通行业特殊需要延迟低于300毫秒。

比如海康威视提供的开发包，优势就是延迟比较低，但要求浏览器需要支持NPAPI插件，而Chrome等高版本浏览器是不支持的，如果使用老版本浏览器也可以暂时解决问题，但是漏洞比较多，商用还是有很大风险，并且不同的厂商的方案也只针对本厂商产品，不能兼容其他厂商的摄像头。

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
海康开放平台
下载h5集成工具
在这里插入图片描述
将开发包bin目录下的文件放入public目录下（我这里是放入了public/static目录下）
3.在public/index.html文件下引入

<script src="static/h5player.min.js"></script>

5.在src/utils下也放入一个h5player.min.js，方便后面引用。在使用页面引入js

import '@/utils/h5player.min.js'

<div id="player"></div>

<script>
  import '@/utils/h5player.min.js'

  export default {
    data() {
      return {
        // 播放器对象
        player: null
      }
    }
    mounted() {
      this.$nextTick(() => {
        this.initPlayer()
      })
    }
  methods: {
    /**
     * 初始化播放器
     */
    initPlayer() {
      this.player = new window.JSPlugin({
        // 需要英文字母开头 必填
        szId: 'player',
        // 必填,引用H5player.min.js的js相对路径
        szBasePath: '../../../utils'

        // // 当容器div#play_window有固定宽高时，可不传iWidth和iHeight，窗口大小将自适应容器宽高
        // iWidth: 600,
        // iHeight: 400,

        // // 分屏播放，默认最大分屏4*4
        // iMaxSplit: 16,
        // iCurrentSplit: 1,

        // // 样式
        // oStyle: {
        //   border: '#343434',
        //   borderSelect: '#FFCC00',
        //   background: '#000'
        // }
      })
      this.initPlugin()
    },
      /**
     * 事件初始化
     */
      initPlugin() {
        this.player.JS_SetWindowControlCallback({
          windowEventSelect(iWindIndex) {
            // 插件选中窗口回调
            console.log('windowSelect callback: ', iWindIndex)
          },
          pluginErrorHandler(iWindIndex, iErrorCode, oError) {
            // 插件错误回调
            console.error(`window-${iWindIndex}, errorCode: ${iErrorCode}`, oError)
          },
          windowEventOver(iWindIndex) {
            // 鼠标移过回调
            console.log('鼠标移过回调', iWindIndex)
          },
          windowEventOut(iWindIndex) {
            // 鼠标移出回调
            console.log('鼠标移出回调', iWindIndex)
          },
          windowFullCcreenChange(bFull) {
            // 全屏切换回调
            console.log('全屏切换回调', bFull)
          },
          firstFrameDisplay(iWndIndex, iWidth, iHeight) {
            // 首帧显示回调
            console.log('首帧显示回调', iWndIndex, iWidth, iHeight)
          },
          performanceLack(iWndIndex) {
            // 性能不足回调
            console.log('性能不足回调', iWndIndex)
          }
        })
        this.play()
      },
        /**
     * 播放
     */
        play() {
          let preUrl = ''  // 播放地址
          const param = {
            playURL: preUrl,
            // 1：高级模式  0：普通模式，高级模式支持所有
            mode: 0
          }
          // 当前播放窗口下标
          let index = 0
          console.log(this.playerArr)
          this.player.JS_Play(preUrl, param, index).then(
            () => {
              // 播放成功回调
              console.log('播放成功')
            },
            err => {
              console.log('播放失败')
              console.info('JS_Play failed:', err)
            }
          )
        },
  }
  }
</script>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/669480.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

三、Docker命令及基本使用

三、Docker命令及基本使用

学习参考&#xff1a;尚硅谷Docker实战教程、Docker官网、其他优秀博客(参考过的在文章最后列出) 目录 前言一、帮助启动类命令1.1 启动docker1.2 停止docker1.3 重启docker1.4 查看docker状态1.5 开机启动1.6 查看docker概要信息1.7 查看docker总体帮助文档1.8 查看docker命令…
阅读更多...
模板文件导出Excel【EasyPoi实战系列】- 第478篇

模板文件导出Excel【EasyPoi实战系列】- 第478篇

​历史文章&#xff08;文章累计470&#xff09; 《国内最全的Spring Boot系列之一》 《国内最全的Spring Boot系列之二》 《国内最全的Spring Boot系列之三》 《国内最全的Spring Boot系列之四》 《国内最全的Spring Boot系列之五》 《国内最全的Spring Boot系列之六》 …
阅读更多...
慎投！6月有3本SCIE期刊被剔除！（附SCI/SSCI目录下载）

慎投！6月有3本SCIE期刊被剔除！（附SCI/SSCI目录下载）

期刊动态&#xff1a;2023年6月SCI、SSCI期刊目录更新 2023年6月20日&#xff0c;科睿唯安更新了WOS期刊目录&#xff0c;继上次5月WOS期刊目录剔除4本SCIE&SSCI期刊之后&#xff0c;此次6月更新又有3本SCIE期刊发生变动&#xff0c;其中有1本期刊被踢出SCIE数据库&#x…
阅读更多...
Python基础（18）——Python推导式

Python基础（18）——Python推导式

Python基础&#xff08;18&#xff09;——Python推导式 文章目录 Python基础&#xff08;18&#xff09;——Python推导式目标一. 列表推导式1.1 快速体验1.2 带if的列表推导式1.3 多个for循环实现列表推导式 二. 字典推导式1 快速体验 三. 集合推导式四. 总结 目标 列表推导…
阅读更多...
PowerShell系列（七）PowerShell当中的Provider介绍

PowerShell系列（七）PowerShell当中的Provider介绍

往期回顾PowerShell系列&#xff08;一&#xff09;&#xff1a;PowerShell介绍和cmd命令行的区别 PowerShell系列&#xff08;二&#xff09;&#xff1a;PowerShell和Python之间的差异介绍 PowerShell系列&#xff08;三&#xff09;&#xff1a;PowerShell发展历程梳理 P…
阅读更多...
管理类联考——写作——素材篇——论说文——写作素材05——志篇：奉献·公益06——制篇：原则·准则

管理类联考——写作——素材篇——论说文——写作素材05——志篇：奉献·公益06——制篇：原则·准则

管理类专业学位联考 (写作能力) 论说文素材 05——志篇&#xff1a;奉献公益 论文说材料: 自己活着&#xff0c;就是为了使别人过得更美好。 ——雷锋 一&#xff1a;道理论据 成人善事&#xff0c;其功更倍&#xff1b;动人善愿&#xff0c;其量无涯。——陈龙正 凡人为善…
阅读更多...
谷歌tryOnDiffusion实现了高度逼真的虚拟试穿；ChatGPT 或将推出 AI 应用商店

谷歌tryOnDiffusion实现了高度逼真的虚拟试穿；ChatGPT 或将推出 AI 应用商店

&#x1f989; AI新闻 &#x1f680; ChatGPT Plus 用户已支持联网和插件功能&#xff0c;OpenAI 或将推出 AI 应用商店 摘要&#xff1a;OpenAI 宣布 ChatGPT Plus 用户已支持联网和插件功能。据外媒 The Information 报道&#xff0c;OpenAI 正考虑为 AI 软件创建一个应用商…
阅读更多...
postgresql snapshot快照源码解析, 快照内容生成规则, 可见性是这样判断的

postgresql snapshot快照源码解析, 快照内容生成规则, 可见性是这样判断的

postgresql snapshot快照源码解读 ​专栏内容&#xff1a;postgresql内核源码分析 个人主页&#xff1a;我的主页 座右铭&#xff1a;天行健&#xff0c;君子以自强不息&#xff1b;地势坤&#xff0c;君子以厚德载物. 概述 本文主要介绍数据库事务快照&#xff0c;分别从源码实…
阅读更多...
VisualSVN Server 5.1.5 Crack

VisualSVN Server 5.1.5 Crack

特征 VisualSVN Server 提供以下主要功能。 Active Directory 单点登录 允许用户使用他们当前的 Active Directory 域凭据访问 VisualSVN Server。使用安全 Kerberos V5 或 NTLM 身份验证协议。支持双因素身份验证和智能卡。 多站点存储库复制 使用 VisualSVN 分布式文件系统…
阅读更多...
【FPGA入门】第七篇、FPGA实现VGA接口驱动

【FPGA入门】第七篇、FPGA实现VGA接口驱动

目录 第一部分、实验结果 1、横的三色彩条效果 2、竖的三色彩条效果 第二部分、VGA驱动基本知识 1、VGA分辨率问题 2、VGA驱动波形 2.1、工业标准的时序波形图 2.2、比上面那张图更容易理解的图 2.3、每个区域对应的时间 2.4、不同分辨率的表格 3、VGA扫描范…
阅读更多...
【NeRF大总结】基于NeRF的三维视觉年度进展报告

【NeRF大总结】基于NeRF的三维视觉年度进展报告

基于NeRF的三维视觉年度进展报告 清华大学&#xff1a;刘烨斌 原文链接&#xff1a;【NeRF大总结】基于NeRF的三维视觉年度进展报告–清华大学刘烨斌 (by 小样本视觉与智能) 目录 文章目录 基于NeRF的三维视觉年度进展报告01 背景介绍NeRFNeRF与三维视觉三维表征与可微渲染…
阅读更多...
信号与系统与MATLAB应用（一）

信号与系统与MATLAB应用（一）

文章目录 前言一、基本信号表示1、周期方波信号2、周期锯齿波信号3、指数函数信号4、抽样函数信号5、单位阶跃信号 二、信号的基本运算1、信号的相加和相乘2、信号的平移3、信号的反折4、信号的尺度变换&#xff08;缩展&#xff09;5、信号的微分和积分未完待续... 前言 说起…
阅读更多...
WEBGIS系统整体设计

WEBGIS系统整体设计

城市地下电力管线管理系统是一个基于B/S 架构的应用系统。系统的网络拓扑结构如 PostgreSQL 数据库以及文件系统作为数据服务器。另外&#xff0c;使用GeoServer 作为GIS 服务器&#xff0c;提供符合OpenGIS 规定的WFS 、WMS 等协议的GIS 服务。 遵循MVC 的分层设计思想&#x…
阅读更多...
第三十四章 开发Productions - ObjectScript Productions - Defining Business Metrics

第三十四章 开发Productions - ObjectScript Productions - Defining Business Metrics

文章目录 第三十四章 开发Productions - ObjectScript Productions - Defining Business Metrics定义业务指标业务指标简介业务指标属性 单实例和多实例业务指标作为业务服务的业务指标 第三十四章 开发Productions - ObjectScript Productions - Defining Business Metrics 定…
阅读更多...
Linux常用命令——ftpwho命令

Linux常用命令——ftpwho命令

在线Linux命令查询工具 ftpwho 显示当前每个ftp会话信息 补充说明 ftpwho命令ftp服务器套件proftpd的工作指令&#xff0c;用于显示当前每个ftp会话信息。 语法 ftpwho(选项)选项 -h&#xff1a;显示帮助信息&#xff1b; -v&#xff1a;详细模式&#xff0c;输出更多信…
阅读更多...
SpringBoot使用Session防止表单重复提交（提供Gitee源码）

SpringBoot使用Session防止表单重复提交（提供Gitee源码）

前言&#xff1a;在日常开发中&#xff0c;客户可能会存在反复点击提交按钮导致表单的重复提交&#xff0c;这个问题也是非常需要重视的&#xff0c;在本篇博客中&#xff0c;采用的是session、自定义注解和拦截器的方式来防止重复表单的重复提交&#xff0c;提高整体代码的优雅…
阅读更多...
管理类联考——写作——素材篇——论说文——写作素材07——制篇：积累·习惯08——制篇：容让·宽厚

管理类联考——写作——素材篇——论说文——写作素材07——制篇：积累·习惯08——制篇：容让·宽厚

管理类专业学位联考 (写作能力) 论说文素材 07——制篇&#xff1a;积累习惯 论文说材料: 合抱之木&#xff0c;生于毫末&#xff1b;九层之台&#xff0c;起于累土&#xff1b;千里之行&#xff0c;始于 足下。 ——《老子》 一&#xff1a;道理论据 操千曲而后晓声&#…
阅读更多...
HTTP代理出现503错误是什么原因，怎么处理

HTTP代理出现503错误是什么原因，怎么处理

HTTP代理出现503错误表示代理服务器无法连接到目标服务器或无法获得对目标服务器的响应。这意味着您的请求无法被代理服务器处理&#xff0c;因此您无法访问所请求的网站或资源。 HTTP代理出现503错误的原因 HTTP代理出现503错误可能有以下原因&#xff1a; 1. 代理服务器与目…
阅读更多...
基于Springboot+vue的网上商城购物系统设计与实现

基于Springboot+vue的网上商城购物系统设计与实现

博主介绍&#xff1a; 大家好&#xff0c;我是一名在Java圈混迹十余年的程序员&#xff0c;精通Java编程语言&#xff0c;同时也熟练掌握微信小程序、Python和Android等技术&#xff0c;能够为大家提供全方位的技术支持和交流。 我擅长在JavaWeb、SSH、SSM、SpringBoot等框架…
阅读更多...
力控软件与S7-200SMART无线PPI通信

力控软件与S7-200SMART无线PPI通信

在实际系统中&#xff0c;人机界面与PLC通常不在一起&#xff0c;中心计算机一般放置在控制室&#xff0c;而PLC安装在现场车间&#xff0c;二者之间距离往往从几十米到几千米。如果布线的话&#xff0c;需要挖沟施工&#xff0c;比较麻烦&#xff0c;这种情况下比较适合采用无…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023