前言
由于近期项目需求, 需实现在浏览器上实时预览接收 UDP 视频流信息此功能若在 VLC 上可轻松播放, 奈何由于 ChromeFirefox 版本的升级, 渐渐浏览器不支持外部插件, 因而使用 VLC web 插件也成为泡影在前辈指导下, 采用 FFmpeg + SRS + ckplayer 的方式实现了该功能
这种方式实现原理, 主要是通过以下 3 个步骤完成:
1FFmpeg 将 UDP 视频流转换成 rtmp 流并推送至 SRS 服务器;
2SRS 作为 rtmp 服务器向其他客户端分发该视频流资源;
3ckplayer 作为客户端接收 rtmp 资源并播放视频
环境准备
操作系统 ubuntu 14.04
浏览器 firefox(需安装 flash,ckplayer 用于接收 rtmp 协议时需 flash 支持)
- SRS (资源下载: SRS v2.0.243 is released , 安装教程: RTMP 部署实例 )
- FFmpeg (安装教程: ubuntu14 apt-get 简单 安装 ffmpeg)
- ckplayer(源码地址: ckplayerX , 可将下载完的 ckplayer.zip 解压至 web 服务器内)
- VLC
实验步骤
一开启 SRS rtmp 服务器
见: RTMP 部署实例
二 VLC 模拟发送 UDP 视频流
1) 选择一个视频作为 UDP 视频源
2)NEXT
3) 选择以 UDP 协议的形式传输视频流
4) 填入相应的 IP 地址及端口, 这里 IP 为 239.1.1.1 组播地址, 端口为 2222
5) 选择第一种形式进行转码 H.264+MP3(MP4) , 实测只有这种编码方式, ckplayer 才能正常播放
6) 点击 Stream, 开始传输视频流
三 ckplayer 部署
代码结构目录 (web 服务器目录下):
- ckplayer
- ckplayer.js
- ckplayer.min.js
- ckplayer.swf
- ckplayer.xml
- language.xml
- style.xml
- ckplayer.zip
- crossdomain.xml
- definition.html
- exec
- excel.php
- stopFFmpeg.php
- flashplayer.html
- iframe.html
- index.html
- js
- bootstrap.min.js
- bootstrap-table.js
- intputGroup.js
- jquery-3.1.1.min.js
- jtopo-0.4.6-min.js
- xx.html
- material
- logo.png
- mydream_en1800_1010_01.png
- mydream_en1800_1010_02.png
- poster.jpg
- srt.srt
- README.md
- test.html
- flashplayer.html(用于播放 rtmp 流)
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>ckplayer</title>
- <script type="text/javascript" src="ckplayer/ckplayer.js"></script>
- <style type="text/CSS">body{margin:0;padding:0px;font-family:"Microsoft YaHei",YaHei,"微软雅黑",SimHei,"黑体";font-size:14px}</style>
- <script src="js/jquery-3.1.1.min.js"></script>
- </head>
- <body>
- <div id="video" style="width: 1000px; height: 800px;"></div>
- <script type="text/javascript">
- var videoObject = {
- container: '#video', // 容器的 ID 或 className
- variable: 'player',// 播放函数名称
- flashplayer:true,
- poster:'material/poster.jpg',// 封面图片
- loaded: 'loadedHandler',
- video: 'rtmp://localhost/live/livestream'
- }
- var player = new ckplayer(videoObject);
- </script>
- </body>
- </html>
输入地址: http://localhost/ckplayer/flashplayer.html, 打开该网页
四 FFmpeg 接收 UDP 视频流, 并转码成 rtmp 流发送至 SRS 服务器
打开一个终端, 输入以下命令, 利用 FFmpeg 进行转码
- ffmpeg -i udp://239.1.1.1:2222 -vcodec copy -acodec aac -ar 44100 -strict -2 -ac 1 -f flv -s 1280x720 -q 10 rtmp://192.168.204.132/live/livestream
- (其中上述代码中 udp://239.1.1.1:2222 代表源视频流, rtmp://192.168.204.132/live/livestream 代表 SRS rmtp 服务器地址)
运行结果
五用 ckplay 查看最终结果
来源: https://www.cnblogs.com/wpqwpq/p/8567847.html