kgess-mirror/cloudflare-docs
1
0
Fork 0
mirror of https://github.com/cloudflare/cloudflare-docs.git synced 2026-01-16 23:11:06 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 65

[Dash Routes] Update source (#26544)

Browse source 
* [Dash Routes] Update source

* update various routes and add manually defined file

* bunch of route fixes + add commented out part of script for local auditing

* Updates
This commit is contained in:
Kody Jackson 2025-11-17 08:08:01 -06:00 • committed by GitHub
parent 9c059e24f5
commit 55a014f034
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
42 changed files with 1099 additions and 1051 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
src/components/DashButton.astro
View file

@ -2,6 +2,7 @@
import { z } from "astro:schema";
import { LinkButton } from "@astrojs/starlight/components";
import CoreRoutes from "~/content/dash-routes/core.json";
import CoreManuallyDefinedRoutes from "~/content/dash-routes/core-manually-defined.json";
import ZeroTrustRoutes from "~/content/dash-routes/zero-trust.json";
const props = z
@ -14,7 +15,9 @@ const props = z
const { url, zeroTrust, buttonName } = props.parse(Astro.props);
const routes = zeroTrust ? ZeroTrustRoutes : CoreRoutes;
const allCoreRoutes = CoreRoutes.concat(CoreManuallyDefinedRoutes);
const routes = zeroTrust ? ZeroTrustRoutes : allCoreRoutes;
const route = routes.find((route) => route.deeplink === url);
@ -22,6 +25,20 @@ if (!route) {
throw new Error(`[DashButton] No route found for ${url}`);
}
/*
If working locally and wanting to catch multiple missing routes, update above to the following
let route = routes.find((route) => route.deeplink === url);
if (!route) {
console.warn(`[DashButton] No route found for ${url}`);
route = {
name: "Account home",
deeplink: "/?to=/:account/home",
};
}
*/
const name = buttonName ?? route.name;
const baseUrl = zeroTrust
? "https://one.dash.cloudflare.com"

20
src/content/changelog/dns/2025-09-16-DNSFW-Analytics-UI.mdx
View file

@ -14,16 +14,16 @@ Access [GraphQL-powered DNS Firewall analytics](/dns/dns-firewall/analytics/) di
## Explore Four Interactive Panels
- **Query summary**: Describes trends over time, segmented by dimensions.
- **Query statistics**: Describes totals, cached/uncached queries, and processing/response times.
- **DNS queries by data center**: Describes global view and the top 10 data centers.
- **Top query statistics**: Shows a breakdown by key dimensions, with search and expand options (up to top 100 items).
- **Query summary**: Describes trends over time, segmented by dimensions.
- **Query statistics**: Describes totals, cached/uncached queries, and processing/response times.
- **DNS queries by data center**: Describes global view and the top 10 data centers.
- **Top query statistics**: Shows a breakdown by key dimensions, with search and expand options (up to top 100 items).
Additional features:
Additional features:
- Apply filters and time ranges once. Changes reflect across all panels.
- Filter by dimensions like query name, query type, cluster, data center, protocol (UDP/TCP), IP version, response code/reason, and more.
- Access up to 62 days of historical data with flexible intervals.
- Apply filters and time ranges once. Changes reflect across all panels.
- Filter by dimensions like query name, query type, cluster, data center, protocol (UDP/TCP), IP version, response code/reason, and more.
- Access up to 62 days of historical data with flexible intervals.
## Availability
@ -31,8 +31,8 @@ Available to all DNS Firewall customers as part of their existing subscription.
## Where to Find It
- In the Cloudflare dashboard, go to the **DNS Firewall** page.
- In the Cloudflare dashboard, go to the **DNS Firewall** page.
<DashButton url="/?to=/:account/dns-firewall" />
<DashButton url="/?to=/:account/dns-firewall/analytics" />
- Refer to the [DNS Firewall Analytics](/dns/dns-firewall/analytics/) to learn more.

2
src/content/dash-routes/core-manually-defined.json Normal file
View file

@ -0,0 +1,2 @@
[
]

957
src/content/dash-routes/core.json
View file

File diff suppressed because it is too large Load diff

89
src/content/docs/analytics/account-and-zone-analytics/zone-analytics.mdx
View file

@ -4,11 +4,9 @@ source: https://support.cloudflare.com/hc/en-us/articles/360037684251-Understand
title: Zone Analytics
sidebar:
order: 1
---
import { Badge, DashButton } from "~/components";
import { Badge, DashButton } from "~/components";
The Cloudflare zone analytics is a major component of the overall Cloudflare Analytics product line.  Specifically, this app gives you access to a wide range of metrics, collected at the website or domain level.
@ -20,24 +18,24 @@ You can also understand the characteristics of the data that Cloudflare
captures and processes.
:::
***
---
## View your website analytics
To view metrics for your website, in the Cloudflare dashboard, go to the **Analytis & Logs** page.
<DashButton url="/?to=/:account/:zone/analytics" />
<DashButton url="/?to=/:account/:zone/analytics/traffic" />
Once it loads, you can find tabs for **Traffic**, **Security**, **Performance**, **DNS**, **Workers**, and **Logs** (Enterprise domains only). To understand the various metrics available, refer to *Review your website metrics* below.
Once it loads, you can find tabs for **Traffic**, **Security**, **Performance**, **DNS**, **Workers**, and **Logs** (Enterprise domains only). To understand the various metrics available, refer to _Review your website metrics_ below.
***
---
## Review your website metrics
This section outlines the metrics available under each Analytics app tab. Before proceeding, note that each tab may contain:
* One or more panels to further categorize the underlying metrics.
* A dropdown (on the panel's top right) to filter metrics for a specific time period. The time period you can select may vary based on the Cloudflare plan that your domain is associated with.
- One or more panels to further categorize the underlying metrics.
- A dropdown (on the panel's top right) to filter metrics for a specific time period. The time period you can select may vary based on the Cloudflare plan that your domain is associated with.
Below is a summary of each Analytics app tab.
@ -47,8 +45,8 @@ Below is a summary of each Analytics app tab.
These metrics include legitimate user requests as well as crawlers and threats. The HTTP Traffic tab features the following panels: 
* **Web Traffic** - Displays metrics for *Requests*, *Bandwidth*, and *Unique Visitors*. If you are using Cloudflare Workers, subrequests data will not be visible in zone Traffic Analytics. Instead, you can find subrequests analytics under the **Workers & Pages** tab in the **Overview** section. Refer to [Worker Analytics](/analytics/account-and-zone-analytics/analytics-with-workers/#worker-analytics) for more information.
* **Web Traffic Requests by Country** - Is an interactive map that breaks down the number of requests by country.  This panel also includes a data table for **Top Traffic Countries / Regions** that display the countries with the most number of requests (up to five, if the data exists).
- **Web Traffic** - Displays metrics for _Requests_, _Bandwidth_, and _Unique Visitors_. If you are using Cloudflare Workers, subrequests data will not be visible in zone Traffic Analytics. Instead, you can find subrequests analytics under the **Workers & Pages** tab in the **Overview** section. Refer to [Worker Analytics](/analytics/account-and-zone-analytics/analytics-with-workers/#worker-analytics) for more information.
- **Web Traffic Requests by Country** - Is an interactive map that breaks down the number of requests by country.  This panel also includes a data table for **Top Traffic Countries / Regions** that display the countries with the most number of requests (up to five, if the data exists).
#### Pro, Business, or Enterprise plan
@ -60,40 +58,41 @@ and Enterprise plans.
Analytics are based on Cloudflare's edge logs, with no need for third party scripts or trackers. The HTTP Traffic tab features the following metrics:
* **Requests** - An HTTP request. A typical page view requires many requests. If you are using Cloudflare Workers, subrequests data will not be visible in zone HTTP Traffic Analytics. Instead, you can find subrequests analytics under the **Workers & Pages** tab in the **Overview** section. Refer to [Worker Analytics](/analytics/account-and-zone-analytics/analytics-with-workers/#worker-analytics) for more information.
* **Data Transfer** - Total HTTP data transferred in responses.
* <a id="page-views" /> **Page views** - A page view is defined as a successful HTTP response with a content-type of HTML.
* **Visits** - A visit is defined as a [page view](#page-views) that originated from a different website, or direct link. Cloudflare checks where the HTTP referer does not match the hostname. One visit can consist of multiple page views.
* **API Requests** - An HTTP request for API data.
- **Requests** - An HTTP request. A typical page view requires many requests. If you are using Cloudflare Workers, subrequests data will not be visible in zone HTTP Traffic Analytics. Instead, you can find subrequests analytics under the **Workers & Pages** tab in the **Overview** section. Refer to [Worker Analytics](/analytics/account-and-zone-analytics/analytics-with-workers/#worker-analytics) for more information.
- **Data Transfer** - Total HTTP data transferred in responses.
- <a id="page-views" /> **Page views** - A page view is defined as a successful
HTTP response with a content-type of HTML.
- **Visits** - A visit is defined as a [page view](#page-views) that originated from a different website, or direct link. Cloudflare checks where the HTTP referer does not match the hostname. One visit can consist of multiple page views.
- **API Requests** - An HTTP request for API data.
To receive more detailed metrics, **Add filter**. You can also filter each metric by:
* Cache status
* Data center
* Source ASN
* Country
* Source device type
* Source IP
* Referer host
* Host
* HTTP method
* HTTP version
* Path
* Query string
* Content type
* Edge status code
* Origin status code
* Security Action
* Security Source
* Source browser
* Source operating system
* Source user agent
* X-Requested-With header
- Cache status
- Data center
- Source ASN
- Country
- Source device type
- Source IP
- Referer host
- Host
- HTTP method
- HTTP version
- Path
- Query string
- Content type
- Edge status code
- Origin status code
- Security Action
- Security Source
- Source browser
- Source operating system
- Source user agent
- X-Requested-With header
In addition, the following filters are available to Enterprise [Bot Management](/bots/get-started/bot-management/) customers only.
* Source JA4 fingerprint
* Source JA3 fingerprint
- Source JA4 fingerprint
- Source JA3 fingerprint
To change the time period, use the dropdown menu on the right-hand side above the graph. You can also drag to zoom on the graph.
@ -101,17 +100,17 @@ To change the time period, use the dropdown menu on the right-hand side above th
For this tab, the number and type of charts may vary based on existing data and customer plan. Most of the metrics in this tab come from the Cloudflare Firewall app. The panels available include:
* **Threats** - Displays a data summary and an area chart showing threats against the site.
* **Threats by Country** - Is an interactive map highlighting the countries where threats originated. It also includes data tables with statistics on **Top Threat Countries / Regions** and **Top Crawlers / Bots.**
* **Rate Limiting** (add-on service) - Features a line chart highlighting matching and blocked requests, based on rate limits.  To learn more, consult [Rate Limiting Analytics](/waf/reference/legacy/old-rate-limiting/#analytics).
* **Overview** - Displays a set of pie charts for: **Total Threats Stopped**, **Traffic Served Over SSL**, and **Types of Threats Mitigated**. If available, the expandable **Details** link display a table with numerical data.
- **Threats** - Displays a data summary and an area chart showing threats against the site.
- **Threats by Country** - Is an interactive map highlighting the countries where threats originated. It also includes data tables with statistics on **Top Threat Countries / Regions** and **Top Crawlers / Bots.**
- **Rate Limiting** (add-on service) - Features a line chart highlighting matching and blocked requests, based on rate limits.  To learn more, consult [Rate Limiting Analytics](/waf/reference/legacy/old-rate-limiting/#analytics).
- **Overview** - Displays a set of pie charts for: **Total Threats Stopped**, **Traffic Served Over SSL**, and **Types of Threats Mitigated**. If available, the expandable **Details** link display a table with numerical data.
### Performance
The metrics aggregated under this tab span multiple Cloudflare services.  The panels available include:
* **Origin Performance (Argo)** (add-on service) - Displays metrics related to response time between the Cloudflare edge network and origin servers for the last 48 hours.  For additional details, refer to [Argo Analytics](/argo-smart-routing/analytics/).
* **Overview** - Displays a set of pie charts for: **Client HTTP Version Used**, **Bandwidth Saved**, and **Content Type Breakdown**. If available, the expandable **Details** link display a table with numerical data.
- **Origin Performance (Argo)** (add-on service) - Displays metrics related to response time between the Cloudflare edge network and origin servers for the last 48 hours.  For additional details, refer to [Argo Analytics](/argo-smart-routing/analytics/).
- **Overview** - Displays a set of pie charts for: **Client HTTP Version Used**, **Bandwidth Saved**, and **Content Type Breakdown**. If available, the expandable **Details** link display a table with numerical data.
### Workers

25
src/content/docs/dns/dns-firewall/analytics.mdx
View file

@ -3,7 +3,6 @@ pcx_content_type: navigation
title: Analytics and logs
sidebar:
order: 3
---
import { Badge, FeatureTable, Details, DashButton } from "~/components";
@ -22,11 +21,9 @@ The historical data available covers 62 days and the maximum time interval you c
For a quick summary, view your DNS Firewall analytics on the dashboard. The DNS analytics dashboard contains [four main panels](#panels). The filters and time frame that you specify at the top of the page apply to all of them.
1. In the Cloudflare dashboard, go to the **DNS Firewall** page.
In the Cloudflare dashboard, go to the **DNS Firewall Analytics** page.
<DashButton url="/?to=/:account/dns-firewall" />
2. Go to **Analytics**.
<DashButton url="/?to=/:account/dns-firewall/analytics" />
#### Available dimensions
@ -52,9 +49,16 @@ The filters and time frame that you specify at the top of the page apply to all
- **Query statistics**: an overview of query metrics. Namely, **Total queries**, **Cached queries**, **Uncached queries**, and **Stale cache queries**.
<Details header="Processing time and response time"> Processing time refers to the total time taken to handle a query within DNS Firewall, meaning cached queries served directly from Cloudflare's servers. For uncached queries, the metric used is response time, which considers the time to get the answers from your upstream nameservers. The processing and response times are displayed in milliseconds.</Details>
<Details header="Processing time and response time">
{" "}
Processing time refers to the total time taken to handle a query within DNS
Firewall, meaning cached queries served directly from Cloudflare's servers.
For uncached queries, the metric used is response time, which considers the
time to get the answers from your upstream nameservers. The processing and
response times are displayed in milliseconds.
</Details>
<Details header="90th percentile (p90)"> Aside from the average for both processing and response times, `p90` values show you the maximum time that 90% of queries took to resolve. For example, if the p90 is 1 millisecond, it means 90% of the queries were resolved in 1 millisecond or less.</Details>
<Details header="90th percentile (p90)"> Aside from the average for both processing and response times, `p90` values show you the maximum time that 90% of queries took to resolve. For example, if the p90 is 1 millisecond, it means 90% of the queries were resolved in 1 millisecond or less.</Details>
- **DNS queries by data center**: a map indicating which Cloudflare data centers have handled DNS queries to your account. You can also find a list of the top ten results and quickly filter for or exclude a certain data center from the results by hovering over it and selecting **Filter** or **Exclude**.
@ -66,8 +70,8 @@ Use the [GraphQL API](/analytics/graphql-api/) to access DNS Firewall analytics.
The DNS Firewall analytics has two [schemas](/analytics/graphql-api/getting-started/querying-basics/):
* `dnsFirewallAnalyticsAdaptive`: Retrieve information about individual DNS Firewall queries.
* `dnsFirewallAnalyticsAdaptiveGroups`: Get reports on aggregate information only.
- `dnsFirewallAnalyticsAdaptive`: Retrieve information about individual DNS Firewall queries.
- `dnsFirewallAnalyticsAdaptiveGroups`: Get reports on aggregate information only.
### API <Badge text="Legacy" variant="caution" size="medium" />
@ -98,4 +102,5 @@ The following table provides a description for each of the values that might be
| `unknown` | There was an unknown error. |
[^1]: the total time taken to handle a query within DNS Firewall.
[^2]: the time it takes when an answer is not cached and Cloudflare has to get the answer from your upstream nameservers.
[^2]: the time it takes when an answer is not cached and Cloudflare has to get the answer from your upstream nameservers.

13
src/content/docs/dns/dns-firewall/setup.mdx
View file

@ -26,19 +26,18 @@ Prior to setting up DNS Firewall, you need:
<Tabs syncKey="dashPlusAPI"> <TabItem label="Dashboard">
1. In the Cloudflare dashboard, go to the **DNS Firewall** page.
1. In the Cloudflare dashboard, go to the **DNS Firewall Clusters** page.
<DashButton url="/?to=/:account/dns-firewall" />
<DashButton url="/?to=/:account/dns-firewall/clusters" />
2. Go to **Clusters**.
3. Select **Add Firewall Cluster**.
4. Fill out the required fields, including:
2. Select **Add Firewall Cluster**.
3. Fill out the required fields, including:
- **IP Addresses**: The upstream IPv4 and/or IPv6 addresses of your authoritative nameservers.
- **Minimum Cache TTL**: Recommended setting of **30 seconds**.
- **Maximum Cache TTL**: Recommended setting of **4 hours**. Larger values increase the cache hit ratio, but also increase the time required for DNS changes to propagate.
- **ANY queries**: Recommended setting is **Off** because these are often used as part of DDoS attacks. Also refer to this [blog post](https://blog.cloudflare.com/rfc8482-saying-goodbye-to-any/).
5. Click **Continue**.
6. On the following screen, save the values for **Your new DNS Firewall IP Addresses**.
4. Click **Continue**.
5. On the following screen, save the values for **Your new DNS Firewall IP Addresses**.
:::note[Note:]

16
src/content/docs/fundamentals/manage-members/dashboard-sso.mdx
View file

@ -49,7 +49,7 @@ You must create an [Account API token](/fundamentals/api/get-started/create-toke
1. Once you have configured an IdP in Cloudflare One, go to the **Members** page to manage SSO connectors.
<DashButton url="/?to=/:account/members/settings" />
<DashButton url="/?to=/:account/members" />
2. If step 1 was successful, a button to add a new SSO domain will be present. Select the button to begin the process of adding a new SSO domain.
@ -285,11 +285,12 @@ Before disabling SSO, make sure you have access to your Cloudflare user email. T
1. Navigate to the **Members** page.
<DashButton url="/?to=/:account/members/settings" />
<DashButton url="/?to=/:account/members" />
2. Select the actions menu for the SSO connector in the list and select **Disable**.
2. Go to **Settings**.
3. Select the actions menu for the SSO connector in the list and select **Disable**.
3. Type the domain of the connector and click confirm to complete the disable action.
4. Type the domain of the connector and click confirm to complete the disable action.
</TabItem>
<TabItem label="API">
@ -361,10 +362,11 @@ Cloudflare does not allow you to change your <GlossaryTooltip term="team name">t
1. Navigate to the **Members** page.
<DashButton url="/?to=/:account/members/settings" />
<DashButton url="/?to=/:account/members" />
2. Disable all SSO connectors.
3. Delete all SSO connectors.
2. Go to **Settings**.
3. Disable all SSO connectors.
4. Delete all SSO connectors.
</TabItem>
<TabItem label="API">

10
src/content/docs/images/get-started.mdx
View file

@ -3,8 +3,8 @@ pcx_content_type: get-started
title: Getting started
sidebar:
order: 2
---
import { DashButton } from "~/components";
In this guide, you will get started with Cloudflare Images and make your first API request.
@ -33,25 +33,21 @@ Cloudflare will automatically cache every transformed image on our global networ
To enable transformations on your zone:
1. In the Cloudflare dashboard, go to the **Transformations** page.
1. In the Cloudflare dashboard, go to the **Transformations** page.
<DashButton url="/?to=/:account/images/delivery-zones" />
<DashButton url="/?to=/:account/images/transformations" />
2. Go to the specific zone where you want to enable transformations.
3. Select **Enable for zone**. This will allow you to optimize and deliver remote images.
:::note
With **Resize images from any origin** unchecked, only the initial URL passed will be checked. Any redirect returned will be followed, including if it leaves the zone, and the resulting image will be transformed.
:::
:::note
If you are using transformations in a Worker, you need to include the appropriate logic in your Worker code to prevent resizing images from any origin. Unchecking this option in the dash does not apply to transformation requests coming from Cloudflare Workers.
:::

13
src/content/docs/images/manage-images/blur-variants.mdx
View file

@ -3,8 +3,8 @@ pcx_content_type: how-to
title: Apply blur
sidebar:
order: 12
---
import { DashButton } from "~/components";
You can apply blur to image variants by creating a specific variant for this effect first or by editing a previously created variant. Note that you cannot blur an SVG file.
@ -13,12 +13,13 @@ Refer to [Resize images](/images/manage-images/create-variants/) for help creati
To blur an image:
1. In the Cloudflare dashboard, got to the **Variants** page.
1. In the Cloudflare dashboard, got to the **Hosted Images** page.
<DashButton url="/?to=/:account/images/variants" />
<DashButton url="/?to=/:account/images/hosted" />
2. Find the variant you want to blur and select **Edit** > **Customization Options**.
3. Use the slider to adjust the blurring effect. You can use the preview image to see how strong the blurring effect will be.
4. Select **Save**.
2. Select the **Delivery** tab.
3. Find the variant you want to blur and select **Edit** > **Customization Options**.
4. Use the slider to adjust the blurring effect. You can use the preview image to see how strong the blurring effect will be.
5. Select **Save**.
The image should now display the blurred effect.

19
src/content/docs/images/manage-images/create-variants.mdx
View file

@ -3,8 +3,8 @@ pcx_content_type: how-to
title: Create variants
sidebar:
order: 10
---
import { DashButton } from "~/components";
Variants let you specify how images should be resized for different use cases. By default, images are served with a `public` variant, but you can create up to 100 variants to fit your needs. Follow these steps to create a variant.
@ -15,13 +15,14 @@ Cloudflare Images can deliver SVG files but will not resize them because it is a
Resize via the Cloudflare dashboard.
:::
1. In the Cloudflare dashboard, go to the **Images > Variants** page.
1. In the Cloudflare dashboard, got to the **Hosted Images** page.
<DashButton url="/?to=/:account/images/variants" />
<DashButton url="/?to=/:account/images/hosted" />
2. Select **Create variant**.
2. Name your variant and select **Create**.
3. Define variables for your new variant, such as resizing options, type of fit, and specific metadata options.
2. Select the **Delivery** tab.
3. Select **Create variant**.
4. Name your variant and select **Create**.
5. Define variables for your new variant, such as resizing options, type of fit, and specific metadata options.
## Resize via the API
@ -50,9 +51,9 @@ The `Fit` property describes how the width and height dimensions should be inter
Variants allow you to choose what to do with your image’s metadata information. From the **Metadata** dropdown, choose:
* Strip all metadata
* Strip all metadata except copyright
* Keep all metadata
- Strip all metadata
- Strip all metadata except copyright
- Keep all metadata
## Public access

6
src/content/docs/images/manage-images/delete-images.mdx
View file

@ -3,17 +3,17 @@ pcx_content_type: how-to
title: Delete images
sidebar:
order: 17
---
import { DashButton } from "~/components";
You can delete an image from the Cloudflare Images storage using the dashboard or the API.
## Delete images via the Cloudflare dashboard
1. In the Cloudflare dashboard, go to **Images** page.
1. In the Cloudflare dashboard, go to **Transformations** page.
<DashButton url="/?to=/:account/images" />
<DashButton url="/?to=/:account/images/transformations" />
2. Find the image you want to remove and select **Delete**.
3. (Optional) To delete more than one image, select the checkbox next to the images you want to delete and then **Delete selected**.

12
src/content/docs/images/manage-images/delete-variants.mdx
View file

@ -3,27 +3,27 @@ pcx_content_type: how-to
title: Delete variants
sidebar:
order: 13
---
import { DashButton } from "~/components";
You can delete variants via the Images dashboard or API. The only variant you cannot delete is public.
:::caution
Deleting a variant is a global action that will affect other images that contain that variant.
:::
## Delete variants via the Cloudflare dashboard
1. In the Cloudflare dashboard, go to the **Variants** page.
1. In the Cloudflare dashboard, got to the **Hosted Images** page.
<DashButton url="/?to=/:account/images/variants" />
<DashButton url="/?to=/:account/images/hosted" />
2. Find the variant you want to remove and select **Delete**.
2. Select the **Delivery** tab.
3. Find the variant you want to remove and select **Delete**.
## Delete variants via the API

12
src/content/docs/images/manage-images/edit-images.mdx
View file

@ -3,20 +3,20 @@ pcx_content_type: how-to
title: Edit images
sidebar:
order: 14
---
import { DashButton } from "~/components";
The Edit option provides you available options to modify a specific image. After choosing to edit an image, you can:
* Require signed URLs to use with that particular image.
* Use a cURL command you can use as an example to access the image.
* Use fully-formed URLs for all the variants configured in your account.
- Require signed URLs to use with that particular image.
- Use a cURL command you can use as an example to access the image.
- Use fully-formed URLs for all the variants configured in your account.
To edit an image:
1. In the Cloudflare dashboard, go to the **Images** page.
1. In the Cloudflare dashboard, go to the **Transformations** page.
<DashButton url="/?to=/:account/images" />
<DashButton url="/?to=/:account/images/transformations" />
2. Locate the image you want to modify and select **Edit**.

10
src/content/docs/images/manage-images/enable-flexible-variants.mdx
View file

@ -3,19 +3,21 @@ pcx_content_type: how-to
title: Enable flexible variants
sidebar:
order: 11
---
import { DashButton } from "~/components";
Flexible variants allow you to create variants with dynamic resizing which can provide more options than regular variants allow. This option is not enabled by default.
## Enable flexible variants via the Cloudflare dashboard
1. In the Cloudflare dashboard, go to the **Variants** page.
1. In the Cloudflare dashboard, got to the **Hosted Images** page.
<DashButton url="/?to=/:account/images/variants" />
<DashButton url="/?to=/:account/images/hosted" />
2. Enable **Flexible variants**.
2. Select the **Delivery** tab.
3. Enable **Flexible variants**.
## Enable flexible variants via the API

6
src/content/docs/images/manage-images/export-images.mdx
View file

@ -3,17 +3,17 @@ pcx_content_type: how-to
title: Export images
sidebar:
order: 16
---
import { DashButton } from "~/components";
Cloudflare Images supports image exports via the Cloudflare dashboard and API which allows you to get the original version of your image.
## Export images via the Cloudflare dashboard
1. In the Cloudflare dashboard, go to the **Images** page.
1. In the Cloudflare dashboard, go to the **Transformations** page.
<DashButton url="/?to=/:account/images" />
<DashButton url="/?to=/:account/images/transformations" />
2. Find the image or images you want to export.
3. To export a single image, select **Export** from its menu. To export several images, select the checkbox next to each image and then select **Export selected**.

87
src/content/docs/images/manage-images/serve-images/serve-private-images.mdx
View file

@ -5,15 +5,16 @@ sidebar:
order: 23
---
import { TypeScriptExample,DashButton } from "~/components";
import { TypeScriptExample, DashButton } from "~/components";
You can serve private images by using signed URL tokens. When an image requires a signed URL, the image cannot be accessed without a token unless it is being requested for a variant set to always allow public access.
1. In the Cloudflare dashboard, go to the **Keys** page.
1. In the Cloudflare dashboard, go to the **Hosted Images** page.
<DashButton url="/?to=/:account/images/keys" />
<DashButton url="/?to=/:account/images/hosted" />
2. Copy your key and use it to generate an expiring tokenized URL.
2. Select **Keys**.
3. Copy your key and use it to generate an expiring tokenized URL.
:::note
@ -26,54 +27,62 @@ The example below uses a Worker that takes in a regular URL without a signed tok
<TypeScriptExample>
```ts
const KEY = 'YOUR_KEY_FROM_IMAGES_DASHBOARD';
const KEY = "YOUR_KEY_FROM_IMAGES_DASHBOARD";
const EXPIRATION = 60 * 60 * 24; // 1 day
const bufferToHex = buffer =>
[...new Uint8Array(buffer)].map(x => x.toString(16).padStart(2, '0')).join('');
const bufferToHex = (buffer) =>
[...new Uint8Array(buffer)]
.map((x) => x.toString(16).padStart(2, "0"))
.join("");
async function generateSignedUrl(url) {
// `url` is a full imagedelivery.net URL
// e.g. https://imagedelivery.net/cheeW4oKsx5ljh8e8BoL2A/bc27a117-9509-446b-8c69-c81bfeac0a01/mobile
// `url` is a full imagedelivery.net URL
// e.g. https://imagedelivery.net/cheeW4oKsx5ljh8e8BoL2A/bc27a117-9509-446b-8c69-c81bfeac0a01/mobile
const encoder = new TextEncoder();
const secretKeyData = encoder.encode(KEY);
const key = await crypto.subtle.importKey(
'raw',
secretKeyData,
{ name: 'HMAC', hash: 'SHA-256' },
false,
['sign']
);
const encoder = new TextEncoder();
const secretKeyData = encoder.encode(KEY);
const key = await crypto.subtle.importKey(
"raw",
secretKeyData,
{ name: "HMAC", hash: "SHA-256" },
false,
["sign"],
);
// Attach the expiration value to the `url`
const expiry = Math.floor(Date.now() / 1000) + EXPIRATION;
url.searchParams.set('exp', expiry);
// `url` now looks like
// https://imagedelivery.net/cheeW4oKsx5ljh8e8BoL2A/bc27a117-9509-446b-8c69-c81bfeac0a01/mobile?exp=1631289275
// Attach the expiration value to the `url`
const expiry = Math.floor(Date.now() / 1000) + EXPIRATION;
url.searchParams.set("exp", expiry);
// `url` now looks like
// https://imagedelivery.net/cheeW4oKsx5ljh8e8BoL2A/bc27a117-9509-446b-8c69-c81bfeac0a01/mobile?exp=1631289275
const stringToSign = url.pathname + '?' + url.searchParams.toString();
// for example, /cheeW4oKsx5ljh8e8BoL2A/bc27a117-9509-446b-8c69-c81bfeac0a01/mobile?exp=1631289275
const stringToSign = url.pathname + "?" + url.searchParams.toString();
// for example, /cheeW4oKsx5ljh8e8BoL2A/bc27a117-9509-446b-8c69-c81bfeac0a01/mobile?exp=1631289275
// Generate the signature
const mac = await crypto.subtle.sign('HMAC', key, encoder.encode(stringToSign));
const sig = bufferToHex(new Uint8Array(mac).buffer);
// Generate the signature
const mac = await crypto.subtle.sign(
"HMAC",
key,
encoder.encode(stringToSign),
);
const sig = bufferToHex(new Uint8Array(mac).buffer);
// And attach it to the `url`
url.searchParams.set('sig', sig);
// And attach it to the `url`
url.searchParams.set("sig", sig);
return new Response(url);
return new Response(url);
}
export default {
async fetch(request, env, ctx): Promise<Response> {
const url = new URL(event.request.url);
const imageDeliveryURL = new URL(
url.pathname.slice(1).replace('https:/imagedelivery.net', 'https://imagedelivery.net')
);
return generateSignedUrl(imageDeliveryURL);
},
async fetch(request, env, ctx): Promise<Response> {
const url = new URL(event.request.url);
const imageDeliveryURL = new URL(
url.pathname
.slice(1)
.replace("https:/imagedelivery.net", "https://imagedelivery.net"),
);
return generateSignedUrl(imageDeliveryURL);
},
} satisfies ExportedHandler<Env>;
```
</TypeScriptExample>
</TypeScriptExample>

23
src/content/docs/images/upload-images/sourcing-kit/edit.mdx
View file

@ -3,8 +3,8 @@ pcx_content_type: how-to
title: Edit sources
sidebar:
order: 2
---
import { DashButton } from "~/components";
The Sourcing Kit main page has a list of all the import jobs and sources you have defined. This is where you can edit details for your sources or abort running import jobs.
@ -13,21 +13,24 @@ The Sourcing Kit main page has a list of all the import jobs and sources you hav
You can learn more about your sources by selecting the **Sources** tab on the Sourcing Kit dashboard. Use this option to rename or delete your sources.
1. In the Cloudflare dashboard, go to the **Sourcing Kit** page.
1. In the Cloudflare dashboard, go to the **Hosted Images** page.
<DashButton url="/?to=/:account/images/sourcing-kit" />
<DashButton url="/?to=/:account/images/hosted" />
2. Select **Sources** and choose the source you want to change.
3. In this page you have the option to rename or delete your source. Select **Rename source** or **Delete source** depending on what you want to do.
2. Select **Sourcing Kit**.
3. Select **Sources** and choose the source you want to change.
4. In this page you have the option to rename or delete your source. Select **Rename source** or **Delete source** depending on what you want to do.
## Abort import jobs
While Cloudflare Images is still running a job to import images into your account, you can abort it before it finishes.
1. In the Cloudflare dashboard, go to the **Sourcing Kit** page.
1. In the Cloudflare dashboard, go to the **Hosted Images** page.
<DashButton url="/?to=/:account/images/sourcing-kit" />
<DashButton url="/?to=/:account/images/hosted" />
2. In **Imports** select the import job you want to abort.
3. The next page shows you a summary of the import. Select **Abort**.
4. Confirm that you want to abort your import job by selecting **Abort** on the dialog box.
2. Select **Sourcing Kit**.
3. In **Imports** select the import job you want to abort.
4. The next page shows you a summary of the import. Select **Abort**.
5. Confirm that you want to abort your import job by selecting **Abort** on the dialog box.

43
src/content/docs/images/upload-images/sourcing-kit/enable.mdx
View file

@ -3,27 +3,28 @@ pcx_content_type: how-to
title: Enable Sourcing Kit
sidebar:
order: 1
---
import { DashButton } from "~/components";
Enabling Sourcing Kit will set it up with the necessary information to start importing images from your Amazon S3 account.
## Create your first import job
1. In the Cloudflare dashboard, go to the **Sourcing Kit** page.
1. In the Cloudflare dashboard, go to the **Hosted Images** page.
<DashButton url="/?to=/:account/images/sourcing-kit" />
<DashButton url="/?to=/:account/images/hosted" />
2. Select **Import images** to create an import job.
3. In **Source name** give your source an appropriate name.
4. In **Amazon S3 bucket information** enter the S3's bucket name where your images are stored.
5. In **Required credentials**, enter your Amazon S3 credentials. This is required to connect Cloudflare Images to your source and import your images. Refer to [Credentials](/images/upload-images/sourcing-kit/credentials/) to learn more about how to set up credentials.
6. Select **Next**.
7. In **Basic rules** define the Amazon S3 path to import your images from, and the path you want to copy your images to in your Cloudflare Images account. This is optional, and you can leave these fields blank.
8. On the same page, in **Overwrite images**, you need to choose what happens when the files in your source change. The recommended action is to copy the new images and overwrite the old ones on your Cloudflare Images account. You can also choose to skip the import, and keep what you already have on your Cloudflare Images account.
9. Select **Next**.
10. Review and confirm the information regarding the import job you created. Select **Import images** to start importing images from your source.
2. Select **Sourcing Kit**.
3. Select **Import images** to create an import job.
4. In **Source name** give your source an appropriate name.
5. In **Amazon S3 bucket information** enter the S3's bucket name where your images are stored.
6. In **Required credentials**, enter your Amazon S3 credentials. This is required to connect Cloudflare Images to your source and import your images. Refer to [Credentials](/images/upload-images/sourcing-kit/credentials/) to learn more about how to set up credentials.
7. Select **Next**.
8. In **Basic rules** define the Amazon S3 path to import your images from, and the path you want to copy your images to in your Cloudflare Images account. This is optional, and you can leave these fields blank.
9. On the same page, in **Overwrite images**, you need to choose what happens when the files in your source change. The recommended action is to copy the new images and overwrite the old ones on your Cloudflare Images account. You can also choose to skip the import, and keep what you already have on your Cloudflare Images account.
10. Select **Next**.
11. Review and confirm the information regarding the import job you created. Select **Import images** to start importing images from your source.
Your import job is now created. You can review the job status on the Sourcing Kit main page. It will show you information such as how many objects it found, how many images were imported, and any errors that might have occurred.
@ -34,11 +35,13 @@ Sourcing Kit will warn you when you are about to reach the limit for your plan s
## Define a new source
1. In the Cloudflare dashboard, go to the **Source Kit** page.
1. In the Cloudflare dashboard, go to the **Hosted Images** page.
<DashButton url="/?to=/:account/images/sourcing-kit" />
<DashButton url="/?to=/:account/images/hosted" />
2. Select **Import images** > **Define a new source**.
2. Select **Sourcing Kit**.
3. Select **Import images** > **Define a new source**.
Repeat steps 4-11 in [Create your first import job](#create-your-first-import-job) to finish setting up your new source.
@ -46,12 +49,14 @@ Repeat steps 4-11 in [Create your first import job](#create-your-first-import-jo
You can have many import jobs from the same or different sources. If you select an existing source to create a new import job, you will not need to enter your credentials again.
1. In the Cloudflare dashboard, go to the **Sourcing Kit** page.
1. In the Cloudflare dashboard, go to the **Hosted Images** page.
<DashButton url="/?to=/:account/images/sourcing-kit" />
<DashButton url="/?to=/:account/images/hosted" />
2. Select **Import images**.
3. Choose from one of the sources already configured.
2. Select **Sourcing Kit**.
3. Select **Import images**.
4. Choose from one of the sources already configured.
Repeat steps 8-11 in [Create your first import job](#create-your-first-import-job) to finish setting up your new import job.

6
src/content/docs/images/upload-images/upload-dashboard.mdx
View file

@ -3,17 +3,17 @@ pcx_content_type: how-to
title: Upload via dashboard
sidebar:
order: 2
---
import { DashButton } from "~/components";
Before you upload an image, check the list of [supported formats and dimensions](/images/upload-images/#supported-image-formats) to confirm your image will be accepted.
To upload an image from the Cloudflare dashboard:
1. In the Cloudflare dashboard, go to the **Images** page.
1. In the Cloudflare dashboard, go to the **Transformations** page.
<DashButton url="/?to=/:account/images" />
<DashButton url="/?to=/:account/images/transformations" />
2. Drag and drop your image into the **Quick Upload** section. Alternatively, you can select **Drop images here** or browse to select your image locally.
3. After the upload finishes, your image appears in the list of files.

111
src/content/docs/pipelines/getting-started.mdx
View file

@ -36,15 +36,15 @@ This guide will instruct you through:
<Steps>
1. If not already logged in, run:
```
npx wrangler login
```
```
npx wrangler login
```
2. Create an R2 bucket:
```
npx wrangler r2 bucket create pipelines-tutorial
```
```
npx wrangler r2 bucket create pipelines-tutorial
```
</Steps>
@ -60,8 +60,9 @@ This guide will instruct you through:
3. Enter the bucket name: pipelines-tutorial
4. Select **Create bucket**.
</Steps>
</TabItem>
</TabItem>
</Tabs>
## 2. Enable R2 Data Catalog
@ -89,8 +90,9 @@ When you run this command, take note of the "Warehouse" and "Catalog URI". You w
3. Switch to the **Settings** tab, scroll down to **R2 Data Catalog**, and select **Enable**.
4. Once enabled, note the **Catalog URI** and **Warehouse name**.
</Steps>
</TabItem>
</TabItem>
</Tabs>
## 3. Create an API token
@ -127,30 +129,31 @@ This token also includes the R2 SQL Read permission, which allows you to query y
First, create a schema file that defines your ecommerce data structure:
**Create `schema.json`:**
```json
{
"fields": [
{
"name": "user_id",
"type": "string",
"required": true
},
{
"name": "event_type",
"type": "string",
"required": true
},
{
"name": "product_id",
"type": "string",
"required": false
},
{
"name": "amount",
"type": "float64",
"required": false
}
]
"fields": [
{
"name": "user_id",
"type": "string",
"required": true
},
{
"name": "event_type",
"type": "string",
"required": true
},
{
"name": "product_id",
"type": "string",
"required": false
},
{
"name": "amount",
"type": "float64",
"required": false
}
]
}
```
@ -193,7 +196,7 @@ After setup completes, note the HTTP endpoint URL displayed in the final output.
<Steps>
1. In the Cloudflare dashboard, go to **Pipelines** > **Pipelines**.
<DashButton url="/?to=/:account/pipelines" />
<DashButton url="/?to=/:account/pipelines/overview" />
2. Select **Create Pipeline**.
@ -208,28 +211,28 @@ After setup completes, note the HTTP endpoint URL displayed in the final output.
- Copy in the schema:
```json
{
"fields": [
{
"name": "user_id",
"type": "string",
"required": true
},
{
"name": "event_type",
"type": "string",
"required": true
},
{
"name": "product_id",
"type": "string",
"required": false
},
{
"name": "amount",
"type": "f64",
"required": false
}
]
"fields": [
{
"name": "user_id",
"type": "string",
"required": true
},
{
"name": "event_type",
"type": "string",
"required": true
},
{
"name": "product_id",
"type": "string",
"required": false
},
{
"name": "amount",
"type": "f64",
"required": false
}
]
}
```
- Select **Next**
@ -255,6 +258,7 @@ After setup completes, note the HTTP endpoint URL displayed in the final output.
- Select **Create Pipeline**
8. After pipeline creation, note the **Stream ID** for the next step.
</Steps>
</TabItem>
@ -300,6 +304,7 @@ Replace `{stream-id}` with your actual stream endpoint from the pipeline setup.
3. You should see Iceberg metadata files and data files created by your pipeline. Note: If you aren't seeing any files in your bucket, try waiting a couple of minutes and trying again.
4. The data is organized in the Apache Iceberg format with metadata tracking table versions.
</Steps>
## 7. Query your data using R2 SQL

2
src/content/docs/pipelines/pipelines/manage-pipelines.mdx
View file

@ -23,7 +23,7 @@ Pipelines execute SQL statements that define how data flows from streams to sink
<Steps>
1. In the Cloudflare dashboard, go to the **Pipelines** page.
<DashButton url="/?to=/:account/pipelines" />
<DashButton url="/?to=/:account/pipelines/overview" />
2. Select **Create Pipeline** to launch the pipeline creation wizard.
3. Follow the wizard to configure your stream, sink, and SQL transformation.
</Steps>

2
src/content/docs/pipelines/sinks/manage-sinks.mdx
View file

@ -23,7 +23,7 @@ Sinks are made available to pipelines as SQL tables using the sink name (e.g., `
<Steps>
1. In the Cloudflare dashboard, go to the **Pipelines** page.
<DashButton url="/?to=/:account/pipelines" />
<DashButton url="/?to=/:account/pipelines/overview" />
2. Select **Create Pipeline** to launch the pipeline creation wizard.
3. Complete the wizard to create your sink along with the associated stream and pipeline.
</Steps>

2
src/content/docs/pipelines/streams/manage-streams.mdx
View file

@ -23,7 +23,7 @@ Streams are made available to pipelines as SQL tables using the stream name (e.g
<Steps>
1. In the Cloudflare dashboard, go to the **Pipelines** page.
<DashButton url="/?to=/:account/pipelines" />
<DashButton url="/?to=/:account/pipelines/overview" />
2. Select **Create Pipeline** to launch the pipeline creation wizard.
3. Complete the wizard to create your stream along with the associated sink and pipeline.
</Steps>

112
src/content/docs/r2-sql/get-started.mdx
View file

@ -36,15 +36,15 @@ This guide will instruct you through:
<Steps>
1. If not already logged in, run:
```
npx wrangler login
```
```
npx wrangler login
```
2. Create an R2 bucket:
```
npx wrangler r2 bucket create pipelines-tutorial
```
```
npx wrangler r2 bucket create pipelines-tutorial
```
</Steps>
@ -60,8 +60,9 @@ This guide will instruct you through:
3. Enter the bucket name: pipelines-tutorial
4. Select **Create bucket**.
</Steps>
</TabItem>
</TabItem>
</Tabs>
## 2. Enable R2 Data Catalog
@ -89,8 +90,9 @@ When you run this command, take note of the "Warehouse" and "Catalog URI". You w
3. Switch to the **Settings** tab, scroll down to **R2 Data Catalog**, and select **Enable**.
4. Once enabled, note the **Catalog URI** and **Warehouse name**.
</Steps>
</TabItem>
</TabItem>
</Tabs>
## 3. Create an API token
@ -127,30 +129,31 @@ This token also includes the R2 SQL Read permission, which allows you to query y
First, create a schema file that defines your ecommerce data structure:
**Create `schema.json`:**
```json
{
"fields": [
{
"name": "user_id",
"type": "string",
"required": true
},
{
"name": "event_type",
"type": "string",
"required": true
},
{
"name": "product_id",
"type": "string",
"required": false
},
{
"name": "amount",
"type": "float64",
"required": false
}
]
"fields": [
{
"name": "user_id",
"type": "string",
"required": true
},
{
"name": "event_type",
"type": "string",
"required": true
},
{
"name": "product_id",
"type": "string",
"required": false
},
{
"name": "amount",
"type": "float64",
"required": false
}
]
}
```
@ -193,7 +196,7 @@ After setup completes, note the HTTP endpoint URL displayed in the final output.
<Steps>
1. In the Cloudflare dashboard, go to **Pipelines** > **Pipelines**.
<DashButton url="/?to=/:account/pipelines" />
<DashButton url="/?to=/:account/pipelines/overview" />
2. Select **Create Pipeline**.
@ -208,28 +211,28 @@ After setup completes, note the HTTP endpoint URL displayed in the final output.
- Copy in the schema:
```json
{
"fields": [
{
"name": "user_id",
"type": "string",
"required": true
},
{
"name": "event_type",
"type": "string",
"required": true
},
{
"name": "product_id",
"type": "string",
"required": false
},
{
"name": "amount",
"type": "f64",
"required": false
}
]
"fields": [
{
"name": "user_id",
"type": "string",
"required": true
},
{
"name": "event_type",
"type": "string",
"required": true
},
{
"name": "product_id",
"type": "string",
"required": false
},
{
"name": "amount",
"type": "f64",
"required": false
}
]
}
```
- Select **Next**
@ -255,6 +258,7 @@ After setup completes, note the HTTP endpoint URL displayed in the final output.
- Select **Create Pipeline**
8. After pipeline creation, note the **Stream ID** for the next step.
</Steps>
</TabItem>
@ -300,6 +304,7 @@ Replace `{stream-id}` with your actual stream endpoint from the pipeline setup.
3. You should see Iceberg metadata files and data files created by your pipeline. Note: If you aren't seeing any files in your bucket, try waiting a couple of minutes and trying again.
4. The data is organized in the Apache Iceberg format with metadata tracking table versions.
</Steps>
## 7. Query your data using R2 SQL
@ -337,6 +342,7 @@ Replace `YOUR_WAREHOUSE_NAME` with the warehouse name from step 2.
You can also query this table with any engine that supports Apache Iceberg. To learn more about connecting other engines to R2 Data Catalog, refer to [Connect to Iceberg engines](/r2/data-catalog/config-examples/).
## Learn more
<LinkCard
title="Managing R2 Data Catalogs"
href="/r2/data-catalog/manage-catalogs/"

4
src/content/docs/r2-sql/tutorials/end-to-end-pipeline.mdx
View file

@ -139,7 +139,7 @@ When you run this command, take note of the "Warehouse" and "Catalog URI". You w
</Tabs>
:::note
Copy the `warehouse` (ACCOUNTID_BUCKETNAME) and paste it in the `export` below. We will use it later in the tutorial.
Copy the `warehouse` (ACCOUNTID_BUCKETNAME) and paste it in the `export` below. We will use it later in the tutorial.
:::
```bash
@ -285,7 +285,7 @@ npx wrangler pipelines create raw_events_pipeline \
1. In the Cloudflare dashboard, go to **Pipelines** > **Pipelines**.
<DashButton url="/?to=/:account/pipelines" />
<DashButton url="/?to=/:account/pipelines/overview" />
2. Select **Create Pipeline**.

78
src/content/docs/stream/edit-videos/video-clipping.mdx
View file

@ -1,8 +1,8 @@
---
pcx_content_type: how-to
title: Clip videos
---
import { DashButton } from "~/components";
With video clipping, also referred to as "trimming" or changing the length of the video, you can change the start and end points of a video so viewers only see a specific "clip" of the video. For example, if you have a 20 minute video but only want to share a five minute clip from the middle of the video, you can clip the video to remove the content before and after the five minute clip.
@ -11,10 +11,8 @@ Refer to the [Video clipping API documentation](/api/resources/stream/subresourc
:::note[Note:]
Clipping works differently for live streams and recordings. For more information, refer to [Live instant clipping](/stream/stream-live/live-instant-clipping/).
:::
## Prerequisites
@ -27,23 +25,21 @@ To clip your video, determine the start and end times you want to use from the e
:::note
Clipped videos will not inherit the `scheduledDeletion` date. To set the deletion date, you must clip the video first and then set the deletion date.
:::
```json title="Required parameters"
{
"clippedFromVideoUID": "0ea62994907491cf9ebefb0a34c1e2c6",
"startTimeSeconds": 20,
"endTimeSeconds": 40
"clippedFromVideoUID": "0ea62994907491cf9ebefb0a34c1e2c6",
"startTimeSeconds": 20,
"endTimeSeconds": 40
}
```
* **`clippedFromVideoUID`**: The unique identifier for the video used to create the new, clipped video.
* **`startTimeSeconds`**: The timestamp from the existing video that indicates when the new video begins.
* **`endTimeSeconds`**: The timestamp from the existing video that indicates when the new video ends. <br/><br/>
- **`clippedFromVideoUID`**: The unique identifier for the video used to create the new, clipped video.
- **`startTimeSeconds`**: The timestamp from the existing video that indicates when the new video begins.
- **`endTimeSeconds`**: The timestamp from the existing video that indicates when the new video ends. <br/><br/>
```bash title="Example: Clip a video" {5,6,7}
curl --location --request POST 'https://api.cloudflare.com/client/v4/accounts/<YOUR_ACCOUND_ID_HERE>/stream/clip' \
@ -58,7 +54,7 @@ curl --location --request POST 'https://api.cloudflare.com/client/v4/accounts/<Y
You can check whether your video is ready to play on the **Stream** page of the Cloudflare dashboard.
<DashButton url="/?to=/:account/stream" />
<DashButton url="/?to=/:account/stream/videos" />
While the clipped video processes, the video status response displays **Queued**. When the clipping process is complete, the video status changes to **Ready** and displays the new name of the clipped video and the new duration.
@ -70,12 +66,12 @@ When you clip a video, you can also specify a new name for the clipped video. In
```json title="Example: Specify a custom name" {6}
{
"clippedFromVideoUID": "0ea62994907491cf9ebefb0a34c1e2c6",
"startTimeSeconds": 10,
"endTimeSeconds": 15,
"meta": {
"name": "overriding-filename-clip.mp4"
}
"clippedFromVideoUID": "0ea62994907491cf9ebefb0a34c1e2c6",
"startTimeSeconds": 10,
"endTimeSeconds": 15,
"meta": {
"name": "overriding-filename-clip.mp4"
}
}
```
@ -87,15 +83,15 @@ You can also add a custom watermark to your video. For more information on water
```json title="Example: Clip a video, set a new video name, and apply a watermark" {5,6,9}
{
"clippedFromVideoUID": "0ea62994907491cf9ebefb0a34c1e2c6",
"startTimeSeconds": 10,
"endTimeSeconds": 15,
"watermark": {
"uid": "4babd675387c3d927f58c41c761978fe"
},
"meta": {
"name": "overriding-filename-clip.mp4"
}
"clippedFromVideoUID": "0ea62994907491cf9ebefb0a34c1e2c6",
"startTimeSeconds": 10,
"endTimeSeconds": 15,
"watermark": {
"uid": "4babd675387c3d927f58c41c761978fe"
},
"meta": {
"name": "overriding-filename-clip.mp4"
}
}
```
@ -105,13 +101,13 @@ When clipping a video, you can make a video private and accessible only to certa
```json title="Example: Clip a video and require signed URLs" {5}
{
"clippedFromVideoUID": "0ea62994907491cf9ebefb0a34c1e2c6",
"startTimeSeconds": 10,
"endTimeSeconds": 15,
"requireSignedURLs": true,
"meta": {
"name": "signed-urls-demo.mp4"
}
"clippedFromVideoUID": "0ea62994907491cf9ebefb0a34c1e2c6",
"startTimeSeconds": 10,
"endTimeSeconds": 15,
"requireSignedURLs": true,
"meta": {
"name": "signed-urls-demo.mp4"
}
}
```
@ -123,12 +119,12 @@ You can also specify a thumbnail image for your video using a percentage value.
```json title="Example: Clip a video with a thumbnail generated at the 50% mark" {5}
{
"clippedFromVideoUID": "0ea62994907491cf9ebefb0a34c1e2c6",
"startTimeSeconds": 10,
"endTimeSeconds": 15,
"thumbnailTimestampPct": 0.5,
"meta": {
"name": "thumbnail_percentage.mp4"
}
"clippedFromVideoUID": "0ea62994907491cf9ebefb0a34c1e2c6",
"startTimeSeconds": 10,
"endTimeSeconds": 15,
"thumbnailTimestampPct": 0.5,
"meta": {
"name": "thumbnail_percentage.mp4"
}
}
```

31
src/content/docs/stream/faq.mdx
View file

@ -6,10 +6,9 @@ sidebar:
head:
- tag: title
content: Frequently asked questions about Cloudflare Stream
---
import { GlossaryTooltip, DashButton } from "~/components"
import { GlossaryTooltip, DashButton } from "~/components";
## Stream
@ -19,23 +18,21 @@ Cloudflare decides on which bitrate, resolution, and codec is best for you. We d
### Can I download original video files from Stream?
You cannot download the *exact* input file that you uploaded. However, depending on your use case, you can use the [Downloadable Videos](/stream/viewing-videos/download-videos/) feature to get encoded MP4s for use cases like offline viewing.
You cannot download the _exact_ input file that you uploaded. However, depending on your use case, you can use the [Downloadable Videos](/stream/viewing-videos/download-videos/) feature to get encoded MP4s for use cases like offline viewing.
### Is there a limit to the amount of videos I can upload?
* By default, a video upload can be at most 30 GB.
- By default, a video upload can be at most 30 GB.
* By default, you can have up to 120 videos queued or being encoded simultaneously. Videos in the `ready` status are playable but may still be encoding certain quality levels until the `pctComplete` reaches 100. Videos in the `error`, `ready`, or `pendingupload` state do not count toward this limit. If you need the concurrency limit raised, [contact Cloudflare support](/support/contacting-cloudflare-support/) explaining your use case and why you would like the limit raised.
- By default, you can have up to 120 videos queued or being encoded simultaneously. Videos in the `ready` status are playable but may still be encoding certain quality levels until the `pctComplete` reaches 100. Videos in the `error`, `ready`, or `pendingupload` state do not count toward this limit. If you need the concurrency limit raised, [contact Cloudflare support](/support/contacting-cloudflare-support/) explaining your use case and why you would like the limit raised.
:::note
The limit to the number of videos only applies to videos being uploaded to Cloudflare Stream. This limit is not related to the number of end users streaming videos.
:::
* An account cannot upload videos if the total video duration exceeds the video storage capacity purchased.
- An account cannot upload videos if the total video duration exceeds the video storage capacity purchased.
Limits apply to Direct Creator Uploads at the time of upload URL creation.
@ -79,10 +76,8 @@ You can embed the Stream player on the following platforms:
:::note[Note]
Cloudflare Stream is not available on Chromium, as Chromium does not support H.264 videos.
:::
<table-wrap>
@ -100,13 +95,13 @@ Cloudflare Stream is not available on Chromium, as Chromium does not support H.2
If you are producing a brand new file for Cloudflare Stream, we recommend you use the following settings:
* MP4 containers, AAC audio codec, H264 video codec, 30 or below frames per second
* moov atom should be at the front of the file (Fast Start)
* H264 progressive scan (no interlacing)
* H264 high profile
* Closed GOP
* Content should be encoded and uploaded in the same frame rate it was recorded
* Mono or Stereo audio (Stream will mix audio tracks with more than 2 channels down to stereo)
- MP4 containers, AAC audio codec, H264 video codec, 30 or below frames per second
- moov atom should be at the front of the file (Fast Start)
- H264 progressive scan (no interlacing)
- H264 high profile
- Closed GOP
- Content should be encoded and uploaded in the same frame rate it was recorded
- Mono or Stereo audio (Stream will mix audio tracks with more than 2 channels down to stereo)
Below are bitrate recommendations for encoding new videos for Stream:
@ -149,7 +144,7 @@ Content-Security-Policy: connect-src 'self' *.videodelivery.net *.cloudflarestre
To ensure **only** videos from **your** Cloudflare Stream account can be played on your website, replace `*` in `*.cloudflarestream.com` and `*.videodelivery.net` in the examples above with `customer-<CODE>`, replacing `<CODE>` with your unique customer code. To find your unique customer code in the Cloudflare dashboard, go to the **Stream** page.
<DashButton url="/?to=/:account/stream" />
<DashButton url="/?to=/:account/stream/videos" />
This code is unique to your Cloudflare Account.

130
src/content/docs/stream/get-started.mdx
View file

@ -3,10 +3,9 @@ pcx_content_type: get-started
title: Get started
sidebar:
order: 2
---
import { DashButton } from "~/components";
import { DashButton } from "~/components";
:::note[Media Transformations is now GA:]
@ -14,8 +13,8 @@ Billing for Media Transformations will begin on November 1st, 2025.
:::
* [Upload your first video](/stream/get-started#upload-your-first-video)
* [Start your first live stream](/stream/get-started#start-your-first-live-stream)
- [Upload your first video](/stream/get-started#upload-your-first-video)
- [Start your first live stream](/stream/get-started#start-your-first-live-stream)
## Upload your first video
@ -23,7 +22,7 @@ Billing for Media Transformations will begin on November 1st, 2025.
You can upload videos using the API or directly on the **Stream** page of the Cloudflare dashboard.
<DashButton url="/?to=/:account/stream" />
<DashButton url="/?to=/:account/stream/videos" />
To use the API, replace the `API_TOKEN` and `ACCOUNT_ID` values with your credentials in the example below.
@ -49,25 +48,25 @@ https://api.cloudflare.com/client/v4/accounts/<ACCOUNT_ID>/stream/<VIDEO_UID>
```json title="Response" {6}
{
"result": {
"uid": "6b9e68b07dfee8cc2d116e4c51d6a957",
"preview": "https://customer-f33zs165nr7gyfy4.cloudflarestream.com/6b9e68b07dfee8cc2d116e4c51d6a957/watch",
"thumbnail": "https://customer-f33zs165nr7gyfy4.cloudflarestream.com/6b9e68b07dfee8cc2d116e4c51d6a957/thumbnails/thumbnail.jpg",
"readyToStream": true,
"status": {
"state": "ready"
},
"meta": {
"downloaded-from": "https://storage.googleapis.com/stream-example-bucket/video.mp4",
"name": "My First Stream Video"
},
"created": "2020-10-16T20:20:17.872170843Z",
"size": 9032701,
//...
},
"success": true,
"errors": [],
"messages": []
"result": {
"uid": "6b9e68b07dfee8cc2d116e4c51d6a957",
"preview": "https://customer-f33zs165nr7gyfy4.cloudflarestream.com/6b9e68b07dfee8cc2d116e4c51d6a957/watch",
"thumbnail": "https://customer-f33zs165nr7gyfy4.cloudflarestream.com/6b9e68b07dfee8cc2d116e4c51d6a957/thumbnails/thumbnail.jpg",
"readyToStream": true,
"status": {
"state": "ready"
},
"meta": {
"downloaded-from": "https://storage.googleapis.com/stream-example-bucket/video.mp4",
"name": "My First Stream Video"
},
"created": "2020-10-16T20:20:17.872170843Z",
"size": 9032701
//...
},
"success": true,
"errors": [],
"messages": []
}
```
@ -79,33 +78,35 @@ To play video on your website with the [Stream Player](/stream/viewing-videos/us
```html
<iframe
src="https://customer-<CODE>.cloudflarestream.com/<VIDEO_UID>/iframe"
title="Example Stream video"
frameBorder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowFullScreen>
src="https://customer-<CODE>.cloudflarestream.com/<VIDEO_UID>/iframe"
title="Example Stream video"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
>
</iframe>
```
The embed code above can also be found on the **Stream** page of the Cloudflare dashboard.
<DashButton url="/?to=/:account/stream" />
<DashButton url="/?to=/:account/stream/videos" />
<figure data-type="stream">
<div class="AspectRatio" style="--aspect-ratio: calc(16 / 9)">
<iframe
class="AspectRatio--content"
src="https://iframe.videodelivery.net/5d5bc37ffcf54c9b82e996823bffbb81?muted=true"
title="Example Stream video"
frame-border="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"></iframe>
</div>
<div class="AspectRatio" style="--aspect-ratio: calc(16 / 9)">
<iframe
class="AspectRatio--content"
src="https://iframe.videodelivery.net/5d5bc37ffcf54c9b82e996823bffbb81?muted=true"
title="Example Stream video"
frame-border="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"
></iframe>
</div>
</figure>
### Next steps
* [Edit your video](/stream/edit-videos/) and add captions or watermarks
* [Customize the Stream player](/stream/viewing-videos/using-the-stream-player/)
- [Edit your video](/stream/edit-videos/) and add captions or watermarks
- [Customize the Stream player](/stream/viewing-videos/using-the-stream-player/)
## Start your first live stream
@ -126,22 +127,22 @@ https://api.cloudflare.com/client/v4/accounts/<ACCOUNT_ID>/stream/live_inputs
```json title="Response"
{
"uid": "f256e6ea9341d51eea64c9454659e576",
"rtmps": {
"url": "rtmps://live.cloudflare.com:443/live/",
"streamKey": "MTQ0MTcjM3MjI1NDE3ODIyNTI1MjYyMjE4NTI2ODI1NDcxMzUyMzcf256e6ea9351d51eea64c9454659e576"
},
"created": "2021-09-23T05:05:53.451415Z",
"modified": "2021-09-23T05:05:53.451415Z",
"meta": {
"name": "test stream"
},
"status": null,
"recording": {
"mode": "automatic",
"requireSignedURLs": false,
"allowedOrigins": null
}
"uid": "f256e6ea9341d51eea64c9454659e576",
"rtmps": {
"url": "rtmps://live.cloudflare.com:443/live/",
"streamKey": "MTQ0MTcjM3MjI1NDE3ODIyNTI1MjYyMjE4NTI2ODI1NDcxMzUyMzcf256e6ea9351d51eea64c9454659e576"
},
"created": "2021-09-23T05:05:53.451415Z",
"modified": "2021-09-23T05:05:53.451415Z",
"meta": {
"name": "test stream"
},
"status": null,
"recording": {
"mode": "automatic",
"requireSignedURLs": false,
"allowedOrigins": null
}
}
```
@ -157,22 +158,23 @@ To play the live stream you just started on your website with the [Stream Player
```html
<iframe
src="https://customer-<CODE>.cloudflarestream.com/<VIDEO_UID>/iframe"
title="Example Stream video"
frameBorder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowFullScreen>
src="https://customer-<CODE>.cloudflarestream.com/<VIDEO_UID>/iframe"
title="Example Stream video"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
>
</iframe>
```
The embed code above can also be found on the **Stream** page of the Cloudflare dashboard.
<DashButton url="/?to=/:account/stream" />
<DashButton url="/?to=/:account/stream/videos" />
### Next steps
* [Secure your stream](/stream/viewing-videos/securing-your-stream/)
* [View live viewer counts](/stream/getting-analytics/live-viewer-count/)
- [Secure your stream](/stream/viewing-videos/securing-your-stream/)
- [View live viewer counts](/stream/getting-analytics/live-viewer-count/)
## Accessibility considerations

4
src/content/docs/stream/pricing.mdx
View file

@ -4,6 +4,7 @@ title: Pricing
sidebar:
order: 30
---
import { DashButton } from "~/components";
:::note[Media Transformations is now GA:]
@ -27,7 +28,7 @@ Ingress (sending your content to us) and encoding are always free. Bandwidth is
Storage is a prepaid pricing dimension purchased in increments of $5 per 1,000 minutes stored, regardless of file size. You can check how much storage you have and how much you have used on the **Stream** page of the Cloudflare dashboard.
<DashButton url="/?to=/:account/stream" />
<DashButton url="/?to=/:account/stream/videos" />
Storage is consumed by:
@ -54,6 +55,7 @@ Enterprise customers _may_ continue to upload new content beyond their contracte
### Minutes of video delivered
Delivery is a post-paid, usage-based pricing dimension billed at $1 per 1,000 minutes delivered. You can check how much delivery you have used on the **Billing** page or the Stream **Analytics** page of the Cloudflare dashboard.
<DashButton url="/?to=/:account/billing" />
<DashButton url="/?to=/:account/stream/analytics" />

5
src/content/docs/stream/uploading-videos/upload-video-file.mdx
View file

@ -3,8 +3,8 @@ pcx_content_type: how-to
title: Basic video uploads
sidebar:
order: 2
---
import { DashButton } from "~/components";
## Basic Uploads
@ -15,7 +15,7 @@ For files smaller than 200 MB, you can use simple form-based uploads.
1. In the Cloudflare dashboard, go to the **Stream** page.
<DashButton url="/?to=/:account/stream" />
<DashButton url="/?to=/:account/stream/videos" />
2. Drag and drop your video into the **Quick upload** area. You can also click to browse for the file on your machine.
@ -35,4 +35,3 @@ https://api.cloudflare.com/client/v4/accounts/{account_id}/stream
:::note
Note that cURL's `--form` flag automatically configures the `content-type` header and maps `my-video.mp4` to a form input called `file`.
:::

2
src/content/docs/stream/viewing-videos/using-own-player/index.mdx
View file

@ -41,7 +41,7 @@ https://customer-<CODE>.cloudflarestream.com/<UID>/manifest/video.m3u8?protocol=
1. In the Cloudflare dashboard, go to the **Stream** page.
<DashButton url="/?to=/:account/stream" />
<DashButton url="/?to=/:account/stream/videos" />
2. From the list of videos, locate your video and select it.
3. From the **Settings** tab, locate the **HLS Manifest URL** and **Dash Manifest URL**.

141
src/content/docs/stream/viewing-videos/using-the-stream-player/index.mdx
View file

@ -3,42 +3,41 @@ pcx_content_type: reference
title: Use the Stream Player
sidebar:
order: 2
---
import { InlineBadge, DashButton } from "~/components"
import { InlineBadge, DashButton } from "~/components";
Cloudflare provides a customizable web player that can play both on-demand and live video, and requires zero additional engineering work.
<figure data-type="stream">
<div class="AspectRatio" style="--aspect-ratio: calc(16 / 9)">
<iframe
class="AspectRatio--content"
src="https://iframe.videodelivery.net/5d5bc37ffcf54c9b82e996823bffbb81?mute=true"
style="border: none"
frame-border="0"
allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;"
allow-full-screen
></iframe>
</div>
<div class="AspectRatio" style="--aspect-ratio: calc(16 / 9)">
<iframe
class="AspectRatio--content"
src="https://iframe.videodelivery.net/5d5bc37ffcf54c9b82e996823bffbb81?mute=true"
style="border: none"
frame-border="0"
allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;"
allow-full-screen
></iframe>
</div>
</figure>
To add the Stream Player to a web page, you can either:
* Generate an embed code on the **Stream** page of the Cloudflare dashboard for a specific video or live input.
- Generate an embed code on the **Stream** page of the Cloudflare dashboard for a specific video or live input.
<DashButton url="/?to=/:account/stream" />
<DashButton url="/?to=/:account/stream/videos" />
* Use the code example below, replacing `<VIDEO_UID>` with the video UID (or [signed token](/stream/viewing-videos/securing-your-stream/)) and `<CODE>` with the your unique customer code, which can be found in the Stream Dashboard.
- Use the code example below, replacing `<VIDEO_UID>` with the video UID (or [signed token](/stream/viewing-videos/securing-your-stream/)) and `<CODE>` with the your unique customer code, which can be found in the Stream Dashboard.
```html
<iframe
src="https://customer-<CODE>.cloudflarestream.com/<VIDEO_UID>/iframe"
style="border: none"
height="720"
width="1280"
allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;"
allowfullscreen="true"
src="https://customer-<CODE>.cloudflarestream.com/<VIDEO_UID>/iframe"
style="border: none"
height="720"
width="1280"
allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;"
allowfullscreen="true"
></iframe>
```
@ -52,12 +51,12 @@ Changing the `height` and `width` attributes on the `iframe` will change the pix
```html
<iframe
src="https://customer-<CODE>.cloudflarestream.com/<VIDEO_UID>/iframe"
style="border: none"
height="400"
width="400"
allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;"
allowfullscreen="true"
src="https://customer-<CODE>.cloudflarestream.com/<VIDEO_UID>/iframe"
style="border: none"
height="400"
width="400"
allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;"
allowfullscreen="true"
></iframe>
```
@ -68,12 +67,12 @@ To make an iframe responsive, it needs styles to enforce an aspect ratio by sett
```html
<!-- padding-top calculation is height / width (assuming 16:9 aspect ratio) -->
<div style="position: relative; padding-top: 56.25%">
<iframe
src="https://customer-<CODE>.cloudflarestream.com/<VIDEO_UID>/iframe"
style="border: none; position: absolute; top: 0; height: 100%; width: 100%"
allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;"
allowfullscreen="true"
></iframe>
<iframe
src="https://customer-<CODE>.cloudflarestream.com/<VIDEO_UID>/iframe"
style="border: none; position: absolute; top: 0; height: 100%; width: 100%"
allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;"
allowfullscreen="true"
></iframe>
</div>
```
@ -83,9 +82,8 @@ Player options are configured with querystring parameters in the iframe's `src`
`https://customer-<CODE>.cloudflarestream.com/<VIDEO_UID>/iframe?autoplay=true&muted=true`
* `autoplay` default: `false`
* If the autoplay flag is included as a querystring parameter, the player will attempt to autoplay the video. If you don't want the video to autoplay, don't include the autoplay flag at all (instead of setting it to `autoplay=false`.) Note that mobile browsers generally do not support this attribute, the user must tap the screen to begin video playback. Please consider mobile users or users with Internet usage limits as some users don't have unlimited Internet access before using this attribute.
- `autoplay` default: `false`
- If the autoplay flag is included as a querystring parameter, the player will attempt to autoplay the video. If you don't want the video to autoplay, don't include the autoplay flag at all (instead of setting it to `autoplay=false`.) Note that mobile browsers generally do not support this attribute, the user must tap the screen to begin video playback. Please consider mobile users or users with Internet usage limits as some users don't have unlimited Internet access before using this attribute.
:::caution
@ -93,42 +91,35 @@ Player options are configured with querystring parameters in the iframe's `src`
:::
* `controls` default: `true`
- `controls` default: `true`
- Shows video controls such as buttons for play/pause, volume controls.
* Shows video controls such as buttons for play/pause, volume controls.
* `defaultTextTrack`
* Will initialize the player with the specified language code's text track enabled. The value should be the BCP-47 language code that was used to [upload the text track](/stream/edit-videos/adding-captions/). If the specified language code has no captions available, the player will behave as though no language code had been provided.
- `defaultTextTrack`
- Will initialize the player with the specified language code's text track enabled. The value should be the BCP-47 language code that was used to [upload the text track](/stream/edit-videos/adding-captions/). If the specified language code has no captions available, the player will behave as though no language code had been provided.
:::caution
This will *only* work once during initialization. Beyond that point the user has full control over their text track settings.
This will _only_ work once during initialization. Beyond that point the user has full control over their text track settings.
:::
* `letterboxColor`
* Any valid [CSS color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) provided will be applied to the letterboxing/pillarboxing of the player's UI. This can be set to `transparent` to avoid letterboxing/pillarboxing when not in fullscreen mode.
- `letterboxColor`
- Any valid [CSS color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) provided will be applied to the letterboxing/pillarboxing of the player's UI. This can be set to `transparent` to avoid letterboxing/pillarboxing when not in fullscreen mode.
:::note
**Note:** Like all query string parameters, this value *must* be URI encoded. For example, the color value `hsl(120 80% 95%)` can be encoded using JavaScript's `encodeURIComponent()` function to `hsl(120%2080%25%2095%25)`.
**Note:** Like all query string parameters, this value _must_ be URI encoded. For example, the color value `hsl(120 80% 95%)` can be encoded using JavaScript's `encodeURIComponent()` function to `hsl(120%2080%25%2095%25)`.
:::
* `loop` default: `false`
- `loop` default: `false`
- If enabled the player will automatically seek back to the start upon reaching the end of the video.
* If enabled the player will automatically seek back to the start upon reaching the end of the video.
- `muted` default: `false`
- If set, the audio will be initially silenced.
* `muted` default: `false`
* If set, the audio will be initially silenced.
* `preload` default: `none`
* This enumerated option is intended to provide a hint to the browser about what the author thinks will lead to the best user experience. You may specify the value `preload="auto"` to preload the beginning of the video. Not including the option or using `preload="metadata"` will just load the metadata needed to start video playback when requested.
- `preload` default: `none`
- This enumerated option is intended to provide a hint to the browser about what the author thinks will lead to the best user experience. You may specify the value `preload="auto"` to preload the beginning of the video. Not including the option or using `preload="metadata"` will just load the metadata needed to start video playback when requested.
:::note
@ -136,40 +127,32 @@ Player options are configured with querystring parameters in the iframe's `src`
:::
* `poster` defaults to the first frame of the video
* A URL for an image to be shown before the video is started or while the video is downloading. If this attribute isn't specified, a thumbnail image of the video is shown.
- `poster` defaults to the first frame of the video
- A URL for an image to be shown before the video is started or while the video is downloading. If this attribute isn't specified, a thumbnail image of the video is shown.
:::note
**Note:** Like all query string parameters, this value *must* be URI encoded. For example, the thumbnail at `https://customer-f33zs165nr7gyfy4.cloudflarestream.com/6b9e68b07dfee8cc2d116e4c51d6a957/thumbnails/thumbnail.jpg?time=1s&height=270` can be encoded using JavaScript's `encodeURIComponent()` function to `https%3A%2F%2Fcustomer-f33zs165nr7gyfy4.cloudflarestream.com%2F6b9e68b07dfee8cc2d116e4c51d6a957%2Fthumbnails%2Fthumbnail.jpg%3Ftime%3D1s%26height%3D600`.
**Note:** Like all query string parameters, this value _must_ be URI encoded. For example, the thumbnail at `https://customer-f33zs165nr7gyfy4.cloudflarestream.com/6b9e68b07dfee8cc2d116e4c51d6a957/thumbnails/thumbnail.jpg?time=1s&height=270` can be encoded using JavaScript's `encodeURIComponent()` function to `https%3A%2F%2Fcustomer-f33zs165nr7gyfy4.cloudflarestream.com%2F6b9e68b07dfee8cc2d116e4c51d6a957%2Fthumbnails%2Fthumbnail.jpg%3Ftime%3D1s%26height%3D600`.
:::
* `primaryColor`
* Any valid [CSS color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) provided will be applied to certain elements of the player's UI.
- `primaryColor`
- Any valid [CSS color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) provided will be applied to certain elements of the player's UI.
:::note
**Note:** Like all query string parameters, this value *must* be URI encoded. For example, the color value `hsl(120 80% 95%)` can be encoded using JavaScript's `encodeURIComponent()` function to `hsl(120%2080%25%2095%25)`.
**Note:** Like all query string parameters, this value _must_ be URI encoded. For example, the color value `hsl(120 80% 95%)` can be encoded using JavaScript's `encodeURIComponent()` function to `hsl(120%2080%25%2095%25)`.
:::
* `src`
* The video id from the video you've uploaded to Cloudflare Stream should be included here.
* `startTime`
* A timestamp that specifies the time when playback begins. If a plain number is used such as `?startTime=123`, it will be interpreted as `123` seconds. More human readable timestamps can also be used, such as `?startTime=1h12m27s` for `1 hour, 12 minutes, and 27 seconds`.
* `ad-url`
* The Stream Player supports VAST Tags to insert ads such as prerolls. If you have a VAST tag URI, you can pass it to the Stream Player by setting the `ad-url` parameter. The URI must be encoded using a function like JavaScript's `encodeURIComponent()`.
- `src`
- The video id from the video you've uploaded to Cloudflare Stream should be included here.
- `startTime`
- A timestamp that specifies the time when playback begins. If a plain number is used such as `?startTime=123`, it will be interpreted as `123` seconds. More human readable timestamps can also be used, such as `?startTime=1h12m27s` for `1 hour, 12 minutes, and 27 seconds`.
- `ad-url`
- The Stream Player supports VAST Tags to insert ads such as prerolls. If you have a VAST tag URI, you can pass it to the Stream Player by setting the `ad-url` parameter. The URI must be encoded using a function like JavaScript's `encodeURIComponent()`.
## Debug Info
@ -179,8 +162,8 @@ The Stream player Debug menu can be shown and hidden using the key combination `
After a live stream ends, a recording is automatically generated and available within 60 seconds. To ensure successful video viewing and playback, keep the following in mind:
* If a live stream ends while a viewer is watching, viewers should wait 60 seconds and then reload the player to view the recording of the live stream.
* After a live stream ends, you can check the status of the recording via the API. When the video state is `ready`, you can use one of the manifest URLs to stream the recording.
- If a live stream ends while a viewer is watching, viewers should wait 60 seconds and then reload the player to view the recording of the live stream.
- After a live stream ends, you can check the status of the recording via the API. When the video state is `ready`, you can use one of the manifest URLs to stream the recording.
While the recording of the live stream is generating, the video may report as `not-found` or `not-started`.

23
src/content/docs/style-guide/components/index.mdx
View file

@ -1,8 +1,9 @@
---
title: Components
sidebar:
order: 2
order: 2
---
import { Details } from "~/components";
When you are [contributing to the Cloudflare Docs](/style-guide/contributions/), you can use our custom components to add additional formatting, such as buttons, tabs, and collapsible sections.
@ -19,6 +20,8 @@ To add a component to a page:
```mdx
import { COMPONENT_NAME } from "~/components";
;
```
For example, if you were to add [the `DashButton` component](/style-guide/components/dash-button/) to the [Images getting started page](/images/get-started/), the top of the MDX file corresponding to that page would look like the following:
@ -29,28 +32,30 @@ To add a component to a page:
title: Getting started
sidebar:
order: 2
---
import { DashButton } from "~/components";
;
```
2. Add the component to the page by adding this text anywhere on the page you want the component to appear:
```mdx
<COMPONENT_NAME PROP_NAME="PROP_VALUE" />
<COMPONENT_NAME PROP_NAME="PROP_VALUE" />
```
For example, if you were to add the `DashButton` component to some steps in the [Images getting started page](/images/get-started/), here is how the MDX file would look:
```mdx
```mdx
1. In the Cloudflare dashboard, go to the **Transformations** page.
<DashButton url="/?to=/:account/images/delivery-zones" />
<DashButton url="/?to=/:account/images/transformations" />
2. Go to the specific zone where you want to enable transformations.
```
<Details header="This is how this example would display after it is published:">
![DashButton component example](~/assets/images/style-guide/ui-elements/dashbutton-example.png)
</Details>
<Details header="This is how this example would display after it is published:">
![DashButton component
example](~/assets/images/style-guide/ui-elements/dashbutton-example.png)
</Details>

4
src/content/docs/support/third-party-software/others/configure-cloudflare-and-heroku-over-https.mdx
View file

@ -26,9 +26,9 @@ Below, you will need to add DNS records for a subdomain and the apex domain (als
### Step 2a - Add a subdomain
In the Cloudflare dashboard, go to the **DNS** page.
In the Cloudflare dashboard, go to the **DNS Records** page.
<DashButton url="/?to=/:account/:zone/dns" />
<DashButton url="/?to=/:account/:zone/dns/records" />
Add a 'www' *CNAME* record that points to the custom domain (also known as *DNS target*) that you obtained in Step 1 above for your subdomain.

8
src/content/docs/workers/configuration/routing/custom-domains.mdx
View file

@ -156,9 +156,9 @@ If you are currently invoking a Worker using a [route](/workers/configuration/ro
To migrate the route `example.com/*`:
<Steps>
1. In the Cloudflare dashboard, go to the **DNS** page for your domain.
1. In the Cloudflare dashboard, go to the **DNS Records** page for your domain.
<DashButton url="/?to=/:account/:zone/dns" />
<DashButton url="/?to=/:account/:zone/dns/records" />
2. Delete the CNAME record for `example.com`.
3. Go to **Account Home** > **Workers & Pages**.
@ -172,9 +172,9 @@ To migrate the route `example.com/*`:
To migrate the route `example.com/*` in your [Wrangler configuration file](/workers/wrangler/configuration/):
<Steps>
1. In the Cloudflare dashboard, go to the **DNS** page for your domain.
1. In the Cloudflare dashboard, go to the **DNS Records** page for your domain.
<DashButton url="/?to=/:account/:zone/dns" />
<DashButton url="/?to=/:account/:zone/dns/records" />
2. Delete the CNAME record for `example.com`.
3. Add the following to your Wrangler file:

56
src/content/docs/workers/observability/metrics-and-analytics.mdx
View file

@ -6,10 +6,9 @@ sidebar:
head: []
description: Diagnose issues with Workers metrics, and review request data for a
zone with Workers analytics.
---
import { GlossaryTooltip, DashButton, Steps } from "~/components"
import { GlossaryTooltip, DashButton, Steps } from "~/components";
There are two graphical sources of information about your Workers traffic at a given time: Workers metrics and zone-based Workers analytics.
@ -24,9 +23,10 @@ Workers metrics aggregate request data for an individual Worker (if your Worker
<Steps>
1. In the Cloudflare dashboard, go to the **Workers & Pages** page.
<DashButton url="/?to=/:account/workers-and-pages" />
<DashButton url="/?to=/:account/workers-and-pages" />
2. In **Overview**, select your Worker to view its metrics.
</Steps>
There are two metrics that can help you understand the health of your Worker in a given moment: requests success and error metrics, and invocation statuses.
@ -35,9 +35,9 @@ There are two metrics that can help you understand the health of your Worker in
The first graph shows historical request counts from the Workers runtime broken down into successful requests, errored requests, and subrequests.
* **Total**: All incoming requests registered by a Worker. Requests blocked by [WAF](https://www.cloudflare.com/waf/) or other security features will not count.
* **Success**: Requests that returned a Success or Client Disconnected invocation status.
* **Errors**: Requests that returned a Script Threw Exception, Exceeded Resources, or Internal Error invocation status — refer to [Invocation Statuses](/workers/observability/metrics-and-analytics/#invocation-statuses) for a breakdown of where your errors are coming from.
- **Total**: All incoming requests registered by a Worker. Requests blocked by [WAF](https://www.cloudflare.com/waf/) or other security features will not count.
- **Success**: Requests that returned a Success or Client Disconnected invocation status.
- **Errors**: Requests that returned a Script Threw Exception, Exceeded Resources, or Internal Error invocation status — refer to [Invocation Statuses](/workers/observability/metrics-and-analytics/#invocation-statuses) for a breakdown of where your errors are coming from.
Request traffic data may display a drop off near the last few minutes displayed in the graph for time ranges less than six hours. This does not reflect a drop in traffic, but a slight delay in aggregation and metrics delivery.
@ -45,13 +45,26 @@ Request traffic data may display a drop off near the last few minutes displayed
Subrequests are requests triggered by calling `fetch` from within a Worker. A subrequest that throws an uncaught error will not be counted.
* **Total**: All subrequests triggered by calling `fetch` from within a Worker.
* **Cached**: The number of cached responses returned.
* **Uncached**: The number of uncached responses returned.
- **Total**: All subrequests triggered by calling `fetch` from within a Worker.
- **Cached**: The number of cached responses returned.
- **Uncached**: The number of uncached responses returned.
### Wall time per execution
<GlossaryTooltip term="wall-clock time">Wall time</GlossaryTooltip> represents the elapsed time in milliseconds between the start of a Worker invocation, and when the Workers runtime determines that no more JavaScript needs to run. Specifically, wall time per execution chart measures the wall time that the JavaScript context remained open — including time spent waiting on I/O, and time spent executing in your Worker's [`waitUntil()`](/workers/runtime-apis/context/#waituntil) handler. Wall time is not the same as the time it takes your Worker to send the final byte of a response back to the client - wall time can be higher, if tasks within `waitUntil()` are still running after the response has been sent, or it can be lower. For example, when returning a response with a large body, the Workers runtime can, in some cases, determine that no more JavaScript needs to run, and closes the JavaScript context before all the bytes have passed through and been sent.
<GlossaryTooltip term="wall-clock time">Wall time</GlossaryTooltip> represents
the elapsed time in milliseconds between the start of a Worker invocation, and
when the Workers runtime determines that no more JavaScript needs to run.
Specifically, wall time per execution chart measures the wall time that the
JavaScript context remained open — including time spent waiting on I/O, and time
spent executing in your Worker's
[`waitUntil()`](/workers/runtime-apis/context/#waituntil) handler. Wall time is
not the same as the time it takes your Worker to send the final byte of a
response back to the client - wall time can be higher, if tasks within
`waitUntil()` are still running after the response has been sent, or it can be
lower. For example, when returning a response with a large body, the Workers
runtime can, in some cases, determine that no more JavaScript needs to run, and
closes the JavaScript context before all the bytes have passed through and been
sent.
The Wall Time per execution chart shows historical wall time data broken down into relevant quantiles using [reservoir sampling](https://en.wikipedia.org/wiki/Reservoir_sampling). Learn more about [interpreting quantiles](https://www.statisticshowto.com/quantile-definition-find-easy-steps/).
@ -70,17 +83,16 @@ To review invocation statuses:
<Steps>
1. In the Cloudflare dashboard, go to the **Workers & Pages** page.
<DashButton url="/?to=/:account/workers-and-pages" />
<DashButton url="/?to=/:account/workers-and-pages" />
2. Select your Worker.
4. Find the **Summary** graph in **Metrics**.
5. Select **Errors**.
3. Find the **Summary** graph in **Metrics**.
4. Select **Errors**.
</Steps>
Worker invocation statuses indicate whether a Worker executed successfully or failed to generate a response in the Workers runtime. Invocation statuses differ from HTTP status codes. In some cases, a Worker invocation succeeds but does not generate a successful HTTP status because of another error encountered outside of the Workers runtime. Some invocation statuses result in a [Workers error code](/workers/observability/errors/#error-pages-generated-by-workers) being returned to the client.
| Invocation status | Definition | Workers error code | GraphQL field |
| ---------------------- | ---------------------------------------------------------------------------- | ------------------ | ---------------------- |
| Success | Worker executed successfully | | `success` |
@ -89,8 +101,6 @@ Worker invocation statuses indicate whether a Worker executed successfully or fa
| Exceeded resources¹ | Worker exceeded runtime limits | 1102, 1027 | `exceededResources` |
| Internal error² | Workers runtime encountered an error | | `internalError` |
¹ The Exceeded Resources status may appear when the Worker exceeds a [runtime limit](/workers/platform/limits/#request-limits). The most common cause is excessive CPU time, but is also caused by a Worker exceeding startup time or free tier limits.
² The Internal Error status may appear when the Workers runtime fails to process a request due to an internal failure in our system. These errors are not caused by any issue with the Worker code nor any resource limit. While requests with Internal Error status are rare, some may appear during normal operation. These requests are not counted towards usage for billing purposes. If you notice an elevated rate of requests with Internal Error status, review [www.cloudflarestatus.com](https://www.cloudflarestatus.com/).
@ -115,13 +125,9 @@ Zone analytics aggregate request data for all Workers assigned to any [routes](/
To review zone metrics:
<Steps>
1. In the Cloudflare dashboard, go to the **Analytics & Logs** page for your zone.
In the Cloudflare dashboard, go to the **Workers Analytics** page for your zone.
<DashButton url="/?to=/:account/:zone/analytics" />
2. Select **Workers**.
</Steps>
<DashButton url="/?to=/:account/:zone/analytics/workers" />
Zone data can be scoped by time range within the last 30 days. The dashboard includes charts and information described below.
@ -129,8 +135,8 @@ Zone data can be scoped by time range within the last 30 days. The dashboard inc
This chart shows subrequests — requests triggered by calling `fetch` from within a Worker — broken down by cache status.
* **Uncached**: Requests answered directly by your origin server or other servers responding to subrequests.
* **Cached**: Requests answered by Cloudflare’s [cache](https://www.cloudflare.com/learning/cdn/what-is-caching/). As Cloudflare caches more of your content, it accelerates content delivery and reduces load on your origin.
- **Uncached**: Requests answered directly by your origin server or other servers responding to subrequests.
- **Cached**: Requests answered by Cloudflare’s [cache](https://www.cloudflare.com/learning/cdn/what-is-caching/). As Cloudflare caches more of your content, it accelerates content delivery and reduces load on your origin.
### Bandwidth

12
src/content/docs/workers/tutorials/generate-youtube-thumbnails-with-workers-and-images.mdx
View file

@ -11,7 +11,12 @@ description: >-
This tutorial explains how to programmatically generate a custom YouTube thumbnail using Cloudflare Workers. You may want to customize the thumbnail's design, call-to-actions and images used to encourage more viewers to watch your video.
---
import { Render, PackageManagers, WranglerConfig, DashButton } from "~/components";
import {
Render,
PackageManagers,
WranglerConfig,
DashButton,
} from "~/components";
In this tutorial, you will learn how to programmatically generate a custom YouTube thumbnail using Cloudflare Workers and Cloudflare Image Resizing. You may want to generate a custom YouTube thumbnail to customize the thumbnail's design, call-to-actions and images used to encourage more viewers to watch your video.
@ -38,9 +43,10 @@ Cloudflare Images allows you to store, resize, optimize and deliver images in a
### Upload with the dashboard
To upload an image using the Cloudflare dashboard:
1. In the Cloudflare dashboard, go to the **Images** page.
<DashButton url="/?to=/:account/images" />
1. In the Cloudflare dashboard, go to the **Transformations** page.
<DashButton url="/?to=/:account/images/transformations" />
2. Use **Quick Upload** to either drag and drop an image or click to browse and choose a file from your local files.
3. After the image is uploaded, view it using the generated URL.

2
src/content/docs/zaraz/advanced/load-custom-managed-component.mdx
View file

@ -57,7 +57,7 @@ As with regular tools, it is recommended that you [create the triggers](/zaraz/c
1. In the Cloudflare dashboard, go to the **Tag setup** page.
<DashButton url="/?to=/:account/tag-management" />
<DashButton url="/?to=/:account/tag-management/zaraz" />
2. Select **Tools Configuration** > [**Third-party tools**](https://dash.cloudflare.com/?to=/:account/:zone/zaraz/tools-config/tools/catalog).
3. Select **Add new tool** and choose **Custom Managed Component** from the tools library page. Select **Continue** to confirm your selection.
4. In **Select Custom MC**, choose a Custom Managed Component that you have deployed to your account, such as `custom-mc-my-new-counter-mc`. Select **Continue**.

4
src/content/partials/networking-services/mconn/configure-connectors.mdx
View file

@ -865,11 +865,11 @@ To check the IPsec tunnels and static routes created by your { props.magicWord =
<>
<Markdown
text={`
1. In the Cloudflare dashboard, go to the **Sites** page.`}
1. In the Cloudflare dashboard, go to the **Network Overview** page.`}
inline={false}
/>
<DashButton url="/?to=/:account/magic-wan/sites" />
<DashButton url="/?to=/:account/magic-wan/network" />
</>
)

25
src/content/partials/networking-services/routing/mcn-magic-wan-on-ramps.mdx
View file

@ -37,7 +37,7 @@ Choose this option if you have a single virtual private cloud (VPC) in your clou
1. In the Cloudflare dashboard, go to **Cloud on-ramps**.
<DashButton url="/?to=/:account/magic-wan/cloud-onramp/list" />
<DashButton url="/?to=/:account/magic-wan/cloud-onramp" />
2. Select **Add new on-ramp**.
3. Go to **Connect an existing VPC to Cloudflare** > **Select**.
@ -73,7 +73,7 @@ When you configure a hub on-ramp, Cloudflare always manages the VPN tunnel betwe
1. In the Cloudflare dashboard, go to **Cloud on-ramps**.
<DashButton url="/?to=/:account/magic-wan/cloud-onramp/list" />
<DashButton url="/?to=/:account/magic-wan/cloud-onramp" />
2. Select **Add new on-ramp**.
3. Go to **Connect an existing hub to Cloudflare** > **Select**.
@ -103,7 +103,7 @@ You have successfully created your Magic WAN on-ramp. However, on-ramp creation
1. In the Cloudflare dashboard, go to **Cloud on-ramps**.
<DashButton url="/?to=/:account/magic-wan/cloud-onramp/list" />
<DashButton url="/?to=/:account/magic-wan/cloud-onramp" />
2. Select **Add new on-ramp**.
3. Go to **Create a new hub & connect it to Cloudflare** > **Select**.
@ -153,7 +153,7 @@ Do not deploy the on-ramp using both Cloudflare and Terraform. If you plan to de
1. In the Cloudflare dashboard, go to **Cloud on-ramps**.
<DashButton url="/?to=/:account/magic-wan/cloud-onramp/list" />
<DashButton url="/?to=/:account/magic-wan/cloud-onramp" />
2. Select **Add new on-ramp** and begin the **Create a Magic WAN cloud on-ramp** workflow as normal.
3. After the **Configure route propagation** step, select **View download options** instead of selecting **Continue**.
@ -165,7 +165,7 @@ Do not deploy the on-ramp using both Cloudflare and Terraform. If you plan to de
1. In the Cloudflare dashboard, go to **Cloud on-ramps**.
<DashButton url="/?to=/:account/magic-wan/cloud-onramp/list" />
<DashButton url="/?to=/:account/magic-wan/cloud-onramp" />
2. Select the three dots for the on-ramp you want to download > **Download as Terraform**.
@ -181,7 +181,7 @@ After setting up your on-ramps, you need to update your network security groups
1. In the Cloudflare dashboard, go to **Cloud on-ramps**.
<DashButton url="/?to=/:account/magic-wan/cloud-onramp/list" />
<DashButton url="/?to=/:account/magic-wan/cloud-onramp" />
2. Select the on-ramp you want to edit.
3. Select **Edit** in the side panel.
@ -197,7 +197,7 @@ After setting up your on-ramps, you need to update your network security groups
1. In the Cloudflare dashboard, go to **Cloud on-ramps**.
<DashButton url="/?to=/:account/magic-wan/cloud-onramp/list" />
<DashButton url="/?to=/:account/magic-wan/cloud-onramp" />
2. Select the on-ramp you want to delete.
3. Select **Edit** in the side panel.
@ -218,12 +218,13 @@ By default, Cloudflare installs the following summarized routes in your cloud ro
To override the defaults with custom prefixes:
1. In the Cloudflare dashboard, go to **Address Space**.
1. In the Cloudflare dashboard, go to **Configuration**.
<DashButton url="/?to=/:account/magic-wan/configuration/magic_wan_address_space" />
<DashButton url="/?to=/:account/magic-wan/configuration" />
2. Delete the prefixes, and enter your custom ones.
3. When you are finished, select **Save changes**.
2. Select **Address Space**.
3. Delete the prefixes, and enter your custom ones.
4. When you are finished, select **Save changes**.
To install a default route to send all traffic to Magic WAN, enter `0.0.0.0/0` (on Azure, enter `0.0.0.0/1` and `128.0.0.0/1`).
@ -235,7 +236,7 @@ You can view estimated costs associated with your cloud resources in the Cloudfl
1. In the Cloudflare dashboard, go to **Cloud on-ramps**.
<DashButton url="/?to=/:account/magic-wan/cloud-onramp/list" />
<DashButton url="/?to=/:account/magic-wan/cloud-onramp" />
2. Find the cloud on-ramp for which you want to check the estimated costs.
3. Select the three dots > **Associated Resources**.

4
src/content/partials/networking-services/tunnel-health/update-tunnel-health-checks-frequency.mdx
View file

@ -77,12 +77,12 @@ Below is an example of how to adjust tunnel health check frequency to `low`. Not
<>
<Markdown
text={`
1. In the Cloudflare dashboard, go to the **Sites** page.
1. In the Cloudflare dashboard, go to the **Network Overview** page.
`}
inline={false}
/>
<DashButton url="/?to=/:account/magic-wan/sites" />
<DashButton url="/?to=/:account/magic-wan/network" />
<Markdown
text={`