1# Stream Patterns
2 
3Common workflows, full-stack flows, and best practices.
4 
5## React Stream Player
6 
7`npm install @cloudflare/stream-react`
8 
9```tsx
10import { Stream } from '@cloudflare/stream-react';
11 
12export function VideoPlayer({ videoId, token }: { videoId: string; token?: string }) {
13  return <Stream controls src={token ? `${videoId}?token=${token}` : videoId} responsive />;
14}
15```
16 
17## Full-Stack Upload Flow
18 
19**Backend API (Workers/Pages)**
20```typescript
21import Cloudflare from 'cloudflare';
22 
23export default {
24  async fetch(request: Request, env: Env): Promise<Response> {
25    const { videoName } = await request.json();
26    const client = new Cloudflare({ apiToken: env.CF_API_TOKEN });
27    const { uploadURL, uid } = await client.stream.directUpload.create({
28      account_id: env.CF_ACCOUNT_ID,
29      maxDurationSeconds: 3600,
30      requireSignedURLs: true,
31      meta: { name: videoName }
32    });
33    return Response.json({ uploadURL, uid });
34  }
35};
36```
37 
38**Frontend component**
39```tsx
40import { useState } from 'react';
41 
42export function VideoUploader() {
43  const [uploading, setUploading] = useState(false);
44  const [progress, setProgress] = useState(0);
45  
46  async function handleUpload(file: File) {
47    setUploading(true);
48    const { uploadURL, uid } = await fetch('/api/upload-url', {
49      method: 'POST',
50      body: JSON.stringify({ videoName: file.name })
51    }).then(r => r.json());
52    
53    const xhr = new XMLHttpRequest();
54    xhr.upload.onprogress = (e) => setProgress((e.loaded / e.total) * 100);
55    xhr.onload = () => { setUploading(false); window.location.href = `/videos/${uid}`; };
56    xhr.open('POST', uploadURL);
57    const formData = new FormData();
58    formData.append('file', file);
59    xhr.send(formData);
60  }
61  
62  return (
63    <div>
64      <input type="file" accept="video/*" onChange={(e) => e.target.files?.[0] && handleUpload(e.target.files[0])} disabled={uploading} />
65      {uploading && <progress value={progress} max={100} />}
66    </div>
67  );
68}
69```
70 
71## TUS Resumable Upload
72 
73For large files (>500MB). `npm install tus-js-client`
74 
75```typescript
76import * as tus from 'tus-js-client';
77 
78async function uploadWithTUS(file: File, uploadURL: string, onProgress?: (pct: number) => void) {
79  return new Promise<string>((resolve, reject) => {
80    const upload = new tus.Upload(file, {
81      endpoint: uploadURL,
82      retryDelays: [0, 3000, 5000, 10000, 20000],
83      chunkSize: 50 * 1024 * 1024,
84      metadata: { filename: file.name, filetype: file.type },
85      onError: reject,
86      onProgress: (up, total) => onProgress?.((up / total) * 100),
87      onSuccess: () => resolve(upload.url?.split('/').pop() || '')
88    });
89    upload.start();
90  });
91}
92```
93 
94## Video State Polling
95 
96```typescript
97async function waitForVideoReady(client: Cloudflare, accountId: string, videoId: string) {
98  for (let i = 0; i < 60; i++) {
99    const video = await client.stream.videos.get(videoId, { account_id: accountId });
100    if (video.readyToStream || video.status.state === 'error') return video;
101    await new Promise(resolve => setTimeout(resolve, 5000));
102  }
103  throw new Error('Video processing timeout');
104}
105```
106 
107## Webhook Handler
108 
109```typescript
110export default {
111  async fetch(request: Request, env: Env): Promise<Response> {
112    const signature = request.headers.get('Webhook-Signature');
113    const body = await request.text();
114    if (!signature || !await verifyWebhook(signature, body, env.WEBHOOK_SECRET)) {
115      return new Response('Unauthorized', { status: 401 });
116    }
117    const payload = JSON.parse(body);
118    if (payload.readyToStream) console.log(`Video ${payload.uid} ready`);
119    return new Response('OK');
120  }
121};
122 
123async function verifyWebhook(sig: string, body: string, secret: string): Promise<boolean> {
124  const parts = Object.fromEntries(sig.split(',').map(p => p.split('=')));
125  const timestamp = parseInt(parts.time || '0', 10);
126  if (Math.abs(Date.now() / 1000 - timestamp) > 300) return false;
127  
128  const key = await crypto.subtle.importKey(
129    'raw', new TextEncoder().encode(secret), { name: 'HMAC', hash: 'SHA-256' }, false, ['sign']
130  );
131  const computed = await crypto.subtle.sign('HMAC', key, new TextEncoder().encode(`${timestamp}.${body}`));
132  const hex = Array.from(new Uint8Array(computed), b => b.toString(16).padStart(2, '0')).join('');
133  return hex === parts.sig1;
134}
135```
136 
137## Self-Sign JWT (High Volume Tokens)
138 
139For >1k tokens/day. Prerequisites: Create signing key (see configuration.md).
140 
141```typescript
142async function selfSignToken(keyId: string, jwkBase64: string, videoId: string, expiresIn = 3600) {
143  const key = await crypto.subtle.importKey(
144    'jwk', JSON.parse(atob(jwkBase64)), { name: 'RSASSA-PKCS1-v1_5', hash: 'SHA-256' }, false, ['sign']
145  );
146  const now = Math.floor(Date.now() / 1000);
147  const header = btoa(JSON.stringify({ alg: 'RS256', kid: keyId })).replace(/=/g, '').replace(/\+/g, '-').replace(/\//g, '_');
148  const payload = btoa(JSON.stringify({ sub: videoId, kid: keyId, exp: now + expiresIn, nbf: now }))
149    .replace(/=/g, '').replace(/\+/g, '-').replace(/\//g, '_');
150  const message = `${header}.${payload}`;
151  const sig = await crypto.subtle.sign('RSASSA-PKCS1-v1_5', key, new TextEncoder().encode(message));
152  const b64Sig = btoa(String.fromCharCode(...new Uint8Array(sig))).replace(/=/g, '').replace(/\+/g, '-').replace(/\//g, '_');
153  return `${message}.${b64Sig}`;
154}
155 
156// With access rules (geo-restriction)
157const payloadWithRules = {
158  sub: videoId, kid: keyId, exp: now + 3600, nbf: now,
159  accessRules: [{ type: 'ip.geoip.country', action: 'allow', country: ['US'] }]
160};
161```
162 
163## Best Practices
164 
165- **Use Direct Creator Uploads** - Avoid proxying through servers
166- **Enable requireSignedURLs** - Control private content access
167- **Self-sign tokens at scale** - Use signing keys for >1k/day
168- **Set allowedOrigins** - Prevent hotlinking
169- **Use webhooks over polling** - Efficient status updates
170- **Set maxDurationSeconds** - Prevent abuse
171- **Enable live recordings** - Auto VOD after stream
172 
173## In This Reference
174 
175- [README.md](./README.md) - Overview and quick start
176- [configuration.md](./configuration.md) - Setup and config
177- [api.md](./api.md) - On-demand video APIs
178- [api-live.md](./api-live.md) - Live streaming APIs
179- [gotchas.md](./gotchas.md) - Error codes, troubleshooting
180 
181## See Also
182 
183- [workers](../workers/) - Deploy Stream APIs in Workers
184- [pages](../pages/) - Integrate Stream with Pages
185