第二十一篇

最新推荐文章于 2023-05-09 16:55:25 发布

ouhou999

最新推荐文章于 2023-05-09 16:55:25 发布

阅读量319

点赞数

原文链接：https://www.cnblogs.com/leon_yang/p/13966469.html

版权

一、H5播放器，使用腾讯云 Web 超级播放器 TCPlayerLite
TCPlayerLite 是为了解决在手机浏览器和 PC 浏览器上播放音视频流的问题，它使的视频内容可以不依赖用户安装 App，就能在朋友圈和微博等社交平台进行传播。

基础知识
对接前需要了解如下基础知识：

直播和点播
直播视频源是实时的，一旦主播停播，直播地址就失去意义，而且由于是实时直播，所以播放器在播直播视频的时候是没有进度条的。
点播视频源是某个服务器上的文件，只要文件没有被提供方删除，就可以随时播放，而且由于整个视频都在服务器上，所以播放器在播点播视频的时候是有进度条的。

协议支持
TCPlayerLite 的视频播放能力本身不是网页代码实现的，而是靠浏览器支持，所以其兼容性不像我们想象的那么好，因此，不是所有的手机浏览器都能有符合预期的表现。一般用于网页直播的视频源地址是以 M3U8 结尾的地址，我们称其为 HLS (HTTP Live Streaming)，这是苹果推出的标准，目前各种手机浏览器产品对这种格式的兼容性也最好，但它有个问题：延迟比较大，一般是20s - 30s左右的延迟。

对于 PC 浏览器，因为其目前还没有抛弃 Flash 控件，而 Flash 控件支持的视频源格式较多，并且浏览器上的 Flash 控件都是 Adobe 自己研发，所以兼容性很好。

视频协议用途 URL 地址格式 PC 浏览器移动浏览器
HLS（M3U8）可用于直播 http://xxx.liveplay.myqcloud.com/xxx.m3u8 支持支持
HLS（M3U8）可用于点播 http://xxx.vod.myqcloud.com/xxx.m3u8 支持支持
FLV 可用于直播 http://xxx.liveplay.myqcloud.com/xxx.flv 支持不支持
FLV 可用于点播 http://xxx.vod.myqcloud.com/xxx.flv 支持不支持
RTMP 只适用直播 rtmp://xxx.liveplay.myqcloud.com/live/xxx 支持不支持
MP4 只适用点播 http://xxx.vod.myqcloud.com/xxx.mp4 支持支持

二、（直播推流）
从视频直播的通信协议可以看出，适合做直播的只有HLS 和 FLV格式。

这里我们选择海康的网络摄像头进行实战。

海康的网络摄像头支持（RTSP）推流，推流地址如下：

1、老版本

URL规定：

rtsp://username:password@//ch/

注：VLC可以支持解析URL里的用户名密码，实际发给设备的RTSP请求不支持带用户名密码。

举例说明：

DS-9016HF-ST的IP通道01主码流：

rtsp://admin:12345@172.6.22.106:554/h264/ch33/main/av_stream

DS-9016HF-ST的模拟通道01子码流：

rtsp://admin:12345@172.6.22.106:554/h264/ch1/sub/av_stream

DS-9016HF-ST的零通道主码流（零通道无子码流）：

rtsp://admin:12345@172.6.22.106:554/h264/ch0/main/av_stream

DS-2DF7274-A的第三码流：

rtsp://admin:12345@172.6.10.11:554/h264/ch1/stream3/av_stream

2、新版本

URL规定：

rtsp://username:password@

:/Streaming/Channels/(?parm1=value1&parm2-=value2…)

注：VLC可以支持解析URL里的用户名密码，实际发给设备的RTSP请求不支持带用户名密码。

详细描述：

举例说明：

DS-9632N-ST的IP通道01主码流：

rtsp://admin:12345@172.6.22.234:554/Streaming/Channels/101?transportmode=unicast

DS-9016HF-ST的IP通道01主码流：

rtsp://admin:12345@172.6.22.106:554/Streaming/Channels/1701?transportmode=unicast

DS-9016HF-ST的模拟通道01子码流：

rtsp://admin:12345@172.6.22.106:554/Streaming/Channels/102?transportmode=unicast

(单播)

rtsp://admin:12345@172.6.22.106:554/Streaming/Channels/102?transportmode=multicast

(多播)

rtsp://admin:12345@172.6.22.106:554/Streaming/Channels/102 (?后面可省略，默认单播)

DS-9016HF-ST的零通道主码流（零通道无子码流）：

rtsp://admin:12345@172.6.22.106:554/Streaming/Channels/001

DS-2DF7274-A的第三码流：

rtsp://admin:12345@172.6.10.11:554/Streaming/Channels/103

注：前面老URL，NVR（>=64路的除外）的IP通道从33开始；新URL，通道号全部按

顺序从1开始。

三、下载FFmepg

（ffmpeg官网快捷通道：http://ffmpeg.org/）下载地址一：https://github.com/BtbN/FFmpeg-Builds/releases
ffmpeg 命令参考：https://www.cnblogs.com/eguid/p/10195559.html
下载完成后，解压，直接在文件夹地址输入cmd ，如下图：

1、m3u8 模式输出，直接输出到指定目录（IIS 站点目录），如下在cmd界面输入命令：

1
ffmpeg -rtsp_transport tcp -i “rtsp://admin:密码@192.168.11.64:554/h264/ch33/main/av_stream” -fflags flush_packets -max_delay 1 -an -flags -global_header -hls_time 1 -hls_list_size 3 -hls_wrap 3 -vcodec copy -s 216x384 -b 1024k -y C:\Users\xxxx\Desktop\KB\channel101.m3u8

2、执行成功后，ffmpeg会对rstp推流进行切片保存（命令说明请自行百度ffmpeg说明文档）效果如下：

在目录生成HLS直播文件（文件如何使用，后续说明）如下，至此，摄像头rtsp转hls流完成。

3、同样，rtsp转flv，执行如下命令即可：

1
ffmpeg -i rtsp://admin:密码@192.168.11.64:554/h264/ch33/main/av_stream -vcodec h264 -f flv -acodec aac -ac 2 C:\Users\xxx\Desktop\KB\eguid.flv

效果如下，指令会在目录生成flv流文件

视频转换完成，下面，让我们开始起飞，让视频流能够通过web播放器输出。

四、web播放器查看视频流
1、（前面的视频流媒体文件已经输出到IIS目录，当然IIS里面已经添加flv,m3u8 的mime类型）

2、IIS目录创建index.html 插入如下代码：

TCPlayerLite 播放器的具体用法，请自行查看：https://cloud.tencent.com/document/product/454/7503

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

<script type="text/javascript">

     

    $(document).ready(function () {
        //var w = $(this).width();
        //var h = $(this).height();
        //$("#id_test_video").css({ style: "width:" + w + "px;height:" + h + "px;" });
        var player = new TcPlayer('id_test_video', {
            "live": true,
            listener: function (e) {
                console.log(e);
                if (e.type == 'error' || e.type == 'ended') {
                    window.setTimeout(function () {
                        player.load();//进行重连
                        player.play();
                    }, 3000);
                }
            },
            "controls": "none",
            "m3u8": "http://192.168.11.122:808/channel101.m3u8?t="+Math.random(),
            //"flv": "http://192.168.11.122:808/eguid.flv", //增加了一个 flv 的播放地址，用于PC平台的播放 请替换成实际可用的播放地址
            //"autoplay" : true,      //iOS 下 safari 浏览器，以及大部分移动端浏览器是不开放视频自动播放这个能力的
            "poster": { "style": "cover", "src": "start.png" },
            width: 695,
            height:391
        });
        $(this).click(function () {
            player.play();
        });
    });
</script>

ouhou999

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第二十一篇

一、H5播放器，使用腾讯云 Web 超级播放器 TCPlayerLiteTCPlayerLite 是为了解决在手机浏览器和 PC 浏览器上播放音视频流的问题，它使的视频内容可以不依赖用户安装 App，就能在朋友圈和微博等社交平台进行传播。基础知识对接前需要了解如下基础知识：直播和点播直播视频源是实时的，一旦主播停播，直播地址就失去意义，而且由于是实时直播，所以播放器在播直播视频的时候是没有进度条的。点播视频源是某个服务器上的文件，只要文件没有被提供方删除，就可以随时播放，而且由于整个视频都在服
复制链接

扫一扫