网页无插件播放RTSP流媒体

最新推荐文章于 2024-06-03 14:23:10 发布

D丁先生

最新推荐文章于 2024-06-03 14:23:10 发布

阅读量3.5k

点赞数 7

分类专栏：配置

本文链接：https://blog.csdn.net/zs245584910/article/details/106712881

版权

配置专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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

解决视频没声音：可以参考https://github.com/phoboslab/jsmpeg 手动设置player.volume = 1

D丁先生

关注

7
点赞
踩
22

收藏

觉得还不错? 一键收藏
7
评论
网页无插件播放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-stream2、安装，配置环境变量 1.安装node.msi软件包，安装完成会自动配置环境变量。 2.配置ffmpeg环境变量，将压缩包解...
复制链接

扫一扫