m3u8直播流视频实时下载小记-HLS(Http Live Streaming)录屏

最近由于发现自己想回看的直播会被剪镜头,所以下定决心以后要学会录屏。但一般的录屏软件满足不了我的需要,主要是:

  1. 会录出鼠标操作、网络卡顿、水印等影响观感的画面
  2. 由于显示器和录屏软件的和原视频帧数可能不同步的问题,非常容易造成画面卡顿
  3. 体积远大于原视频,二压后画质失真重

通常来讲,能拿直播时的视频流就别真的屏幕录制。本来视频分段就都在缓存里,应该是有比较容易实现的办法做到实时保存的才对。

本文主要分为以下三个部分

m3u8简介

目前的各大流媒体平台视频(不管是直播还是回放)大多都会把视频切片为很小一段,长度可能10s左右,通常是.ts后缀的文件。而这一堆.ts文件的索引文件为m3u8文件。

一个通常的m3u8文件是如下格式

#EXTM3U
#EXT-X-VERSION:3
#EXT-X-TARGETDURATION:10
#EXT-X-MEDIA-SEQUENCE:0
#EXTINF:10.000000,
#EXT-X-PRIVINF:FILESIZE=3192240
https://website/xxx-00001.ts
#EXTINF:10.000000,
#EXT-X-PRIVINF:FILESIZE=3206904
https://website/xxx-00002.ts
#EXTINF:10.000000,
#EXT-X-PRIVINF:FILESIZE=2576164
https://website/xxx-00003.ts

也就是说,如果我们实时保存流媒体平台的视频,正常情况下,会保存一个.m3u8索引文件,和一堆.ts文件。有了这些文件我们可以直接使用支持m3u8的播放器(如IINA、VLC)进行播放。

m3u8是 HLS(HTTP Live Stream) HTTP直播流格式的基础。

保存视频分段与合并为MP4

工具准备:

  • ffmpeg:强大的命令行视频处理工具,网上有很多安装教程,这里不重复
  • Chrome插件-猫抓:资源嗅探插件,下载需要科学上网
  • 一个多线程的下载器(为了下载速度更快),如 aria2,网上有很多教程,这里不重复
  • 一个支持使用正则表达式批量替换文字的txt编辑器,如sublime、vscode

以上方法会比较硬核,傻瓜式的方法可只准备下面这一个

方法一:下载所有分段并合并(稍硬核)

首先打开一个视频网站,这里以优酷的综艺为例。
打开后点击右上角的猫抓插件,会看到一个m3u8文件,和一堆ts文件。

猫抓.png

首先我们可以先点下载按钮下载到本地 .m3u8 文件。

猫抓插件提供了对m3u8的解析,点击文件旁的放大镜就可以看见。

image.png

复制所有的内容,放到支持多线程的下载器里下载。

下载完成后,先整理一下本地的文件目录成如下

本地文件

(为了看起来更清晰,以上各个文件名我已修改)

然后修改m3u8文件。我这里使用的编辑器是vs code。

m3u8文件里的原链接是这样的:

https://valipl-vip.cp31.ott.cibntv.net/67756D6080932713CF4E/0300609724C6163EBF1C35DAC076221D-4673-49D8-A932-70FA-00001.ts?ccode=0502&duration=6237&expire=18000&psid=28ae2c9bf869cf6f9ae28c814098b5fe43346&ups_client_netip=3b4081be&ups_ts=1620641730&ups_userid=300380294&utid=Xd0WGHofZhACAXtwDp2%2BGj22&vid=XNTE0MDg5MTgyOA&sm=1&operate_type=1&dre=u38&si=78&eo=0&dst=1&iv=1&s=cbcad844c5894d209b9f&type=mp4hd3v3&bc=2&hotvt=1&t=d91e686d230165f&cug=1&rid=20000000DC17B06335EBB96917703D4A6B2DA12102000000&vkey=B84707ca23f9e5899f9b0b9d97e4d1851

非常的长。我们首先要做的,是去掉每一行 ? 之后的所有字符。使用正则表达式批量替换,在查询里输入\?.*?\n,替换为 \n 。注意要勾选正则表达式的符号。

replace query

然后要替换的是https://...内容,替换为本地的文件路径,让最后的剩下文件名指向本地的文件。

替换本地文件.png

替换后的.m3u8文件是这样的

m3u8文件

此时可以使用支持m3u8的播放器打开m3u8文件,观看是视频能否正常播放。

能正常播放后,使用ffmpeg合并为mp4,不用转码速度就很快

ffmpeg -i index.m3u8 -vcodec copy -acodec copy output.mp4

完成

缺点

对于回放的完整视频文件,通常会提供m3u8索引文件,但对于直播通常是没有m3u8索引的。这时候依然可以按上述方法下载所有分段,用ffmpeg进行合并。

但是直播时无法一次获取到所有ts的链接,而是边播边给。就算猫抓能批量复制链接,但为了防止直播时出什么意外(比如浏览器无响应了、突然断电),看一会儿就得存,无法好好享受直播,最后上千个文件的列表,也变得很麻烦。

使用 Stream-Recorder插件 傻瓜式保存

上一个方法的所有步骤,其实都能用这个插件搞定

使用上也很简单。视频播放开始后,点击这个按钮就行了,自动保存视频分段,同时合并为一个mp4。

Stream Recorder.png

简单介绍一下,这个插件主要有三个模式

  • Live:实时获取直播时的ts分段,可以没有索引文件自动合并
  • HLS:看回放时获取ts分段,可以没有索引文件自动合并。但是像B站这种用m4s非标准HLS的似乎用不了。
  • Capture:实时获取正在播放的HLS,直播回放均可,大部分视频格式都能用,兼容性最好。缺点是真的要一直播着。

也就是直播时使用Live抓取或Capture录屏,且可以自动合并视频音频,相当于直播时边看边存。

看回放时使用HLS或Capture保存视频。

DRM 版权保护问题

并不是所有的m3u8视频都能这么下载,有的经过了DRM(Digital rights management)的保护。这样的视频下载下来也是无法直接合并的。

有版权保护的视频,使用猫抓查看m3u8解析时,可以发现这么一行

DRM m3u8.png

Stream Recorder 也不支持加密视频的下载。

解密不在讨论范围内。

  • 4
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
在Uniapp项目中引入dplayer.js和hls.js可以实现解析和播放m3u8直播视频文件,具体步骤如下: 1. 首先,将dplayer.js和hls.js的相关文件引入到Uniapp项目中。可以通过npm安装这些库文件,也可以将它们下载到本地然后引入。 2. 在需要使用dplayer的页面中,使用uni.require将dplayer.js引入进来。例如,可以在页面的script标签中使用以下代码: ```javascript import DPlayer from '@/path/to/dplayer.js'; ``` 注意,@/path/to/指的是dplayer.js文件所在的路径。 3. 在页面中创建一个容器元素,用于渲染播放器。可以在template标签中添加一个div元素,例如: ```html <template> <div id="dplayer-container"></div> </template> ``` 这里给div元素设置一个id,以便之后使用。 4. 在页面的mounted钩子函数中,创建并初始化DPlayer实例。可以在mounted函数中添加以下代码: ```javascript mounted() { const container = document.getElementById('dplayer-container'); const options = { // 设置DPlayer的配置选项 }; const player = new DPlayer(options); player.init(); // 其他相关配置和操作 }, ``` 这里需要根据具体项目的需求,设置DPlayer的相关配置选项,比如视频的url、控制栏样式等。可以参考DPlayer的官方文档进行设置。 5. 使用hls.js解析m3u8直播视频文件。在设置DPlayer的配置选项时,可以通过设置type为'hls'来启用hls.js的解析功能。例如: ```javascript const options = { // 其他配置选项 type: 'hls', url: 'http://example.com/video.m3u8', }; ``` 这里的url需要替换为实际的m3u8直播视频文件的地址。 通过以上步骤,在Uniapp项目中成功引入dplayer.js和hls.js,并使用DPlayer来解析和播放m3u8直播视频文件。修改相应的配置选项,可以根据需求进行定制化操作。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值