h5 推流rstp

最新推荐文章于 2023-08-17 10:27:18 发布

A873054267

最新推荐文章于 2023-08-17 10:27:18 发布

阅读量840

点赞数 1

分类专栏： javascript 文章标签： H5 RSTP 推流

本文链接：https://blog.csdn.net/a873054267/article/details/116447949

版权

javascript 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

网上关于该需求的博客很多，但能直接用的很少，经个人实践后提供一个最简版本；

思路是基于B站的开源播放器flv.js 和后台 ffmpeg转换

express工程

package.json

{
  "name": "express",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.17.1",
    "express-ws": "^4.0.0",
    "fluent-ffmpeg": "^2.1.2",
    "websocket-stream": "^5.5.2"
  }
}

index.js

var express = require('express')
var expressWebSocket = require('express-ws')
var ffmpeg = require('fluent-ffmpeg')
const webSocketStream = require("websocket-stream/stream");
let server;
function localServer() {
  server = express();
  server.use(express.static(__dirname));
  expressWebSocket(server, undefined, {
    perMessageDeflate: true
  });
  server.ws("/rtsp/:id/", rtspRequestHandle);
  server.listen(8888);
}
function rtspRequestHandle(ws, req) {
  let url = req.query.url;
  console.log("rtsp url:", url);
  console.log("rtsp params:", req.params);
  const stream = webSocketStream(ws, {
      binary: true
  });
  url = `rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov`
  console.log("rtsp url:", url);
  let ffmpegCommand = ffmpeg(url)
    .addInputOption("-analyzeduration", "100000", "-max_delay", "1000000")
    .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);
        stream.end();
    })
    .on("end", function () {
        console.log(url, "Stream end!");
        stream.end();
    })
    .outputFormat("flv").videoCodec("copy").noAudio()
  stream.on("close", function () {
    ffmpegCommand.kill('SIGKILL');
  });
  try {
      ffmpegCommand.pipe(stream);
  } catch (error) {
      console.log(error);
  }
}

localServer()
console.log('正在监听8888端口')

然后在相应的目录执行node index.js即可启动rstp的推流服务

前端调用代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/flv.js/1.5.0/flv.min.js"></script>
    <style>
        #cs{
            width:300px;
            height: 600px;
           
        }
    </style>
</head>
<body>
<div id="cs">
		<button type="button" onclick="play()">开始直播</button>
    <video class="demo-video" ref="player" id = 'vedio'></video>
</div>
<script>

    let video = document.getElementById('vedio');
    let player
    if (video) {
       player = flvjs.createPlayer({
            type: "flv",
            isLive: true,
             url: `ws://127.0.0.1:8888/rtsp/1/?url=rtsp://127.0.0.1:8554/changan.E01.sdp`
        });
        player.attachMediaElement(video);
		            window.player = player

        try {
             player.load();
           // window.player = player
        } catch (error) {
            console.log(error);
        };
    }
	function play(){
	player.play()
	}
</script>
</body>
</html>

A873054267

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
3
评论
h5 推流rstp

网上关于该需求的博客很多，但能直接用的很少，经个人实践后提供一个最简版本；思路是基于B站的开源播放器flv.js和后台 ffffmpeg转换express工程package.json{ "name": "express", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" &...
复制链接

扫一扫