vue中播放rtsp流

2023-4-4    前端达人

实现vue中播放rtsp视频流的问题

实现vue中播放rtsp视频流的问题

背景：项目中通过摄像机提供的rtsp流来显示画面，但是在编写项目中，需要将rtsp实时流画面传输到web前端页面中。于是找了很多方法，都是后台转码转成rtmp来播放，现在大部分插件和浏览器都是支持使用rtmp播放视频流。而rtsp随着flash的退出而被复杂化了。网上都是1、通过ffmpeg转码后输出，2、通过摄像机指定的web插件转码辅助播放，如海康，大华摄像机；3、还有个猿大师播放器基于猿大师中间件提供的内嵌网页播放（没用过，不知道行不行，原本想用现在这个方法行不行的，若不行就用这个猿大师了的）

开始

:
node.js工具
jsmpeg.js文件
npm install rtsp2web

科普了解一下

  1. rtsp2web 是一个依赖 ffmpeg，能实时将传入的 rtsp 视频流转码成图像数据并通过 ws 推送到前端的智能工具。
  2. 前端页面借助 jsmpeg.js 就可以很轻松的实现播放
  3. 同时rtsp2web的特点还有：1、并发，支持同时播放多路视频2、合并同源，同时播放多个同一个rtsp视频源时，只会创建一个转码推流进程，不会创建多个。3、智能释放资源，智能检测当前没有使用的转码推流进程，将其关闭，并释放电脑资源。

使用

下载ffmpeg（链接: https://www.ffmpeg.org/download.html#build-windows）

安装成功以后，你重新打开一个命令行终端，输入：ffmpeg -h，如果能输出 ffmpeg 的相关信息出来，则证明你的电脑安装 ffmpeg 成功。

使用rtsp2web

创建了一个vuecli（vue2）项目，名称不要起rtsp2web，与src文件夹同级
下创建一个serve文件夹 

-|public
    |-favicon.ico
    |-index.html
-|src
-|serve
-|.gittignore
-.....  

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    •

在serve下初始化和下载 

npm init --yes
npm install rtsp2web  

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    •

在serve下创建index.js 

//index.js
const RTSP2web = require('rtsp2web')

//服务端的端口号，端口号可以自定义
const port = 8033
new RTSP2web({
    port
)}  

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    •

运行命令：node index.js

前端代码

在public的index.html中
其中jsmpeg.min.js通过src引入，可以用jsmpeg.js或者jsmpeg.min.js都行 

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <!--v  jsmpeg.min.js文件用在这   v-->
    <script src="https://jsmpeg.com/jsmpeg.min.js" charset="utf-8"></script>    
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
  <script>
    var rtsp = 'rtsp://username:password@ip:port/live'
    window.onload = () => {
    //这里的port要与index.js的port保持一致
    new JSMpeg.Player("ws://localhost:8033/rtsp?url="+btoa(rtsp), {
       canvas: document.getElementById("canvas")
    })
  }
  </script>
</html>  

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    • 

    
  • 
        12
    
    • 

    
  • 
        13
    
    • 

    
  • 
        14
    
    • 

    
  • 
        15
    
    • 

    
  • 
        16
    
    • 

    
  • 
        17
    
    • 

    
  • 
        18
    
    • 

    
  • 
        19
    
    • 

    
  • 
        20
    
    • 

    
  • 
        21
    
    • 

    
  • 
        22
    
    • 

    
  • 
        23
    
    • 

    
  • 
        24
    
    • 

    
  • 
        25
    
    • 

    
  • 
        26
    
    • 

    
  • 
        27
    
    • 

    
  • 
        28
    
    • 

    
  • 
        29
    
    •

#####在vue页面中用canvas中播放视频
如 在App.vue中这样用： 

<template>
  <div id="app">
    <!-- <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/> -->
    <canvas id="canvas" style="width: 600px; height: 600px;"></canvas>
  </div>
</template>  

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    •

问题

为什么node index.js之后没反应？
—检查端口号是否填写对应，index.js中的端口要与script里的端口保持一致
|
为什么长时间未显示图像？
—需要等待大概1-2分钟，就会显示画面。至于这么长时间未显示，小弟也不知道啊。。希望大佬指点。。

最后

完事了就，这是我历经千辛万苦找到的方法，弄这个vue中播放rtsp搞了好久，技术太拉了我，只能用这些小玩意来搞。原本打算用java或者python通过拉rtsp流解析成rtmp的，奈何能力不足，也懒得思考懒得搞懒得弄，所以摆烂了QAQ
若哪里有讲的不妥和使用不当的地方还请您告知一下，万分感谢大佬指点，小弟深表感谢<抱拳>
-----------------------------------------------------------------------------------------------------------

参考。1

  1. https://zhuanlan.zhihu.com/p/531899593 ↩︎
    蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
    希望得到建议咨询、商务合作，也请与我们联系01063334945。 

    分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。 

    蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司。

分享本文至：
« 大厂设计师的细节真不是盖的 视频的传输方式【转】 »

分类

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档