html5加载视频-HTML5视频直播一站式扫盲

2023-09-03 0 4,980 百度已收录

服务器返回 m3u8 播放列表。 该播放列表实时更新,通常一次提供5个数据URL。

客户端解析m3u8播放列表,然后依次请求各段的URL,获取ts数据流。

简单的过程

HLS直播延迟

我们知道hls合约将直播流分成短视频进行下载和播放,因此假设上面的列表包含5个ts文件,每个ts文件包含5秒的视频内容,则整体延迟为25秒。 因为当你听到那些视频的时候,主持人已经把视频录制好并上传了,所以会有这样的延迟。 事实上,您可以减少列表的厚度和单个 ts 文件的大小来增加延迟。 在极端情况下,您可以将列表宽度减少到 1,将 ts 持续时间减少到 1 秒。 不过,这会导致请求数量减少,减轻服务器压力。 当网速慢的时候,会造成更多的缓冲,所以苹果推荐的ts时长是10s,所以这会大大改变30s的延迟。 参考资料:(复制此链接并在浏览器中打开)

视频直播的整个流程是怎样的?

视频直播大致可以分为

视频录制端:通常是笔记本电脑上的音视频输入设备或手机上的摄像头、耳机。 目前主要是联通的手机视频。

视频播放器:可以是笔记本上的播放器,也可以是手机上的原生播放器,也可以是h5视频标签等,目前以手机上的原生播放器为主。

视频服务器端:通常是nginx服务器,用于接受视频录制端提供的视频源,同时向视频播放端提供流媒体服务。

简单的过程

如何采集音频、视频?

我们先澄清几个概念:

下面将使用ios上的摄像头采集音视频数据,主要分为以下步骤:

对于音视频的采集,在ios中,可以借助AVCaptureSession和AVCaptureDevice来采集原始音视频数据流。

对视频进行H264编码,对音频进行AAC编码,ios中已经有封装好的编码库来实现音频和视频的编码。

将编码后的音视频数据进行组装和封装;

建立RTMP连接并将其推送到服务器。

ps:由于大部分编码库都是C语言编译的html5加载视频,所以使用时需要编译。 对于ios,可以使用已经编译好的编码库。

x264编码:(复制此链接在浏览器中打开)

html5加载视频-HTML5视频直播一站式扫盲

faac编码:(操作同上)

ffmpeg编码:(操作同上)

如果要给视频添加一些特效,比如添加滤镜等,通常会在编码之前使用滤镜库,而这也会造成一些时间,导致视频数据上传有一定的延迟。

简单的过程

后面提到的ffmpeg是什么?

和之前的x264一样,ffmpeg也是一套编码库。 与Xvid类似,Xvid是基于MPEG4契约的编解码器。 解码合同。 通过设置参数,即可完成基于MPEG4、H.264等协议的编解码。 这里的演示使用x264编码库。

什么是 RTMP?

RealTimeMessagingProtocol(简称RTMP)是Macromedia开发的一套直播视频合约,现在属于Adobe。 与HLS一样,它可以应用于视频直播。 不同的是RTMP是基于flash的,不能在iOS浏览器中播放,而且实时性能比HLS要好。 所以这些合约通常用来上传视频流,即将视频流推送到服务器。

下面是hls和rtmp的对比:

html5加载视频-HTML5视频直播一站式扫盲

推流

简单来说,流媒体就是将我们已经编码好的音视频数据发送到视频流媒体服务器。 通常使用rtmp推流。 您可以使用第三方库librtmp-iOS进行推流。 librtmp封装了一些核心API。 供用户调用。 如果觉得麻烦,可以使用现成的iOS视频流SDK,也是基于RTMP的。 (复制此链接并在浏览器中打开)

流媒体服务器设置

一个简单的推送服务器搭建,因为我们上传的视频流都是基于RTMP合约的html5加载视频,所以服务器也必须支持RTMP,这需要以下步骤:

安装 nginx 服务器。

安装nginx的rtmp扩展,目前使用比较频繁(复制此链接并在浏览器中打开)

配置nginxconf文件:

rtmp{

服务器{

html5加载视频-HTML5视频直播一站式扫盲

Listen1935;#监听端口

块大小4000;

applicationhls{#rtmp推送请求路径

活着;

赫尔森;

hls_path/usr/local/var/www/hls;

hls_fragment5s;

重启nginx,写入rtmp推送地址为rtmp://ip:1935/hls/mystream,其中hls_path代表生成的.m3u8和ts文件存放的地址,hls_fragment代表切割时长,mysteam代表实例,即可以先设置一个自己生成的文件名。 更多配置请参考:(复制此链接并在浏览器中打开)

经过以上步骤,一个支持rtmp的视频服务器就基本实现了。

在html5页面上播放实时视频?

html5加载视频-HTML5视频直播一站式扫盲

简单来说,可以直接使用video标签来播放HLS合约的直播视频:

 

需要注意的是,video标签中添加了webkit-playsinline属性。 该属性是为了让视频在iOS的uiwebview上全屏播放。 默认情况下,iOS 会全屏播放视频。 您需要将 allowedInlineMediaPlayback=YES 设置为 uiwebview。 Videojs在业界已经比较成熟,可以根据不同的平台选择不同的策略。 比如ios使用video标签,pc使用flash等。

陷阱总结

按照上述步骤,作者写了一个demo,包含了从实现ios视频​​录制、采集、上传、nginx服务器下发直播、h5页面播放直播的一整套流程,总结了以下几个坑:

有些陷阱稍后会添加,有些需要贴出代码,但我先在这里列出。

产业支持

目前,腾讯云、百度云、阿里云都有基于视频直播的解决方案。 从视频录制到视频播放和流媒体,有一系列的SDK可以使用。 缺点是需要收费。 如果可能的话,您可以自己实现。 一套也不难。

演示地址:(复制此链接并在浏览器中打开)

参考:(复制此链接并在浏览器中打开)

本文为腾讯Bugly独家报道。 如有转载,请在文首显着位置注明作者和出处“腾讯Bugly()”。

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

悟空资源网 html5 html5加载视频-HTML5视频直播一站式扫盲 https://www.wkzy.net/game/191459.html

常见问题

相关文章

官方客服团队

为您解决烦忧 - 24小时在线 专业服务