EdgeOne 边缘函数—如何动态改写 M3U8 媒体文件

已于 2024-06-19 15:55:04 修改
阅读量725 收藏 29
点赞数 34
文章标签： 边缘计算
于 2024-06-18 16:09:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/EdgeOneTencent/article/details/139324213
版权

目前，各大主流厂商都推出了自己的边缘 Serverless 服务，如 CloudFlare Workers、 Vercel EdgeRuntime 等；腾讯云 EdgeOne 边缘函数提供了部署在边缘节点的 Serverless 代码执行环境，只需编写业务函数代码并设置触发规则，即可在靠近用户的边缘节点上弹性、安全地运行代码。

一、前言

HTTP Live Streaming（HLS）是一种基于HTTP 的流媒体传输协议，广泛应用于直播和点播视频内容的传输。M3U8 文件是 HLS 技术中的一部分，包含对多个媒体文件的引用（通常是 TS 文件）。

  1. 自适应流：HLS 支持自适应比特率流，可以根据观众的网络条件和设备性能自动调整视频质量。

  2. 广泛的设备和平台支持：HLS 由 Apple 开发，因此所有 Apple 设备都有原生支持。此外，许多其他平台和设备也支持HLS。这使得 HLS 成为跨平台流媒体传输的理想选择。

  3. 加密和 DRM 支持：HLS 支持内容加密，以及与各种数字版权管理（DRM）方案的集成。

  4. 实时和点播流：HLS 既可以用于实时流（如直播），也可以用于点播内容。这使得它在各种流媒体场景中都非常有用。

HLS 在流媒体领域得到了广泛的应用，无论是大型的流媒体服务，还是小型的独立开发者，都在使用这项技术。

二、边缘改写 M3U8 文件

在实际使用过程中，开发者可能需要对 M3U8 文件进行改写和处理，以下是一些常见的场景：

  1. 自定义播放列表：开发者可能需要根据用户的网络状况、设备性能或地理位置，选择不同的媒体流。

  2. 内容安全和访问控制：为了保护版权内容，开发者可能需要对 M3U8 文件进行处理，以实现加密、添加访问令牌等功能。

  3. 广告插入：在流媒体内容中插入广告是一种常见的商业模式。开发者可以通过修改 M3U8 文件，在视频播放的特定时间点插入广告片段。

对 M3U8 文件进行改写和处理可以帮助开发者实现更丰富、更灵活的流媒体应用场景。

得益于 EdgeOne 边缘函数的可编程能力，开发者可以在边缘节点是处理 M3U8 媒体文件，动态的修改和注入内容。

三、应用场景

下面我们以三个场景为例，了解如何使用边缘函数实现 动态改写 M3U8 文件。

1. 代码示例旨在展示边缘函数的能力，仅列举常见方案的基本实现；
2. 文章中涉及的代码可 私信获取查看；

3.1 添加 URL 鉴权

改写 M3U8 文件内容，为每个 TS 文件请求添加 URL 鉴权参数，主要用于保护视频内容的安全。以下是一些可能的场景：

  1. 付费内容：例如，一些视频网站可能会提供付费的电影、电视剧或直播服务。这些网站可以通过URL鉴权来确保只有付费用户才能访问内容；

  2. 会员内容：一些网站可能会为会员提供独家内容。这些网站可以使用 URL 鉴权来限制只有会员才能访问这些内容；

我们可以在边缘函数中实现动态添加 URL 鉴权参数，以达到保护内容的目的。

假定原始 M3U8 文件为：

#EXTM3U
#EXT-X-VERSION:3
#EXT-X-TARGETDURATION:10
#EXT-X-MEDIA-SEQUENCE:0
#EXTINF:10.000000,
8k60_-bulgaria_8k_hdr_60p_fuhd692899210.ts
#EXTINF:10.000000,
8k60_-bulgaria_8k_hdr_60p_fuhd692899211.ts
#EXTINF:10.000000,
8k60_-bulgaria_8k_hdr_60p_fuhd692899212.ts
...
#EXTINF:9.360422,
8k60_-bulgaria_8k_hdr_60p_fuhd6928992133.ts
#EXT-X-ENDLIST

客户端获取 M3U8 文件的 HTTP 请求携带 Type A 参数 auth_key，形如：http://localhost:8080/xxx.m3u8?auth_key=1698752518-0-00001-ff87dbc0598...

​

此次请求触发边缘函数，根据 M3U8 HTTP 请求的 auth_key 参数，获取到 timestamp、rand、uid 等关键信息，根据这些参数计算出每个 TS 请求的 Type A 鉴权参数 auth_key，并修改 M3U8 文件中，每个 TS 请求的 URL：

...
async function rewriteLine({ line, querySign }) {
  if (/^\s*$/.test(line)) {
    return line;
  }

  if (line.charAt(0) === "#") {
    if (line.startsWith("#EXT-X-MAP")) {
      const key = await createSign(querySign, line);

      line = line.replace(/URI="([^"]+)"/, (matched, p1) => {
        return p1 ? matched.replace(p1, `${p1}?key=${key}`) : matched;
      });
    }
    return line;
  }

  const key = await createSign(querySign, line);

  return `${line}?${AUTH_KEY_NAME}=${key}`;
}

async function createSign(querySign, line) {
  const { basePath, ts, rand, uid } = querySign;
  const pathname = `${basePath}/${line}`;

  const md5hash = await md5([pathname, ts, rand, uid, SECRET_KEY].join("-"));
  const key = [ts, rand, uid, md5hash].join("-");

  return key;
}
...

经过上面的处理，原 M3U8 文件中的 TS 请求都被改写：

​

客户端播放器解析 M3U8 文件，发起 TS 请求，携带 Type A 鉴权参数 auth_key，形如：http://localhost:8080/xxx.ts?auth_key=1698752518-0-00001-88cbab261a...

获取 TS 资源的 HTTP 请求仍然会触发边缘函数执行，此时函数会进行 auth_key 的校验：

...
async function checkTypeA(urlInfo) {
  const sign = urlInfo.searchParams.get(AUTH_KEY_NAME) || "";
  const elements = sign.split("-");

  if (elements.length !== 4) {
    return {
      flag: false,
      message: "Invalid Sign Format",
    };
  }

  const [ts, rand, uid, md5hash] = elements;
  if (!ts || !rand || !uid || !md5hash) {
    return {
      flag: false,
      message: "Invalid Sign Format",
    };
  }

  if (!isNumber(ts)) {
    return {
      flag: false,
      message: "Sign Expired",
    };
  }

  const now = Math.floor(Date.now() / 1000);
  if (now > Number(ts)) {
    return {
      flag: false,
      message: "Sign Expired",
    };
  }

  const hash = await md5(
    [urlInfo.pathname, ts, rand, uid, SECRET_KEY].join("-")
  );
  if (hash !== md5hash) {
    return {
      flag: false,
      message: "Verify Sign Failed",
    };
  }
  return {
    flag: true,
    message: "success",
  };
}
...

如果 TS URL 携带的 auth_key 校验通过，会正常返回资源，客户端可以正常播放视频，如图所示：

如果 TS URL 携带的 auth_key 不合法，或者未携带参数，边缘函数将会返回 403，视频不会正常播放：

注意：
添加 URL 鉴权参数仅是一种访问控制的方式，在 《 EdgeOne 边缘函数 - 如何实现“防盗”与访问控制》 中介绍的访问控制方案，均可与 M3U8 文件改写结合使用。

3.2 插入广告

在 M3U8 文件中通过添加 TS 文件的方式插入广告，是一种常见的在线视频广告投放方式。这种方式可以在视频流中无缝插入广告。主要应用场景有：

  1. 在线视频平台：例如 YouTube、Netflix 等，可以在视频的开始、中间或结束时插入广告；

  2. 直播平台：例如 Twitch、斗鱼等，可以在直播的特定时刻插入广告；

这种方式相比其他广告插入方式有以下优势：

  1. 灵活性：可以根据需要在任何时刻插入广告，例如在视频的开始、中间或结束；

  2. 兼容性：这种方式不依赖于特定的播放器，只要设备支持 HLS，就可以播放广告；

  3. 个性化：可以根据用户的行为、兴趣或地理位置等因素，投放定制的广告；

我们可以利用这种思路，在边缘节点上动态修改 M3U8 文件中的 TS 文件列表。

假定原始 M3U8 文件为：

#EXTM3U
#EXT-X-VERSION:3
#EXT-X-TARGETDURATION:10
#EXT-X-MEDIA-SEQUENCE:0
#EXTINF:10.000000,
8k60_-bulgaria_8k_hdr_60p_fuhd692899210.ts
#EXTINF:10.000000,
8k60_-bulgaria_8k_hdr_60p_fuhd692899211.ts
#EXTINF:10.000000,
8k60_-bulgaria_8k_hdr_60p_fuhd692899212.ts
...
#EXTINF:9.360422,
8k60_-bulgaria_8k_hdr_60p_fuhd6928992133.ts
#EXT-X-ENDLIST

通过边缘函数，将预先准备好的广告 TS 片段注入：

const AD_TS = `#EXTINF:10.000000,
http://m3u8-1251557890.cos.ap-guangzhou.myqcloud.com/apple_watch_apple_watch_hermes184006680.ts
#EXTINF:10.000000,
http://m3u8-1251557890.cos.ap-guangzhou.myqcloud.com/apple_watch_apple_watch_hermes184006681.ts
#EXTINF:10.000000,
http://m3u8-1251557890.cos.ap-guangzhou.myqcloud.com/apple_watch_apple_watch_hermes184006682.ts
#EXT-X-DISCONTINUITY`;

...
async function handleM3U8(request) {
  ...
  const response = await fetchOrigin(request);
  if (response.status !== 200) {
    return response;
  }

  const originalM3U8 = await response.text();

  const modifiedM3U8 = originalM3U8.replace(
    "#EXT-X-MEDIA-SEQUENCE:0",
    `#EXT-X-MEDIA-SEQUENCE:0\n${AD_TS}`
  );

  return new Response(modifiedM3U8, response);
}
...

经过上面的处理，原 M3U8 文件中插入了广告 TS 片段：

当客户端播放器拿到改写的 M3U8 文件后，将会首先播放广告：

广告播放完毕，无缝切换，播放视频内容：

注意：
广告内容在一段时间内相对固定，因此无需每次重复进行 M3U8 改写，可以使用 Cache 进行合理缓存；

3.3 地域定制

根据地理位置投放广告可以更有效地达到广告目标，提高广告效果，提供个性化体验。在场景 2 的基础上，我们可以进一步修改代码，借助边缘函数 Request API 的 request.eo.geo 参数，获取客户端的地理位置，注入不同的广告内容，实现精细化广告投放。

const AD_TS_1 = `...AD_TS_1...`;
const AD_TS_2 = `...AD_TS_2...`;

const ADS = {
  CN: AD_TS_1,
  US: AD_TS_2,
};

...
async function handleM3U8(request) {
  ...
  const response = await fetchOrigin(request);
  if (response.status !== 200) {
    return response;
  }

  const originalM3U8 = await response.text();
  const alpha2code = request.eo.geo.countryCodeAlpha2;
  const AD_TS = ADS?.[alpha2code];
  const modifiedM3u8 = originalM3U8;
  
  if (AD_TS) {
    modifiedM3U8 = originalM3U8.replace(
      "#EXT-X-MEDIA-SEQUENCE:0",
      `#EXT-X-MEDIA-SEQUENCE:0\n${AD_TS}`
    );
  }

  return new Response(modifiedM3U8, response);
}
...
注意：
与基于  request.eo.geo 定制广告 TS 片段同理，开发者可以定制视频的其他局部 TS，受限于文章篇幅，本文不做展示。

四、总结

使用 EdgeOne 边缘函数在边缘节点改写 M3U8 文件，在保证 CDN 加速效果的同时，可以实现便捷、灵活的流媒体处理，根据用户的实际情况动态调整媒体流，从而优化业务流程，降低维护成本。

参考 API 列表

欢迎各位童鞋来体验和使用 EdgeOne 边缘函数，挖掘更多玩法：

EdgeOne边缘安全加速平台
关注
  • 34
    点赞
  • 踩
  • 29
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值