vue中播放rtsp流

Posted dlpay

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue中播放rtsp流相关的知识,希望对你有一定的参考价值。

实现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
-.....

在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">
    <!--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
若哪里有讲的不妥和使用不当的地方还请您告知一下,万分感谢大佬指点,小弟深表感谢<抱拳>
-----------------------------------------------------------------------------------------------------------

参考。1


  1. https://zhuanlan.zhihu.com/p/531899593 ↩︎

在 VLC 播放器中播放 RTSP 流

【中文标题】在 VLC 播放器中播放 RTSP 流【英文标题】:Playing RTSP stream in VLC player 【发布时间】:2011-08-18 08:29:37 【问题描述】:

我正在尝试用 java 制作一个简单的 rtsp 流服务器。服务器能够将视频正确地流式传输到自定义写入的播放器。

我无法在 vlc 媒体播放器中播放相同的流的问题。 当我启动 vlc 媒体播放器并输入流详细信息时,我的服务器正在显示 vlc 发出的以下请求:

OPTIONS rtsp://192.168.2.8:8210/movie.3gp RTSP/1.0
CSeq: 1
User-Agent: VLC media player (LIVE555 Streaming Media v2010.01.07)

作为回应,我将以下内容发送给 vlc 播放器:

RTSP/1.0 200 OK
Supported:  play.basic, con.persistent
CSeq: 1
Server:  Android mini RTSP Server
Public: DESCRIBE, SETUP, TEARDOWN, PLAY, PAUSE

此后,vlc 媒体播放器向我发送null token,但我期待DESCRIBESETUP 令牌。

知道为什么 vlc 向我发送null token 吗?在对 vlc 的请求的响应中,我有什么遗漏吗?

【问题讨论】:

删除标头值前的多余空格 【参考方案1】:

尽量靠近 rfc。 http://www.ietf.org/rfc/rfc2326.txt

尝试删除 Supported: 和 Server: 行。

【讨论】:

以上是关于vue中播放rtsp流的主要内容,如果未能解决你的问题,请参考以下文章

在 VLC 播放器中播放 RTSP 流

Vue.js使用Blob的方式实现excel表格的下载(流文件下载)

在网页上用websocket播放RTSP实时流 性能优化 进阶方案

vue.js实现audio播放amr格式音频

vue.js+iview+node.js 前端快速开发框架搭建实战

入门到精通❤️「Java工程师全栈知识路线」