手把手操作 H5中播放rtsp视频流 html5页面中播放 rtsp 视频流

胖敏
2,252 阅读2分钟

（1） H5中播放 rtsp 视频流

原文链接地址： my.oschina.net/chengpengvb…
这里使用的技术是 FFmpeg + nodejs + Jsmpeg + websockt 技术

具体操作步骤：

1. 准备工作

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

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

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

2. webSocket模块安装

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

*

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

  • 将下载的压缩包解压到放到盘符里面， 在这里我解压到的是 D盘
  • 配置变量环境：把ffmpeg下的bin配置到系统path变量里面，根据自己不同的路径配置

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

选择Path后（点击Path） =》 点击编辑。 如下图：

4. 配置完成

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

5. 运行 jsmpeg

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

  • 解压好后文件中会出现有一个websocket-relay.js，我们主要运行这个js文件

  • 运行websocket-relay.js

在另一个cmd控制台cd到jsmpeg所在路径
执行: node websocket-relay.js supersecret 8081 8082
说明：Supersecret是密码 、8081是ffmpeg推送端口 、 8082是前端webSocket端口
注意：出现下图的文字说明执行正确

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

6. 运行 ffmpeg

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

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

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

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

avatar
文章
阅读
粉丝