位置: IT常识 - 正文

vue中播放rtsp流(vue 播放视频流)

编辑：rootadmin

vue中播放rtsp流实现vue中播放rtsp视频流的问题实现vue中播放rtsp视频流的问题开始科普了解一下使用下载ffmpeg（链接: [https://www.ffmpeg.org/download.html#build-windows](https://www.csdn.net/)）使用rtsp2web在serve下初始化和下载在serve下创建index.js前端代码问题最后参考。[^1]实现vue中播放rtsp视频流的问题

推荐整理分享vue中播放rtsp流(vue 播放视频流)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:rtsp vue播放,vue播放hls,vue怎么实现播放监控视频流,vue-video-player rtmp,vue video player rtsp,vue播放rtmp流,vue播放rtmp流,vue播放rtmp流,内容如对您有帮助，希望把文章链接给更多的朋友！

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

开始:

node.js工具jsmpeg.js文件npm install rtsp2web科普了解一下rtsp2web 是一个依赖 ffmpeg，能实时将传入的 rtsp 视频流转码成图像数据并通过 ws 推送到前端的智能工具。前端页面借助 jsmpeg.js 就可以很轻松的实现播放同时rtsp2web的特点还有：1、并发，支持同时播放多路视频2、合并同源，同时播放多个同一个rtsp视频源时，只会创建一个转码推流进程，不会创建多个。3、智能释放资源，智能检测当前没有使用的转码推流进程，将其关闭，并释放电脑资源。使用下载ffmpeg（链接: https://www.ffmpeg.org/download.html#build-windows）

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

使用rtsp2web vue中播放rtsp流(vue 播放视频流)

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

-|public|-favicon.ico|-index.html-|src-|serve-|.gittignore-.....在serve下初始化和下载npm init --yesnpm install rtsp2web在serve下创建index.js//index.jsconst RTSP2web = require('rtsp2web')//服务端的端口号，端口号可以自定义const port = 8033new RTSP2web({port)}

运行命令：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">  <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>  </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>

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

<template> <div id="app">  <canvas id="canvas" style="width: 600px; height: 600px;"></canvas> </div></template>问题

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

最后

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