手把手操作html中播放rtsp视频流

(1) H5中播放 rtsp 视频流

原文链接地址: https://my.oschina.net/chengpengvb/blog/1832469?from=singlemessage


这里使用的技术是 FFmpeg + nodejs + Jsmpeg + websockt 技术

具体操作步骤:

1. 准备工作

  • 下载 FFmpeg 【下载链接】: 用于视频解码
  • 下载 nodejs : 运行一个jsmpeg的js文件,在本地跑一个websocket 服务,或者连接后台的服务也可以

    node的安装自行百度,百度有很多详细教程

  • 下载 jsmpeg 【下载链接】: 运行主程序

2. webSocket模块安装

  • 在cmd控制台输入: npm install ws -g 出现下面文字说明安装正确

手把手操作html中播放rtsp视频流_第1张图片
*

3. FFmpeg 安装使用步骤 (如果有兴趣的话可以在 【github】上了解下源码)

  • 将下载的压缩包解压到放到盘符里面, 在这里我解压到的是 D盘
    手把手操作html中播放rtsp视频流_第2张图片
  • 配置变量环境:把ffmpeg下的bin配置到系统path变量里面,根据自己不同的路径配置

    右击我的电脑选择属性 =》 高级系统设置 =》 环境变量 。 如下图:

手把手操作html中播放rtsp视频流_第3张图片

选择Path后(点击Path) =》 点击编辑。 如下图:

手把手操作html中播放rtsp视频流_第4张图片

手把手操作html中播放rtsp视频流_第5张图片
4. 配置完成

  • 使用 window + R 键打开控制台, 输入cmd 打开 黑色编辑框,输入 ffmpeg。
  • 下图是配置成功的状态

手把手操作html中播放rtsp视频流_第6张图片

5. 运行 jsmpeg

  • 将下载的 jsmpeg包 解压到 盘符下面, 我这里解压到的是 D 盘

手把手操作html中播放rtsp视频流_第7张图片

  • 解压好后文件中会出现有一个websocket-relay.js,我们主要运行这个js文件
    手把手操作html中播放rtsp视频流_第8张图片

  • 运行websocket-relay.js

在另一个cmd控制台cd到jsmpeg所在路径


执行: node websocket-relay.js supersecret 8081 8082


说明:Supersecret是密码 、8081是ffmpeg推送端口 、 8082是前端webSocket端口


注意:出现下图的文字说明执行正确

手把手操作html中播放rtsp视频流_第9张图片

如果报错 “wx模块不能使用”,npm init 初始,再重新安装一次”wx模块“

6. 运行 ffmpeg

在打开一个新的 cmd 窗口执行下面代码,。
如果进行了 步骤3的 配置变量,运行ffmepg 将不用切换到该文件下执行操作,直接cmd 运行下面代码即可

  • ffmpeg -i “你的rtspurl” -q 0 -f mpegts -codec:v mpeg1video -s 1366x768 http://127.0.0.1:8081/supersecret

  • 1366x768 是视频 大小尺寸

  • http://127.0.0.1:8081/supersecret 是上图中运行的本地服务

  • 出现下图运行证明成功

手把手操作html中播放rtsp视频流_第10张图片

  • 运行成功后,打开jsmpeg文件夹里面的view-stream.html页面。如果没有问题应该出现下面的画面,到此为止

  • 多个视频流启动多个进程就可以了

如文章中有错误地方,望请指出!!! 谢谢。 原谅我还是一只小菜鸟(#.#)

手把手操作html中播放rtsp视频流_第11张图片

你可能感兴趣的:(js,VUe,rtsp)