\n {error ? (\n

{error}

\n ) : (\n

\n );\n};\n\n// Demo content for the standalone version\nconst DemoContent = () => {\n const [zoom, setZoom] = useState(1);\n const [mirrored, setMirrored] = useState(true);\n const [dividerPosition, setDividerPosition] = useState(50);\n const [recording, setRecording] = useState(false);\n const [videoBlob, setVideoBlob] = useState(null);\n const [isUploading, setIsUploading] = useState(false);\n const [uploadProgress, setUploadProgress] = useState(0);\n const [playbackId, setPlaybackId] = useState(null);\n const [uploadError, setUploadError] = useState(null);\n const containerRef = useRef(null);\n const dividerRef = useRef(null);\n \n // Mux credentials\n const MUX_TOKEN_ID = \"dab459e2-b8dd-4b66-a205-6da71877652a\";\n const MUX_TOKEN_SECRET = \"4iPBPyIwCyia0y9/eVjgAsHXAsWxvpdL1RQ8vNr5nhJVFWlJAuB5Wiod9zXg4DDTw3zAm3sowy4\";\n\n const handleRecordingAvailable = (blob) => {\n setVideoBlob(blob);\n setRecording(false);\n };\n\n const toggleRecording = () => {\n if (recording) {\n setRecording(false);\n } else {\n // Clear previous recording and start a new one\n setVideoBlob(null);\n setPlaybackId(null);\n setUploadError(null);\n setRecording(true);\n }\n };\n\n const uploadToMux = async () => {\n if (!videoBlob) return;\n \n setIsUploading(true);\n setUploadProgress(0);\n setUploadError(null);\n \n try {\n // Create a file from the blob with a .webm extension\n const file = new File([videoBlob], \"recording.webm\", { type: videoBlob.type });\n \n // Get a direct upload URL from Mux\n const response = await fetch(\"https://api.mux.com/video/v1/uploads\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n \"Authorization\": \"Basic \" + btoa(`${MUX_TOKEN_ID}:${MUX_TOKEN_SECRET}`)\n },\n body: JSON.stringify({\n \"new_asset_settings\": {\n \"playback_policy\": [\"public\"]\n },\n \"cors_origin\": window.location.origin\n })\n });\n \n if (!response.ok) {\n throw new Error(`Failed to get upload URL: ${response.status} ${response.statusText}`);\n }\n \n const { data } = await response.json();\n \n // Upload the file to the direct upload URL\n const formData = new FormData();\n formData.append(\"file\", file);\n \n const uploadResponse = await fetch(data.url, {\n method: \"PUT\",\n body: formData,\n });\n \n if (!uploadResponse.ok) {\n throw new Error(`Upload failed: ${uploadResponse.status} ${uploadResponse.statusText}`);\n }\n \n // Poll for asset status\n let assetId = null;\n let asset = null;\n let attempts = 0;\n const maxAttempts = 30; // Wait up to 30 * 2 seconds = 1 minute\n \n while (!assetId && attempts < maxAttempts) {\n attempts++;\n // Check upload status\n const statusResponse = await fetch(`https://api.mux.com/video/v1/uploads/${data.id}`, {\n headers: {\n \"Authorization\": \"Basic \" + btoa(`${MUX_TOKEN_ID}:${MUX_TOKEN_SECRET}`)\n }\n });\n \n if (statusResponse.ok) {\n const statusData = await statusResponse.json();\n if (statusData.data.asset_id) {\n assetId = statusData.data.asset_id;\n \n // Get the asset details to retrieve the playback ID\n const assetResponse = await fetch(`https://api.mux.com/video/v1/assets/${assetId}`, {\n headers: {\n \"Authorization\": \"Basic \" + btoa(`${MUX_TOKEN_ID}:${MUX_TOKEN_SECRET}`)\n }\n });\n \n if (assetResponse.ok) {\n const assetData = await assetResponse.json();\n asset = assetData.data;\n \n if (asset.playback_ids && asset.playback_ids.length > 0) {\n setPlaybackId(asset.playback_ids[0].id);\n break;\n }\n }\n }\n }\n \n // Update progress\n setUploadProgress(Math.min(95, (attempts / maxAttempts) * 100));\n \n // Wait for 2 seconds before checking again\n await new Promise(resolve => setTimeout(resolve, 2000));\n }\n \n if (assetId && asset) {\n setUploadProgress(100);\n } else {\n throw new Error(\"Timeout waiting for asset to be ready\");\n }\n } catch (error) {\n console.error(\"Upload error:\", error);\n setUploadError(error.message || \"Failed to upload video\");\n } finally {\n setIsUploading(false);\n }\n };\n\n const handleMouseDown = (e) => {\n e.preventDefault();\n document.addEventListener('mousemove', handleMouseMove);\n document.addEventListener('mouseup', handleMouseUp);\n document.addEventListener('touchmove', handleTouchMove);\n document.addEventListener('touchend', handleMouseUp);\n };\n\n const handleTouchStart = (e) => {\n e.preventDefault();\n document.addEventListener('touchmove', handleTouchMove);\n document.addEventListener('touchend', handleMouseUp);\n };\n\n const handleMouseMove = (e) => {\n if (containerRef.current) {\n const containerRect = containerRef.current.getBoundingClientRect();\n const newPosition = ((e.clientX - containerRect.left) / containerRect.width) * 100;\n setDividerPosition(Math.max(10, Math.min(90, newPosition)));\n }\n };\n\n const handleTouchMove = (e) => {\n if (containerRef.current && e.touches && e.touches[0]) {\n const containerRect = containerRef.current.getBoundingClientRect();\n const newPosition = ((e.touches[0].clientX - containerRect.left) / containerRect.width) * 100;\n setDividerPosition(Math.max(10, Math.min(90, newPosition)));\n }\n };\n\n const handleMouseUp = () => {\n document.removeEventListener('mousemove', handleMouseMove);\n document.removeEventListener('mouseup', handleMouseUp);\n document.removeEventListener('touchmove', handleTouchMove);\n document.removeEventListener('touchend', handleMouseUp);\n };\n\n // Calculate the actual display widths\n const cameraWidth = `calc(${dividerPosition}% - 5px)`;\n const configWidth = `calc(${100 - dividerPosition}% - 5px)`;\n\n return (\n

\n \n {recording && (\n

\n RECORDING\n

\n )}\n

\n \n

Camera with Mux Upload

Record video and save directly to Mux

\n \n

⚙️ Configuration

\n \n Zoom: {zoom.toFixed(1)}x\n setZoom(Number(e.target.value))} \n />\n \n

\n \n

\n \n setMirrored(e.target.checked)} \n />\n Mirror Camera\n \n

\n \n

🎥 Recording

\n \n \n {videoBlob && (\n

Preview

\n )}\n

\n \n {videoBlob && !playbackId && (\n

📤 Upload to Mux

\n \n \n {isUploading && (\n

\n {uploadProgress.toFixed(0)}%\n

\n )}\n \n {uploadError && (\n

\n Error: {uploadError}\n

\n )}\n

\n )}\n \n {playbackId && (\n

✅ Upload Complete

Your video has been uploaded to Mux.

\n \n

Playback

\n \n

Playback Details

\n Playback ID:\n {playbackId}\n

\n HLS URL:\n https://stream.mux.com/{playbackId}.m3u8\n

\n Thumbnail:\n https://image.mux.com/{playbackId}/thumbnail.jpg\n

\n )}\n

\n \n );\n};\n\n// App component for the standalone demo\nfunction App() {\n return ;\n}\n\n// Client-side rendering function\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\n// Run client-side rendering if in browser\nif (typeof document !== \"undefined\") { client(); }\n\n// Server-side rendering function for the standalone demo\nexport default async function server(request: Request): Promise {\n return new Response(`\n \n \n \n \n \n Camera with Mux Upload\n \n \n \n

\n \n \n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n });\n}","deleted","label",[98],"permalink","https://www.val.town/x/dcm31/muxVideoUploader/code/main.tsx","extension","actionData","errors"]