Media Streams and Tracks

// Get stream from getUserMedia
const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });

// Inspect the stream
console.log(stream.id);           // unique UUID
console.log(stream.active);       // true if any tracks are live
console.log(stream.getTracks());  // all tracks (audio + video)
console.log(stream.getVideoTracks()); // [MediaStreamTrack, …]
console.log(stream.getAudioTracks()); // [MediaStreamTrack, …]

const [videoTrack] = stream.getVideoTracks();
const [audioTrack] = stream.getAudioTracks();

// Key properties
videoTrack.id;           // UUID
videoTrack.kind;         // 'video' | 'audio'
videoTrack.label;        // device label, e.g. 'Built-in FaceTime Camera'
videoTrack.enabled;      // mute/unmute without stopping
videoTrack.muted;        // true if track is muted by the source (read-only)
videoTrack.readyState;   // 'live' | 'ended'

// Mute (sends silence/black frame) — does NOT release hardware
audioTrack.enabled = false; // mute
audioTrack.enabled = true;  // unmute

// Stop — releases hardware, readyState → 'ended'
videoTrack.stop();

track.onmute   = () => console.log('track muted remotely');
track.onunmute = () => console.log('track unmuted');
track.onended  = () => console.log('track ended');

// Combine audio from one source with video from another
const videoStream = await navigator.mediaDevices.getUserMedia({ video: true });
const audioStream = await navigator.mediaDevices.getUserMedia({ audio: true });

const combined = new MediaStream([
  ...videoStream.getVideoTracks(),
  ...audioStream.getAudioTracks(),
]);

const [track] = stream.getVideoTracks();

// What the browser actually delivered
const settings = track.getSettings();
// { width, height, frameRate, deviceId, facingMode, aspectRatio, … }

// What the browser can deliver (range)
const caps = track.getCapabilities();
// { width: { min, max }, height: { min, max }, frameRate: { min, max }, … }

// What constraints were applied
const constraints = track.getConstraints();

// Apply new constraints at runtime
await track.applyConstraints({ frameRate: { max: 15 } });
await track.applyConstraints({ width: 640, height: 480 });

// Add a track to the peer connection
const sender = pc.addTrack(videoTrack, stream);

// Remove (triggers renegotiation via onnegotiationneeded)
pc.removeTrack(sender);

// Swap track without renegotiation
await sender.replaceTrack(newTrack);
// Pass null to "black-hole" the sender without removing it
await sender.replaceTrack(null);

// Video element
const videoEl = document.querySelector('video');
videoEl.srcObject = stream;
videoEl.autoplay = true;
videoEl.playsInline = true;  // required on iOS
videoEl.muted = true;        // muted autoplays; unmuted requires gesture

// Audio element
const audioEl = document.querySelector('audio');
audioEl.srcObject = audioStream;
audioEl.play();

// Mirror local camera (flip horizontally with CSS)
videoEl.style.transform = 'scaleX(-1)';

const canvas = document.getElementById('myCanvas');
const canvasStream = canvas.captureStream(30); // 30 fps
const [canvasTrack] = canvasStream.getVideoTracks();
pc.addTrack(canvasTrack, canvasStream);

const audioCtx = new AudioContext();
const source = audioCtx.createMediaElementSource(document.getElementById('audio'));
const dest = audioCtx.createMediaStreamDestination();
source.connect(dest);
const [processedAudioTrack] = dest.stream.getAudioTracks();
pc.addTrack(processedAudioTrack, dest.stream);

const audioCtx = new AudioContext();
const micSource = audioCtx.createMediaStreamSource(stream);

// Add effects
const gainNode = audioCtx.createGain();
gainNode.gain.value = 1.5;

const dest = audioCtx.createMediaStreamDestination();
micSource.connect(gainNode).connect(dest);

const processedStream = dest.stream;

// Transform video frames before sending
const { readable, writable } = new MediaStreamTrackProcessor({ track: videoTrack });
const { readable: outReadable, writable: outWritable } = new MediaStreamTrackGenerator({ kind: 'video' });

const transformer = new TransformStream({
  async transform(videoFrame, controller) {
    // Manipulate the frame
    controller.enqueue(videoFrame);
    videoFrame.close();
  }
});

readable.pipeThrough(transformer).pipeTo(outWritable);

// Send the processed track
pc.addTrack(outReadable.getReader().read().value, stream);

const sender = pc.getSenders().find(s => s.track?.kind === 'video');

// Read current encoding parameters
const params = sender.getParameters();

// Adjust bitrate and framerate
params.encodings[0].maxBitrate = 1_000_000;    // 1 Mbps
params.encodings[0].maxFramerate = 24;
params.encodings[0].scaleResolutionDownBy = 1;  // 1 = full resolution, 2 = half

// Priority hint
params.encodings[0].networkPriority = 'high';  // 'very-low'|'low'|'medium'|'high'
params.encodings[0].priority = 'high';

await sender.setParameters(params);

pc.ontrack = ({ track, streams, receiver }) => {
  // track — the MediaStreamTrack
  // streams — associated MediaStream array
  // receiver — RTCRtpReceiver
  remoteVideo.srcObject = streams[0];

  // Read receiver stats
  receiver.getStats().then(stats => stats.forEach(r => console.log(r)));

  track.onunmute = () => {
    // Remote unmuted their track
    remoteVideo.play();
  };
};

const statsReport = await pc.getStats();

statsReport.forEach(report => {
  if (report.type === 'inbound-rtp' && report.kind === 'video') {
    console.log({
      fps:           report.framesPerSecond,
      decoded:       report.framesDecoded,
      dropped:       report.framesDropped,
      width:         report.frameWidth,
      height:        report.frameHeight,
      packetsLost:   report.packetsLost,
      jitter:        report.jitter,
      freezeCount:   report.freezeCount,
      freezeDuration: report.totalFreezesDuration,
    });
  }
});