前言

接上一篇文章 rtsp视频服务转换为 rtmp服务转换为前端可用的服务

继续讨论前端播放 rtsp 视频服务

rtsp视频服务转换为 rtmp服务转换为前端可用的服务会使用到 ffmpeg 来实现 rtsp 服务转换为 rtmp 服务, nginx-http-flv 来实现 rtmp 服务转换为 http-flv 服务, 因此前端可以直接播放视频

这里使用 node 作为后台服务, 使用 ffmpeg 基于 websocket 协议将 rtsp 直接转换为前端可用的 flv 视频数据

我们这里参考的代码来自于 GitHub - LorinHan/flvjs_test: 采用flvjs实现摄像头直播

主要包含一个 node 作为代理服务器, 加上一个测试的前端项目

node 代理服务器

index.js 如下, 代码来自于 GitHub - LorinHan/flvjs_test: 采用flvjs实现摄像头直播中的 index.js,并做了一定的调整

服务启动步骤如下

npm install
node index.js

其中的主要处理为, 启动一个 websocket 服务器, 代理以 "/rtsp" 打头的 websocket 请求, 然后获取查询字符串中的 url, 基于 ffmpeg 将 rtsp 视频数据转换为 flv 视频数据, 然后响应回去

ffmpeg -re -i $rtspUrl -rtsp_transport tcp -buffer_size 102400 -vcodec copy -an -f flv
// 然后将转换之后的结果响应给 客户端

var express =  require("express");
var expressWebSocket = require("express-ws");
var ffmpeg = require("fluent-ffmpeg");
ffmpeg.setFfmpegPath("ffmpeg");
var webSocketStream = require("websocket-stream/stream");
var WebSocket = require("websocket-stream");
var http = require("http");// config
let rtspServerPort = 9999function localServer() {let app = express();app.use(express.static(__dirname));expressWebSocket(app, null, {perMessageDeflate: true});app.ws("/rtsp/:id/", rtspRequestHandle)app.listen(rtspServerPort);console.log("express listened on port : " + rtspServerPort)
}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();

测试的 HelloWorld.vue

如下 rtsp 服务为 rtsp://localhost:8554/rtsp/test_rtsp

创建一个 flvPlayer, 视频输入为 ws://localhost:9999/rtsp/xxx/?url=rtsp://localhost:8554/rtsp/test_rtsp

然后启动项目, 能够正常看到视频即成功

<template><div class="video-wrapper"><video class="demo-video" ref="player" muted autoplay></video></div>
</template>
<script>
import flvjs from "flv.js";
export default {data () {return {id: "xxx",rtsp: "rtsp://localhost:8554/rtsp/test_rtsp",player: null}},mounted () {if (flvjs.isSupported()) {let video = this.$refs.player;if (video) {this.player = flvjs.createPlayer({type: "flv",isLive: true,url: `ws://localhost:9999/rtsp/${this.id}/?url=${this.rtsp}`});this.player.attachMediaElement(video);try {this.player.load();this.player.play();} catch (error) {console.log(error);}}}},beforeDestroy () {this.player.destory();}
}
</script>
<style>.video-wrapper {max-width: 880px;max-height: 660px;border:1px solid red;}.demo-video {max-width: 880px;max-height: 660px;}
</style>

测试页面展示效果如下

FlvUsage.html

也可以使用一个普通的 html 来进行测试

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><script src="https://cdn.bootcdn.net/ajax/libs/flv.js/1.6.2/flv.min.js"></script><!--  <script src="./js/flv.min.js"></script>--><style>body, center {padding: 0;margin: 0;}.v-container {width: 640px;height: 360px;border: solid 1px red;}video {width: 100%;height: 100%;}</style></head>
<body>
<div class="v-container"><video id="player1" muted autoplay="autoplay" preload="auto" controls="controls"></video></div><script>if (flvjs.isSupported()) {var videoElement = document.getElementById('player1');var flvPlayer = flvjs.createPlayer({type: 'flv',url: 'ws://localhost:9999/rtsp/xxx/?url=rtsp://localhost:8554/rtsp/test_rtsp'});flvPlayer.attachMediaElement(videoElement);flvPlayer.load();}</script></body>
</html>

测试页面展示效果如下

完

13 rtsp视频服务基于node+ffmpeg 转换为 flv 视频服务相关推荐

采用ffmpeg转换flv视频到mp4格式时报错的解决方案
1. ffmpeg支持如下格式转换视频 $ffmpeg -i 源文件目标文件如: $ffmpeg -i hello.flv hello.mpeg $ffmpeg -i hello.flv hel ...
基于 Node.js 简易本地 http 服务
基于Node.js的简易http服务器 Python的 http 模块可以直接开启一个简单的http服务器,平时用来测试很方便 python -m http.server 但是如此开启的服务器不支持p ...
PHP中利用Ffmpeg获得flv视频缩略图和播放时间
为什么80%的码农都做不了架构师?>>> 这里简单说一下:FFmpeg是用于录制.转换和流化音频和视频的完整解决方案,一套领先的音/视频编解码类库.官方正式版ffmpeg不支持 ...
Java 使用 ffmpeg.exe ( FLV视频转换器 )
最近公司的网站需要一些视频功能 , 在本地测试了不同格式的视频 , 但是有些格式的视频在浏览器上是不支持的 , 所以就想到了将视频格式转换统一. 找啊找就找到了这个 . ffmpeg.exe是一个源于 ...
梨视频：基于阿里云E-MapReduce搭建视频推荐系统实践
专注新闻资讯的梨视频近来表现亮眼. 梨视频由前澎湃新闻掌门人邱兵创立. 在上线之前,它就获得了黎瑞刚华人文化近1亿美元投资,旗下<微辣>栏目总播放量已经超过4亿,并在上线1个月后获得&qu ...
梨视频：基于阿里云E-MapReduce搭建视频推荐系统的实践
专注新闻资讯的梨视频近来表现亮眼. 梨视频由前澎湃新闻掌门人邱兵创立. 在上线之前,它就获得了黎瑞刚华人文化近1亿美元投资,旗下<微辣>栏目总播放量已经超过4亿,并在上线1个月后获得&qu ...
windows用ffmpeg将flv视频转换为mp4
在ffmpeg.exe所在文件夹下执行: .\ffmpeg -i D:\000.flv -threads 5 -preset ultrafast D:\666.mp4 注意: .\ffmpeg 的点 ...
Linux视频切片m3u8,使用ffmpeg+nginx使用视频切片播放
服务器:CentOS7 安装依赖脚本 # Script ffmpeg compile for Centos 7.x # Alvaro Bustos, thanks to Hunter. # Updat ...
python 微信视频_基于Python快速整理微信视频与图片
photoes.jpg 作为超级APP,微信已经成了移动互联网的入口.而我们也早已习惯通过微信收发图片与视频等多媒体文件.身为一名屌丝通信狗,经常出差海外,跟家人的沟通方式主要就靠微信了,每当累了或抑 ...

13 rtsp视频服务基于node+ffmpeg 转换为 flv 视频服务

前言

node 代理服务器

测试的 HelloWorld.vue

FlvUsage.html

13 rtsp视频服务基于node+ffmpeg 转换为 flv 视频服务相关推荐

最新文章

热门文章

13 rtsp视频服务 基于node+ffmpeg 转换为 flv 视频服务

前言

node 代理服务器

测试的 HelloWorld.vue

FlvUsage.html

13 rtsp视频服务 基于node+ffmpeg 转换为 flv 视频服务相关推荐

最新文章

热门文章

13 rtsp视频服务基于node+ffmpeg 转换为 flv 视频服务

13 rtsp视频服务基于node+ffmpeg 转换为 flv 视频服务相关推荐