前端播放rstp视频流、node-rtsp-stream-es6、jsmpeg

K歌、之王

已于 2023-03-07 17:13:29 修改

阅读量1.6k

点赞数

分类专栏： rstp 文章标签： 1024程序员节前端 ffmpeg html5

于 2022-10-24 15:18:19 首次发布

本文链接：https://blog.csdn.net/u010568976/article/details/127493187

版权

rstp 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

前端播放rstp视频流的另一个方法, 亲测可用。性能未知。

参考项目链接

https://github.com/Wifsimster/node-rtsp-stream-es6
https://github.com/phoboslab/jsmpeg
https://codesandbox.io/s/r1ue2

1、下载ffmpeg 、把bin加入window path

在这里插入图片描述

2、启动服务端

新建package.json、test.js 如下
在这里插入图片描述
package.json

{
  "name": "node-http-server",
  "version": "1.0.0",
  "description": "Node.js example server starter project",
  "main": "src/index.js",
  "scripts": {
    "start": "nodemon src/index.js"
  },
  "dependencies": {
    "express": "4.17.1",
    "ffmpeg": "^0.0.4",
    "node-rtsp-stream-jsmpeg": "0.0.2"
  },
  "devDependencies": {
    "nodemon": "1.18.4"
  },
  "keywords": []
}

test.js

var http = require("http");
var express = require("express");
var app = express();
var ffmpeg = require("ffmpeg");
const Stream = require("node-rtsp-stream-jsmpeg");

const options = {
    name: "streamName",
    url: "rtsp://admin:ggy1372333292@192.168.1.198:554/h264/ch1/main/av_stream",
    wsPort: 3333
};

const stream = new Stream(options);
stream.start();

http.Server(app).listen(5000, () => console.log("server start on port 5000"));

app.get("/", (req, res) => {
    res.send("hal");
});
app.get("/a", (req, res) => {
    res.send("a");
});

yarn install 、 yarn start启动服务端

3、客服端代码

这个jsmpeg.min.js在链接里面

<!DOCTYPE html>
<html>
<head>
	<title>JSMpeg Stream Client</title>
	<style type="text/css">
		html, body {
			background-color: #111;
			text-align: center;
		}
	</style>

</head>
<body>
	<canvas id="video-canvas"></canvas>
	<script type="text/javascript" src="jsmpeg.min.js"></script>
	<script type="text/javascript">
		var canvas = document.getElementById('video-canvas');
		var url = 'ws://'+document.location.hostname+':3333/';
		var player = new JSMpeg.Player(url, {canvas: canvas});
	</script>
</body>
</html>