使用express+vue在网页上显示RTSP流视频

这里使用的方式是将获取过来的RTSP流通过express转成flv格式，再在网页上呈现出来，自从flash淘汰之后，网页好像就不能直接出RTSP流了，之前可以使用vlc插件直接播放，现在不行咯。

使用的工具是vscode+node.js+ffmepg。

首先下载ffmepg https://github.com/BtbN/FFmpeg-Builds/releases

打开vscode，新建一个index.js文件,使用终端输入 npm init -y 初始化一个 package.json 文件,使用命令 npm install express -- save 下载 Express。

在index.js文件下写入：

var express =  require("express");
var expressWebSocket = require("express-ws");
var ffmpeg = require("fluent-ffmpeg");
ffmpeg.setFfmpegPath("D:/zhaxiang/ffmpeg-master-latest-win64-gpl/bin/ffmpeg");
var webSocketStream = require("websocket-stream/stream");
var WebSocket = require("websocket-stream");
var http = require("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);}
}
localServer();

这里的ffmpeg.setFfmpegPath里放的是你下载ffmepg的绝对路径。

再在index.js的同一级目录下新建文件夹，名字随便取吧，这里用来放前端数据，如何建不用多说吧，不会的自己补补吧。

前端代码：

<template><div><video class="demo-video" ref="player" muted autoplay></video></div>
</template>
<script>
import flvjs from "flv.js";
export default {data () {return {id: "1",rtsp: "",player: null}},mounted () {if (flvjs.isSupported()) {let video = this.$refs.player;if (video) {this.player = flvjs.createPlayer({type: "flv",isLive: true,hasAudio:false,hasAudio:false,hasVideo:true,url: `ws://localhost:8888/rtsp/${this.id}/?url=${this.rtsp}`});this.player.attachMediaElement(video);try {this.player.load();this.player.play();} catch (error) {console.log(error);};}// if (video) {//     this.player = flvjs.createPlayer({//         type: "flv",//         url: `/static/test.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>

前端代码中data中rtsp：下写的是你摄像头的IP地址，记得改。

一切准备就绪之后，在index.js目录下打开终端，输入

npm install express express-ws fluent-ffmpeg websocket-stream -S -D

再使用 node index.js 启动后端

再打开一个终端，进入前端目录下，输入：npm install flv.js -S -D

再输入npm run dev应该就能看到视频啦。

参考：

https://blog.csdn.net/F_angT/article/details/119027058

使用express+vue在网页上显示RTSP流视频相关推荐

3D模型在网页上显示
3D模型在网页上显示,这绝对是未来的趋势,也是热门.一部"阿凡达"让电影节发生了一次地震,让人们感到3D的时代到来.那么我们IT界呢?如果各位因工作时间繁忙,或者嫌上海世博会人山人 ...
图片的base64编码实现以及网页上显示
生成.解析base64编码的图片 //图片转化成base64字符串 public static String GetImageStr(<span style="font-family: ...
php导入qq数据txt代码,/谁有能都实现将excel文件导入到数据中，并在php网页上显示的源码啊，有的发送1091932879@qq.com,谢谢!...
PHP网页怎么导入Excel的数据参码如下: // 1.引用ExcelReader类文 require_once 'Excel/reader.php'; // 2.实例化读取Excel类 $data ...
Markdown转html在网页上显示
Markdown转html在网页上显示 1.需要安装的内容 npm install showdown showdown 详解 npm install showdown-katex showdown-k ...
html英文日期js,JS网页上显示中英文版日期时间(根据电脑上的时间)
JS网页上显示中英文版日期时间(根据电脑上的时间) <script language="javascript"> function shownowtime() { va ...
设计一个jsp页面，要求在网页上显示当前日期和时间，如果时间在6:00~12:00,输出“上午好”:如果时间在12:00 18:00, 输出“下午好”:
设计一个jsp页面,要求在网页上显示当前日期和时间,如果时间在6:00~12:00,输出"上午好":如果时间在12:00 18:00, 输出"下午好":如果时间 ...
html中加入emjio表情,html网页上显示emoji表情
前言做项目涉及表情在网页上显示.稍微研究了一下实现方案,整体思路不复杂,就是稍微涉及到一些新概念和新方法. 精灵图精灵图又称雪碧图,简单来说就是一种把很多小图片拼成一张大图的图片形式.下图就是表情 ...
在centos上安装httpd,并实现html文件和cgi文件在网页上显示，搭建静态web网页
在centos上安装httpd,并实现html文件和cgi文件在网页上显示简介 Apache-httpd的简介 Apache-httpd的安装 html文件和cgi文件的编写网页访问html和cg ...
使用JSP代码编写index.jsp文件在网页上显示数据库数据
使用JSP代码编写index.jsp文件在网页上显示数据库数据在index.jsp文件上使用JSP代码编写可以在网页上以表格的形式显示数据库内的数据需要创建一个项目因为需要用到关于JDBC的 ...

使用express+vue在网页上显示RTSP流视频

使用express+vue在网页上显示RTSP流视频相关推荐

最新文章

热门文章