Video Streaming

import { Stack0 } from '@stack0/sdk'
 
const stack0 = new Stack0({
  apiKey: process.env.STACK0_API_KEY!
})
 
// Start a transcoding job
const job = await stack0.cdn.transcode({
  projectSlug: 'my-project',
  assetId: 'video-asset-id',
  outputFormat: 'hls', // 'hls' for adaptive streaming, 'mp4' for download
  variants: [
    { quality: '720p', codec: 'h264' },
    { quality: '1080p', codec: 'h264' },
  ],
  webhookUrl: 'https://your-app.com/webhook', // Optional
})
 
console.log(`Job ID: ${job.id}, Status: ${job.status}`)

// Get job status
const job = await stack0.cdn.getJob('job_abc123')
 
console.log(`Status: ${job.status}`)
console.log(`Progress: ${job.progress}%`)
if (job.status === 'failed') console.error(job.errorMessage)
 
// Status values:
// 'pending' - Job created, waiting to be processed
// 'queued' - Job queued for processing
// 'processing' - Currently transcoding
// 'completed' - Finished successfully
// 'failed' - Transcoding failed
// 'cancelled' - Job was cancelled

// List all transcoding jobs
const { jobs, total, hasMore } = await stack0.cdn.listJobs({
  projectSlug: 'my-project',
  assetId: 'video-asset-id', // Optional filter
  status: 'processing', // Optional filter
  limit: 20,
  offset: 0,
})
 
for (const job of jobs) {
  console.log(`${job.id}: ${job.status} (${job.progress}%)`)
}

const urls = await stack0.cdn.getStreamingUrls('asset-id')
 
// HLS adaptive streaming (recommended for web/mobile)
console.log(`HLS: ${urls.hlsUrl}`)
 
// MP4 direct download by quality
for (const mp4 of urls.mp4Urls) {
  console.log(`${mp4.quality}: ${mp4.url}`)
}
 
// Generated thumbnails
for (const thumb of urls.thumbnails) {
  console.log(`Thumbnail at ${thumb.timestamp}s: ${thumb.url}`)
}

import Hls from 'hls.js'
 
const urls = await stack0.cdn.getStreamingUrls('asset-id')
const video = document.getElementById('video') as HTMLVideoElement
 
if (Hls.isSupported() && urls.hlsUrl) {
  const hls = new Hls()
  hls.loadSource(urls.hlsUrl)
  hls.attachMedia(video)
 
  hls.on(Hls.Events.MANIFEST_PARSED, () => {
    video.play()
  })
} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
  // Safari native HLS support
  video.src = urls.hlsUrl!
  video.addEventListener('loadedmetadata', () => {
    video.play()
  })
}

// Get the thumbnail at a specific timestamp. Works for any ready video
// asset (uploads included) — if the frame doesn't exist yet, generation is
// queued automatically and getThumbnailAndWait polls until it's ready.
const thumbnail = await stack0.cdn.getThumbnailAndWait({
  assetId: 'video-asset-id',
  timestamp: 10.5, // 10.5 seconds into the video
  width: 320, // Optional: resize
  format: 'webp', // 'jpg', 'png', 'webp'
})
 
console.log(`Thumbnail: ${thumbnail.url}`)
 
// Non-blocking variant: returns { status: 'pending', url: null } while
// the frame is being generated — poll until status is 'ready'
const maybe = await stack0.cdn.getThumbnail({
  assetId: 'video-asset-id',
  timestamp: 0,
})
 
// Force a fresh capture (e.g. after replacing the video), then wait
await stack0.cdn.regenerateThumbnail({ assetId: 'video-asset-id', timestamp: 5 })
const fresh = await stack0.cdn.getThumbnailAndWait({ assetId: 'video-asset-id', timestamp: 5 })

// Extract audio from video
const result = await stack0.cdn.extractAudio({
  projectSlug: 'my-project',
  assetId: 'video-asset-id',
  format: 'mp3', // 'mp3', 'aac', 'wav'
  bitrate: 192, // Optional: kbps
})
 
console.log(`Status: ${result.status}`)

// Generate a GIF from video
const gif = await stack0.cdn.generateGif({
  projectSlug: 'my-project',
  assetId: 'video-asset-id',
  startTime: 5,      // Start at 5 seconds
  duration: 3,       // 3 second GIF (max 30s)
  width: 480,        // Output width (100-800px)
  fps: 10,           // Frames per second (5-30)
  optimizePalette: true, // Better quality, smaller file
})
 
// Poll for completion
let result = await stack0.cdn.getGif(gif.id)
while (result?.status === 'pending' || result?.status === 'processing') {
  await new Promise(r => setTimeout(r, 1000))
  result = await stack0.cdn.getGif(gif.id)
}
 
console.log(`GIF URL: ${result?.url}`)
console.log(`Size: ${result?.sizeBytes} bytes`)

// Transcode with an image (logo) watermark.
// Uses the same config shape as image watermarks, so you can reuse the
// same settings across photos and video. The original asset stays clean;
// every rendition is watermarked.
const job = await stack0.cdn.transcode({
  projectSlug: 'my-project',
  assetId: 'video-asset-id',
  outputFormat: 'hls',
  variants: [{ quality: '1080p', codec: 'h264' }],
  watermark: {
    assetId: 'logo-asset-id', // your logo uploaded to the CDN (or use `url`)
    position: 'bottom-right',
    scale: 15,   // 15% of the video width
    opacity: 80,
    offsetX: 20,
    offsetY: 20,
  },
})
 
// Tile a watermark across the whole frame for copyright protection
const tiledJob = await stack0.cdn.transcode({
  projectSlug: 'my-project',
  assetId: 'video-asset-id',
  outputFormat: 'mp4',
  variants: [{ quality: '720p', codec: 'h264' }],
  watermark: {
    assetId: 'logo-asset-id',
    tile: true,
    opacity: 30,
    rotation: -30,
  },
})
 
// Text watermarks can use the same tiling controls
const textJob = await stack0.cdn.transcode({
  projectSlug: 'my-project',
  assetId: 'video-asset-id',
  outputFormat: 'mp4',
  variants: [{ quality: '720p', codec: 'h264' }],
  watermark: {
    type: 'text',
    text: 'My Company',
    fontSize: 32,
    fontColor: '#ffffff',
    tile: true,
    tileSpacingX: 120,
    tileSpacingY: 120,
    rotation: -30,
    opacity: 30,
  },
})

// Transcode only a portion of the video
const job = await stack0.cdn.transcode({
  projectSlug: 'my-project',
  assetId: 'video-asset-id',
  outputFormat: 'mp4',
  variants: [{ quality: '720p', codec: 'h264' }],
  trim: {
    start: 30, // Start at 30 seconds
    end: 120, // End at 2 minutes
  },
})