vue中播放rtsp流的方法实例详解
背景：
项目中通过摄像机提供的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
创建了一个vuecli（vue2）项目，名称不要起rtsp2web，与src文件夹同级
下创建一个serve文件夹
-|public
|-favicon.ico
|-index.html
-|src
-|serve
-|.gittignore
-.....
在serve下初始化和下载
npm init --yes npm install rtsp2web
在serve下创建index.js
//index.js
const RTSP2web = require('rtsp2web')
//服务端的端口号，端口号可以自定义
const port = 8033
new 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" rel="external nofollow" >
<!--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>
#####在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>
问题
为什么node index.js之后没反应？
—检查端口号是否填写对应，index.js中的端口要与script里的端口保持一致
|
为什么长时间未显示图像？
—需要等待大概1-2分钟，就会显示画面。至于这么长时间未显示，小弟也不知道啊。。希望大佬指点。。
最后
完事了就，这是我历经千辛万苦找到的方法，弄这个vue中播放rtsp搞了好久，技术太拉了我，只能用这些小玩意来搞。原本打算用java或者python通过拉rtsp流解析成rtmp的，奈何能力不足，也懒得思考懒得搞懒得弄，所以摆烂了QAQ
参考
https://zhuanlan.zhihu.com/p/531899593
到此这篇关于vue中播放rtsp流的文章就介绍到这了,更多相关vue播放rtsp流内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要给大家介绍了关于Vue全局loading及错误提示的思路与实现方法，文中通过示例代码介绍的非常详细，对大家学习或者使用Vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-08-08
这篇文章主要为大家详细介绍了vue-router实现tab标签页的相关方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-10-10
随着构建现代前端应用的需要,样式的管理和隔离变得越来越重要,为了解决样式冲突和管理困难的问题,CSS Modules 应运而生,本文我们将讨论如何在 Vue3 中使用 CSS Modules 实现样式隔离,需要的朋友可以参考下2024-09-09
vue前端获取/切换麦克风、播放采集音频和采集音量大小完整代码
这篇文章主要给大家介绍了关于vue前端获取/切换麦克风、播放采集音频和采集音量大小的相关资料,文中通过图文以及代码介绍的非常详细,对大家学习或者使用vue具有一定的参考借鉴价值,需要的朋友可以参考下2023-12-12
这篇文章主要为大家介绍了vue前端优雅展示后端十万条数据的考点剖析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
这篇文章主要介绍了vue中按钮操作完刷新页面的实现方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
vue.js默认路由不加载linkActiveClass问题的解决方法
这篇文章主要给大家介绍了关于vue.js默认路由不加载linkActiveClass问题的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起看看吧。2017-12-12
这篇文章主要介绍了vue-datepicker的使用，本文通过实例代码大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-07-07
这篇文章主要介绍了Vuex的使用及知识点笔记，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
Vue.js每天必学之组件与组件间的通信,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-09-09
最新评论