网页无插件播放RTSP流媒体
1、前期准备：
1.下载node.js：https://nodejs.org/zh-cn/
2.下载ffmpeg：http://ffmpeg.org/download.html
3.下载node-rtsp-stream：https://www.npmjs.com/package/node-rtsp-stream
2、安装，配置环境变量
1.安装node.msi软件包，安装完成会自动配置环境变量。
2.配置ffmpeg环境变量，将压缩包解压得到 ffmpeg-20200610-9dfb19b-win64-static，我的文件名更改为：C:\ffmpeg
配置完成后：在cmd命令窗口输入 ffmpeg，会显示下列信息，如果没有，重新下载ffmpeg设置环境变量
3.配置node，在桌面新建一个node文件夹，在cmd命令窗口输入 npm install node-rtsp-stream，会显示下列信息
在node文件夹中创建server.js
Stream = require('node-rtsp-stream')
stream = new Stream({
name: 'name',
streamUrl: 'rtsp://XXXX:554/h264/ch0/main/',
wsPort: 9999,
ffmpegOptions: { // options ffmpeg flags
'-stats': '', // an option with no neccessary value uses a blank string
'-r': 25, // options with required values specify the value after the key
'-s': '1024 768',
'-b:v': '4000k',
'-qscale': 1
}
})
在cmd命令窗口输入 node C:\Users\Administrator\Desktop\node\server.js，会显示下列信息
此窗口不能关闭，因为正在通过ffmpeg拉流
在jsmpeg-master文件夹中创建html
<html>
<body>
<canvas id="canvas"></canvas>
</body>
<script type="text/javascript" src="jsmpeg.min.js"></script>
<script type="text/javascript">
player = new JSMpeg.Player('ws://localhost:9999', {
canvas: document.getElementById('canvas') // Canvas should be a canvas DOM element
})
</script>
</html>
运行html就能显示效果了
所需要的软件已上传百度云：https://pan.baidu.com/s/1FpAxx5ZVSymPfCgzkDjE4g
提取码：z0c5