Edgio
Edgio Console

Content Manipulation and Stitching

Content manipulation and stitching is a powerful feature that allows you to modify the content of a response before it is returned to the client. This can be useful for adding custom content to a response, modifying the response headers, or stitching together multiple responses into a single response.

Basic Content Manipulation

The response body from the origin can be accessed and modified using the Response object in the Fetch API. This object provides methods for accessing and modifying the response body, including text(), json(), and arrayBuffer(). These methods can be used to add, remove, or modify the content of the response before it is returned to the client.

Router Configuration

JavaScriptroutes.js
1import {Router, edgioRoutes} from '@edgio/core';
2

3export default new Router()
4  .use(edgioRoutes)
5

6  .match('/some/path', {
7    edge_function: './edge-functions/main.js',
8  });

Edge Function

JavaScriptedge-functions/main.js
1export async function handleHttpRequest(request, context) {
2  const resp = await fetch(request.url, {
3    edgio: {
4      origin: 'web',
5    },
6  });
7  let html = await resp.text();
8

9  // Inject a marquee tag into the response
10  const marquee =
11    '<marquee>This paragraph was injected by an edge function.</marquee>';
12  html = html.replace(/(<center[^>]*>)/i, `$1${marquee}`);
13

14  return new Response(html, resp);
15}

M3U Manifest Manipulation

The M3U manifest is a text-based file format that contains information about the media files in a playlist. It is commonly used for streaming video and audio, and is supported by most media players and streaming services. The M3U manifest can be modified to remove or add media files, change the order of the files, or modify the metadata of the files.

Router Configuration

JavaScriptroutes.js
1import {Router, edgioRoutes} from '@edgio/core';
2

3export default new Router()
4  .use(edgioRoutes)
5

6  .match('/some/path', {
7    edge_function: './edge-functions/main.js',
8  });

Edge Function

JavaScriptedge-functions/main.js
1export async function handleHttpRequest(request, context) {
2  // Get the manifest from the upstream server
3  const url = new URL(request.url);
4  url.pathname = '/assets/tears-of-steel.m3u';
5

6  const upstreamResponse = await fetch(url.toString(), {
7    edgio: {
8      origin: 'web',
9    },
10  });
11

12  // Modify the manifest to remove the 1680x750 rendition
13  const manifestBody = await upstreamResponse.text();
14  const lines = manifestBody
15    .split('\n')
16    .filter((line, index, lines) => !lines[index - 1]?.includes('1680x750'))
17    .filter((line) => !line.includes('1680x750'));
18

19  // Return the modified manifest
20  const modifiedResponse = new Response(lines.join('\n'), {
21    headers: {'content-type': upstreamResponse.headers.get('content-type')},
22  });
23

24  return modifiedResponse;
25}

Content Stitching

Content stitching is a powerful feature that allows you to combine multiple responses into a single response, such as combining the results of multiple API calls into a single response.

Router Configuration

JavaScriptroutes.js
1import {Router, edgioRoutes} from '@edgio/core';
2

3export default new Router()
4  .use(edgioRoutes)
5

6  .match('/some/path', {
7    edge_function: './edge-functions/main.js',
8  });

Edge Function

JavaScriptedge-functions/main.js
1export async function handleHttpRequest(request, context) {
2  const url = new URL(request.url);
3  const originConfig = {
4    edgio: {
5      origin: 'web',
6    },
7  };
8

9  // Get the list of phone contacts
10  const phonePromise = fetch(new Request(`${url.origin}/phone`), originConfig);
11

12  // In Parallel, get the list of e-mail contacts
13  const emailPromise = fetch(new Request(`${url.origin}/email`), originConfig);
14

15  // Wait for both requests to complete.
16  const [phoneResponse, emailResponse] = await Promise.all([
17    phonePromise,
18    emailPromise,
19  ]);
20

21  // Combine the two response bodies into a single response
22  const body = {
23    phone: await phoneResponse.json(),
24    email: await emailResponse.json(),
25  };
26

27  // Return the response and end the edge function as JSON
28  const jsonBody = JSON.stringify(body);
29

30  return new Response(jsonBody, 200, {
31    headers: {'Content-Type': 'application/json'},
32  });
33}