Upload files directly

const { json, send } = require('micro');
const uuid = require('uuid/v1');

// This assumes you have MUX_TOKEN_ID and MUX_TOKEN_SECRET
// environment variables.
const mux = new Mux();

// All the 'db' references here are going to be total pseudocode.
const db = yourDatabase();

module.exports = async (req, res) => {
  const id = uuid();
  // Go ahead and grab any info you want from the request body.
  const assetInfo = await json(req);

  // Create a new upload using the Mux SDK.
  const upload = await mux.video.uploads.create({
    // Set the CORS origin to your application.
    cors_origin: 'https://your-app.com',

    // Specify the settings used to create the new Asset after
    // the upload is complete
    new_asset_settings: {
      passthrough: id,
      playback_policy: ['public'],
      video_quality: 'basic'
    }
  });

  db.put(id, {
    // save the upload ID in case we need to update this based on
    // 'video.upload' webhook events.
    uploadId: upload.id,
    metadata: assetInfo,
    status: 'waiting_for_upload',
  });

   // Now send back that ID and the upload URL so the client can use it!
  send(res, 201, { id, url: upload.url });
}

const { json, send } = require('micro');

// More db pseudocode.
const db = yourDatabase();

module.exports = async (req, res) => {
  // We'll grab the request body again, this time grabbing the event
  // type and event data so we can easily use it.
  const { type: eventType, data: eventData } = await json(req);

  switch (eventType) {
    case 'video.asset.created': {
      // This means an Asset was successfully created! We'll get
      // the existing item from the DB first, then update it with the
      // new Asset details
      const item = await db.get(eventData.passthrough);
      // Just in case the events got here out of order, make sure the
      // asset isn't already set to ready before blindly updating it!
      if (item.asset.status !== 'ready') {
        await db.put(item.id, {
          ...item,
          asset: eventData,
        });
      }
      break;
    };
    case 'video.asset.ready': {
      // This means an Asset was successfully created! This is the final
      // state of an Asset in this stage of its lifecycle, so we don't need
      // to check anything first.
        const item = await db.get(eventData.passthrough);
      await db.put(item.id, {
        ...item,
        asset: eventData,
        });
      break;
    };
    case 'video.upload.cancelled': {
      // This fires when you decide you want to cancel an upload, so you
      // may want to update your internal state to reflect that it's no longer
      // active.
      const item = await db.findByUploadId(eventData.passthrough);
      await db.put(item.id, { ...item, status: 'cancelled_upload' });
    }
    default:
      // Mux sends webhooks for *lots* of things, but we'll ignore those for now
      console.log('some other event!', eventType, eventData);
  }
}

npm install --save @mux/upchunk

yarn add @mux/upchunk

<script src="https://cdn.jsdelivr.net/npm/@mux/upchunk@2"></script>

// Global variables to track recording state and upload progress
let mediaRecorder;
let mediaStream;
let nextByteStart = 0;
const CHUNK_SIZE = 8 * 1024 * 1024; // 8MB chunks - must be multiple of 256KB
const maxRetries = 3; // Number of upload retry attempts
const lockName = 'uploadLock'; // Used by Web Locks API for sequential uploads
let activeUploads = 0; // Track number of chunks currently uploading
let isFinalizing = false; // Flag to prevent new uploads during finalization

async function startRecording() {
  // Request access to user's media devices
  mediaStream = await navigator.mediaDevices.getUserMedia({ audio: true, video: true });

  // Use a widely supported MIME type for maximum compatibility
  const mimeType = 'video/webm';

  // Initialize MediaRecorder with optimal settings
  mediaRecorder = new MediaRecorder(mediaStream, {
    mimeType,
    videoBitsPerSecond: 5000000, // 5 Mbps video bitrate
    audioBitsPerSecond: 128000   // 128 kbps audio bitrate
  });

  // Buffer to accumulate media data until we have enough for a chunk
  let buffer = new Blob([], { type: mimeType });
  let bufferSize = 0;

  // Handle incoming media data
  mediaRecorder.ondataavailable = async (event) => {
    // Only process if we have data and aren't in the finalization phase
    if (event.data.size > 0 && !isFinalizing) {
      // Combine the new data with our existing buffer
      // We use a Blob to efficiently handle large binary data
      // The type must match what we specified when creating the MediaRecorder
      buffer = new Blob([buffer, event.data], { type: mimeType });
      bufferSize += event.data.size;

      // Keep processing chunks as long as we have enough data
      // This ensures we maintain a consistent chunk size of 8MB (CHUNK_SIZE)
      // which is required by Mux's direct upload API
      while (bufferSize >= CHUNK_SIZE) {
        // Extract exactly CHUNK_SIZE bytes from the start of our buffer
        const chunk = buffer.slice(0, CHUNK_SIZE);
        
        // Keep the remainder in the buffer for the next chunk
        buffer = buffer.slice(CHUNK_SIZE);
        bufferSize -= CHUNK_SIZE;

        // Upload this chunk, passing false for isFinalChunk since we're still recording
        // nextByteStart tracks where in the overall file this chunk belongs
        await uploadChunk(chunk, nextByteStart, false);
        
        // Increment our position tracker by the size of the chunk we just uploaded
        nextByteStart += chunk.size;
      }
      // Any remaining data stays in the buffer until we get more from ondataavailable
    }
  };

  // Start recording, getting data every 500ms
  mediaRecorder.start(500);
}

async function stopRecording() {
  // Only proceed if we have an active mediaRecorder
  if (mediaRecorder && mediaRecorder.state !== 'inactive') {
    // Stop recording new data
    mediaRecorder.stop();
    // Set flag to prevent new uploads from starting during finalization
    isFinalizing = true;

    // Wait for any in-progress chunk uploads to complete
    // Check every 100ms until all uploads are done
    while (activeUploads > 0) {
      await new Promise(resolve => setTimeout(resolve, 100));
    }

    // If there's any remaining data in the buffer that hasn't been uploaded yet
    // Upload it as the final chunk (isFinalChunk = true)
    if (buffer.size > 0) {
      await uploadChunk(buffer, nextByteStart, true);
      nextByteStart += buffer.size;
    }

    // Clean up by stopping all media tracks (camera, mic etc)
    if (mediaStream) {
      mediaStream.getTracks().forEach(track => track.stop());
    }

    // Reset finalization flag now that we're done
    isFinalizing = false;
  }
}

async function uploadChunk(chunk, byteStart, isFinalChunk) {
  // Calculate the end byte position for this chunk by adding chunk size to start position
  // Subtract 1 since byte ranges are inclusive (e.g. bytes 0-499 is 500 bytes)
  const byteEnd = byteStart + chunk.size - 1;

  // For the total size in the Content-Range header:
  // - If this is the final chunk, use the actual total size (byteEnd + 1)
  // - Otherwise use '*' since we don't know the final size yet
  const totalSize = isFinalChunk ? byteEnd + 1 : '*';

  // Set required headers for resumable upload:
  // - Content-Length: Size of this chunk in bytes
  // - Content-Range: Byte range being uploaded in format "bytes START-END/TOTAL"
  const headers = {
    'Content-Length': chunk.size.toString(),
    'Content-Range': `bytes ${byteStart}-${byteEnd}/${totalSize}`,
  };

  let attempt = 0;
  let success = false;

  // Use Web Locks API to enforce sequential uploads
  await navigator.locks.request(lockName, async () => {
    activeUploads++;
    while (attempt < maxRetries && !success) {
      try {
        const response = await fetch('MUX_DIRECT_UPLOAD_URL_HERE', {
          method: 'PUT',
          headers,
          body: chunk
        });

        if (response.ok || response.status === 308) {
          success = true;
        } else {
          throw new Error(`Upload failed with status: ${response.status}`);
        }
      } catch (error) {
        attempt++;
        if (attempt < maxRetries) {
          await new Promise(resolve => setTimeout(resolve, attempt * 1000)); // Exponential backoff
        } else {
          throw error;
        }
      }
    }
    activeUploads--;
  });

  return success;
}