前提:需要确认你的服务器环境中是否安装了ffmpeg这个工具,因为转码的核心其实就是通过 ffmpeg命令 转码,需要你通过在命令行里输入 ffmpeg
来确认。
安装参考:https://zhuanlan.zhihu.com/p/324472015
一、node服务搭建
参考node版本: v14.20.0
node搭建转码服务器
// const ffmpegPath = require('@ffmpeg-installer/ffmpeg'); // 自动为当前node服务所在的系统安装ffmpeg const ffmpeg = require('fluent-ffmpeg'); const express = require('express'); const webSocketStream = require('websocket-stream/stream'); const expressWebSocket = require('express-ws'); // ffmpeg.setFfmpegPath(ffmpegPath.path); /** * 创建一个后端服务 */ function createServer() { const app = express(); app.use(express.static(__dirname)); expressWebSocket(app, null, { perMessageDeflate: true }); app.ws('/rtsp/', rtspToFlvHandle); app.get('/', (req, response) => { response.send('当你看到这个页面的时候说明rtsp流媒体服务正常启动中......'); }); app.listen(8100, () => { console.log('转换rtsp流媒体服务启动了,服务端口号为8100'); }); } /** * rtsp 转换 flv 的处理函数 * @param ws * @param req */ function rtspToFlvHandle(ws, req) { const stream = webSocketStream(ws, { binary: true, browserBufferTimeout: 1000000 }, { browserBufferTimeout: 1000000 }); console.log('req.query.url',req.query.url); // const url = req.query.url; const url = new Buffer.from(req.query.url, 'base64').toString(); // 前端对rtsp url进行了base64编码,此处进行解码 // console.log('rtsp url:', url); try { console.log('进来了'); ffmpeg(url) .addInputOption( '-rtsp_transport', 'tcp', '-buffer_size', '102400' ) .on('start', (commandLine) => { // commandLine 是完整的ffmpeg命令 console.log(commandLine, '转码 开始'); }) .on('codecData', function (data) { console.log(data, '转码中......'); }) .on('progress', function (progress) { // console.log(progress,'转码进度') }) .on('error', function (err, a, b) { console.log(url, '转码 错误: ', err.message); console.log('输入错误', a); console.log('输出错误', b); }) .on('end', function () { console.log(url, '转码 结束!'); }) .addOutputOption( '-threads', '4', // 一些降低延迟的配置参数 '-tune', 'zerolatency', '-preset', 'ultrafast' ) .outputFormat('flv') // 转换为flv格式 .videoCodec('libx264') // ffmpeg无法直接将h265转换为flv的,故需要先将h265转换为h264,然后再转换为flv .withSize('6%') // 转换之后的视频分辨率原来的50%, 如果转换出来的视频仍然延迟高,可按照文档上面的描述,自行降低分辨率 .noAudio() // 去除声音 .pipe(stream); } catch (error) { console.log('抛出异常', error); } } createServer();
vue代码:
<template> <div class="wrap"> <video class="video" muted autoplay controls ref="player"></video> </div> </template> <script> import flvjs from 'flv.js' // 引入flvjs export default { data () { return { player: null } }, mounted () { // 如果浏览器支持flvjs,则执行相应的程序 if (flvjs.isSupported()) { // 准备监控设备流地址 const url = 'rtsp://admin:[email protected]:554/Streaming/Channels/101?transportmode=unicast' // 创建一个flvjs实例 // 下面的ws://localhost:8888换成你搭建的websocket服务地址,后面加上设备流地址 this.player = flvjs.createPlayer({ type: 'flv', isLive: true,
url: `ws://localhost:8100/rtsp?url=${window.btoa(url)}`
}) this.player.on('error', (e) => { console.log(e) }) // 将实例挂载到video元素上面 this.player.attachMediaElement(this.$refs.player) try { // 开始运行加载 只要流地址正常 就可以在h5页面中播放出画面了 this.player.load() this.player.play() } catch (error) { console.log(error) } } }, beforeDestroy () { // 页面销毁前 关闭flvjs this.player.destroy() } } </script> <style lang="scss" scoped> .wrap{ .video { width: 300px; height: 300px; } } </style>
视频流demo地址参考: https://juejin.cn/post/6855577308271476743
参考:
https://juejin.cn/post/6908641550046068744#heading-1
https://juejin.cn/post/7124188097617051685#heading-9
标签:node,console,log,url,rtsp,js,const,websocket,ffmpeg From: https://www.cnblogs.com/chunying/p/16821738.html