微网站制作软件,苏州网页设计培训,安顺做网站的公司,娱乐网站建设怎么样概述
这里记录一下如何让前端播放rtsp协议的视频流
项目中调用海康API#xff0c;生成的视频流(hls、ws、rtmp等)通过PotPlayer播放器都无法播放#xff0c;说明视频流有问题#xff0c;唯独rtsp视频流可以播放。
但是浏览器本身是无法播放rtsp视频的#xff0c;即使…概述
这里记录一下如何让前端播放rtsp协议的视频流
项目中调用海康API生成的视频流(hls、ws、rtmp等)通过PotPlayer播放器都无法播放说明视频流有问题唯独rtsp视频流可以播放。
但是浏览器本身是无法播放rtsp视频的即使是使用videojs、flvjs等工具。
网上的方案都是通过后端基于ffmpeg工具进行转码。那么我的理解是后端Node起到的是中转作用调用ffmpeg工具对传入的rtsp流进行转码再传给前端
这里记录整个过程与出现的问题解决
准备
需要三部分的准备
ffmpeg工具nodeJS转码前端播放
ffmpeg安装与配置
下载ffmpeg https://ffmpeg.org/download.html 下载并解压完成后 我这里放在 D:\DevelopSoftware\ffmpeg 配置环境变量 我的电脑 属性 高级系统设置 环境变量 Path 添加 D:\DevelopSoftware\ffmpeg\bin 打开cmd输入 ffmpeg 或者 ffmpeg -version 出现东西就说明OK了 如果 ffmpeg 不是内部或外部命令也不是可运行的程序或批处理文件, 重启cmd窗口, 还是不行的话网上搜一下吧
本节参考自 ffmpeg安装教程windows版
nodejs编写转码服务
先随便建个文件夹 npm i express express-ws fluent-ffmpeg websocket-stream 或者 yarn add express express-ws fluent-ffmpeg websocket-stream 新建 index.js
var express require(express)
var expressWebSocket require(express-ws)
var ffmpeg require(fluent-ffmpeg)
var webSocketStream require(websocket-stream/stream)
var WebSocket require(websocket-stream)
var http require(http)ffmpeg.setFfmpegPath(ffmpeg)// config
let rtspServerPort 2156function localServer() {let app express()app.use(express.static(__dirname))expressWebSocket(app, null, {perMessageDeflate: true})// :id是动态参数, 前端调用时传递, 可以去掉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.urlconsole.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()运行 node index.js 前端调用转码服务
新建 demo.html
!DOCTYPE html
htmlheadmeta http-equivContent-Type contenttext/html; charsetutf-8 /script srchttps://cdn.bootcdn.net/ajax/libs/flv.js/1.6.2/flv.min.js/script!-- script src./js/flv.min.js/script--stylebody,center {padding: 0;margin: 0;}.v-container {width: 640px;height: 360px;border: solid 1px red;}video {width: 100%;height: 100%;}/style/headbodydiv classv-containervideo idplayer1 muted autoplayautoplay preloadauto controlscontrols/video/divscriptif (flvjs.isSupported()) {var videoElement document.getElementById(player1)var flvPlayer flvjs.createPlayer({type: flv,url: ws://localhost:2156/rtsp/111/?urlrtsp://xxx.xxx.xxx:554/openUrl/jmQgiJi})flvPlayer.attachMediaElement(videoElement)flvPlayer.load()}/script/body
/html这两节源自 rtsp视频服务 基于nodeffmpeg 转换为 flv 视频服务
videojs flvjs使用 yarn add video.js flv.js videojs-flvjs-es6 import videojs from video.js
import flvjs from flv.js
import video.js/dist/video-js.css
import videojs-flvjs-es6let myPlayerconst initVideo (videoUrl) {// videojs初始化myPlayer videojs(document.querySelector(#videoBox), // video元素, vue2或vue3推荐使用ref方式{// poster: //vjs.zencdn.net/v/oceans.png,autoplay: muted, //自动播放controls: true, //用户可以与之交互的控件loop: true, //视频一结束就重新开始muted: true, //默认情况下将使所有音频静音// aspectRatio: 16:9, //显示比率techOrder: [html5, flvjs], // 兼容顺序flvjs: {mediaDataSource: {cors: true,withCredentials: false,},},controlBar: {remainingTimeDisplay: {displayNegative: false,},},playbackRates: [0.5, 1, 1.5, 2],},function onPlayerReady() {this.on(play, function () {console.log(视频开始播放)})this.on(pause, function () {console.log(视频暂停播放)})this.on(error, function () {console.log(加载错误)isError.value true})})// 播放myPlayer.reset()myPlayer.src({src: ws://localhost:2156/rtsp/?url videoUrl,type: video/x-flv,})// myPlayer.load(ws://localhost:2156/rtsp/1/?urlrtsp://xxxx:554/openUrl/rMYr6w0)myPlayer.play()
}video refvideoPlayer idvideoBox stylewidth:100%;height:100%;/video总结
海康平台支持多种协议的视频流如果流无法播放可能是设备配置或者分辨率或者… 出了问题
这种事情当然是让后端去处理咯是跟厂商联调还是怎么着关我前端啥事儿把精力用到更有意义的地方才是正解例如像我一样水一篇文章 Nice
当然尽量直接使用海康平台API返回的流转码始终是下策。
感谢各大佬的文章:
rtsp视频服务 基于nodeffmpeg 转换为 flv 视频服务
ffmpeg安装教程windows版
