@yodaos-pkg/ink 0.17.0 → 0.17.1

package/index.js

@@ -52,6 +52,22 @@ function normalizeOptionalFiniteNumber(value) {
   return Number.isFinite(numericValue) ? numericValue : null;
 }
 
+function normalizeOptionalPositiveInteger(value) {
+  if (value == null) {
+    return null;
+  }
+  const numericValue = Math.trunc(Number(value));
+  return Number.isFinite(numericValue) && numericValue > 0 ? numericValue : null;
+}
+
+function normalizeOptionalPositiveNumber(value) {
+  if (value == null) {
+    return null;
+  }
+  const numericValue = Number(value);
+  return Number.isFinite(numericValue) && numericValue > 0 ? numericValue : null;
+}
+
 function normalizeOptionalNavigatorHostField(value, fieldName) {
   if (value == null) {
     return null;
@@ -859,6 +875,182 @@ function normalizePhotoResult(result) {
   return { data, mimeType };
 }
 
+function normalizeMediaDeviceInfo(device, index) {
+  if (device == null || typeof device !== 'object' || Array.isArray(device)) {
+    throw new TypeError(
+      `\`media.enumerateDevices()\` must return an array of media device objects. Invalid entry at index ${index}.`,
+    );
+  }
+
+  const deviceId = String(device.deviceId || '').trim();
+  if (!deviceId) {
+    throw new TypeError(
+      `\`media.enumerateDevices()\` entry ${index} must provide a non-empty \`deviceId\`.`,
+    );
+  }
+
+  const kind = String(device.kind || '').trim();
+  if (kind !== 'audioinput' && kind !== 'videoinput') {
+    throw new TypeError(
+      `\`media.enumerateDevices()\` entry ${index} must provide kind \`audioinput\` or \`videoinput\`.`,
+    );
+  }
+
+  return {
+    deviceId,
+    kind,
+    label: String(device.label || ''),
+    groupId: device.groupId == null ? '' : String(device.groupId),
+  };
+}
+
+function serializeEnumerateDevicesResponse(result) {
+  if (!Array.isArray(result)) {
+    throw new TypeError('`media.enumerateDevices()` must resolve to an array.');
+  }
+
+  return serializeIpcResponseData({
+    type: 'Media',
+    data: {
+      type: 'EnumerateDevicesResult',
+      data: result.map((device, index) => normalizeMediaDeviceInfo(device, index)),
+    },
+  });
+}
+
+function normalizeMediaTrackSettings(settings, methodName) {
+  if (settings == null || typeof settings !== 'object' || Array.isArray(settings)) {
+    throw new TypeError(`\`${methodName}\` must provide a \`settings\` object for each track.`);
+  }
+
+  const normalized = {};
+  const deviceId = settings.deviceId == null ? null : String(settings.deviceId).trim();
+  const facingMode =
+    settings.facingMode == null ? null : String(settings.facingMode).trim() || null;
+  const sampleRate = normalizeOptionalPositiveInteger(settings.sampleRate);
+  const channelCount = normalizeOptionalPositiveInteger(settings.channelCount);
+  const width = normalizeOptionalPositiveInteger(settings.width);
+  const height = normalizeOptionalPositiveInteger(settings.height);
+  const frameRate = normalizeOptionalPositiveNumber(settings.frameRate);
+
+  if (deviceId) {
+    normalized.deviceId = deviceId;
+  }
+  if (sampleRate != null) {
+    normalized.sampleRate = sampleRate;
+  }
+  if (channelCount != null) {
+    normalized.channelCount = channelCount;
+  }
+  if (settings.echoCancellation != null) {
+    normalized.echoCancellation = Boolean(settings.echoCancellation);
+  }
+  if (facingMode) {
+    normalized.facingMode = facingMode;
+  }
+  if (width != null) {
+    normalized.width = width;
+  }
+  if (height != null) {
+    normalized.height = height;
+  }
+  if (frameRate != null) {
+    normalized.frameRate = frameRate;
+  }
+
+  return normalized;
+}
+
+function normalizeMediaTrackDescriptor(track, index, methodName) {
+  if (track == null || typeof track !== 'object' || Array.isArray(track)) {
+    throw new TypeError(
+      `\`${methodName}\` must provide track objects. Invalid entry at index ${index}.`,
+    );
+  }
+
+  const trackId = String(track.trackId || '').trim();
+  if (!trackId) {
+    throw new TypeError(`\`${methodName}\` track ${index} must provide a non-empty \`trackId\`.`);
+  }
+
+  const kind = String(track.kind || '').trim();
+  if (kind !== 'audio' && kind !== 'video') {
+    throw new TypeError(
+      `\`${methodName}\` track ${index} must provide kind \`audio\` or \`video\`.`,
+    );
+  }
+
+  return {
+    trackId,
+    kind,
+    label: String(track.label || ''),
+    enabled: Boolean(track.enabled),
+    muted: Boolean(track.muted),
+    settings: normalizeMediaTrackSettings(track.settings, methodName),
+  };
+}
+
+function normalizeMediaStreamDescriptor(result, methodName = 'media.getUserMedia()') {
+  if (result == null || typeof result !== 'object' || Array.isArray(result)) {
+    throw new TypeError(`\`${methodName}\` must resolve to a media stream descriptor object.`);
+  }
+
+  const streamId = String(result.streamId || '').trim();
+  if (!streamId) {
+    throw new TypeError(`\`${methodName}\` must provide a non-empty \`streamId\`.`);
+  }
+  if (!Array.isArray(result.tracks)) {
+    throw new TypeError(`\`${methodName}\` must provide a \`tracks\` array.`);
+  }
+
+  return {
+    streamId,
+    tracks: result.tracks.map((track, index) =>
+      normalizeMediaTrackDescriptor(track, index, methodName),
+    ),
+  };
+}
+
+function serializeGetUserMediaResponse(result) {
+  return serializeIpcResponseData({
+    type: 'Media',
+    data: {
+      type: 'GetUserMediaResult',
+      data: normalizeMediaStreamDescriptor(result),
+    },
+  });
+}
+
+function normalizeMediaRecorderDescriptor(result) {
+  if (result == null || typeof result !== 'object' || Array.isArray(result)) {
+    throw new TypeError(
+      '`media.createMediaRecorder()` must resolve to a media recorder descriptor object.',
+    );
+  }
+
+  const recorderId = String(result.recorderId || '').trim();
+  if (!recorderId) {
+    throw new TypeError('`media.createMediaRecorder()` must provide a non-empty `recorderId`.');
+  }
+
+  const mimeType = String(result.mimeType || '').trim();
+  if (!mimeType) {
+    throw new TypeError('`media.createMediaRecorder()` must provide a non-empty `mimeType`.');
+  }
+
+  return { recorderId, mimeType };
+}
+
+function serializeCreateMediaRecorderResponse(result) {
+  return serializeIpcResponseData({
+    type: 'Media',
+    data: {
+      type: 'CreateMediaRecorderResult',
+      data: normalizeMediaRecorderDescriptor(result),
+    },
+  });
+}
+
 function serializeTakePhotoResponse(result) {
   const photo = normalizePhotoResult(result);
   return serializeIpcResponseData({
@@ -960,10 +1152,15 @@ const HOST_CAPABILITY_SERIALIZERS = {
     stop: () => serializeSuccessResponse(),
   },
   media: {
-    startAudioRecording: () => serializeSuccessResponse(),
-    stopAudioRecording: () => serializeSuccessResponse(),
-    pauseAudioRecording: () => serializeSuccessResponse(),
-    resumeAudioRecording: () => serializeSuccessResponse(),
+    enumerateDevices: (result) => serializeEnumerateDevicesResponse(result),
+    getUserMedia: (result) => serializeGetUserMediaResponse(result),
+    stopMediaTrack: () => serializeSuccessResponse(),
+    createMediaRecorder: (result) => serializeCreateMediaRecorderResponse(result),
+    startMediaRecorder: () => serializeSuccessResponse(),
+    pauseMediaRecorder: () => serializeSuccessResponse(),
+    resumeMediaRecorder: () => serializeSuccessResponse(),
+    requestMediaRecorderData: () => serializeSuccessResponse(),
+    stopMediaRecorder: () => serializeSuccessResponse(),
     takePhoto: (result) => serializeTakePhotoResponse(result),
   },
   openService: {
@@ -975,16 +1172,657 @@ const HOST_CAPABILITY_SERIALIZERS = {
   },
 };
 
-function normalizeHostCapabilities(capabilities) {
+function getBrowserMediaDevices() {
+  const mediaDevices = globalThis.navigator?.mediaDevices;
+  if (!mediaDevices || typeof mediaDevices !== 'object') {
+    return null;
+  }
+  return mediaDevices;
+}
+
+function getBrowserMediaRecorderConstructor() {
+  return typeof globalThis.MediaRecorder === 'function' ? globalThis.MediaRecorder : null;
+}
+
+function dispatchHostCapabilityCustomEvent(target, eventType, detail) {
+  if (!target || typeof target.dispatchEvent !== 'function' || typeof CustomEvent !== 'function') {
+    return;
+  }
+  target.dispatchEvent(new CustomEvent(eventType, { detail }));
+}
+
+function normalizeBrowserTrackConstraints(constraints) {
+  if (!constraints || typeof constraints !== 'object') {
+    return true;
+  }
+
+  const normalized = {};
+  if (constraints.deviceId) {
+    normalized.deviceId = constraints.deviceId;
+  }
+  if (constraints.sampleRate != null) {
+    normalized.sampleRate = constraints.sampleRate;
+  }
+  if (constraints.channelCount != null) {
+    normalized.channelCount = constraints.channelCount;
+  }
+  if (constraints.echoCancellation != null) {
+    normalized.echoCancellation = Boolean(constraints.echoCancellation);
+  }
+  if (constraints.facingMode) {
+    normalized.facingMode = constraints.facingMode;
+  }
+  if (constraints.width != null) {
+    normalized.width = constraints.width;
+  }
+  if (constraints.height != null) {
+    normalized.height = constraints.height;
+  }
+  if (constraints.frameRate != null) {
+    normalized.frameRate = constraints.frameRate;
+  }
+  return Object.keys(normalized).length > 0 ? normalized : true;
+}
+
+function normalizeBrowserMediaTrackDescriptor(track) {
+  const settings = typeof track?.getSettings === 'function' ? track.getSettings() || {} : {};
+  const normalizedSettings = {};
+  if (settings.deviceId) {
+    normalizedSettings.deviceId = String(settings.deviceId);
+  }
+  if (settings.sampleRate != null) {
+    normalizedSettings.sampleRate = Math.max(1, Math.trunc(Number(settings.sampleRate) || 0));
+  }
+  if (settings.channelCount != null) {
+    normalizedSettings.channelCount = Math.max(1, Math.trunc(Number(settings.channelCount) || 0));
+  }
+  if (settings.echoCancellation != null) {
+    normalizedSettings.echoCancellation = Boolean(settings.echoCancellation);
+  }
+  if (settings.facingMode) {
+    normalizedSettings.facingMode = String(settings.facingMode);
+  }
+  if (settings.width != null) {
+    normalizedSettings.width = Math.max(1, Math.trunc(Number(settings.width) || 0));
+  }
+  if (settings.height != null) {
+    normalizedSettings.height = Math.max(1, Math.trunc(Number(settings.height) || 0));
+  }
+  if (settings.frameRate != null) {
+    normalizedSettings.frameRate = Math.max(0, Number(settings.frameRate) || 0);
+  }
+
+  return {
+    trackId: String(track?.id || ''),
+    kind: track?.kind === 'video' ? 'video' : 'audio',
+    label: String(track?.label || ''),
+    enabled: track?.enabled !== false,
+    muted: Boolean(track?.muted),
+    settings: normalizedSettings,
+  };
+}
+
+async function blobToUint8Array(blob) {
+  if (!blob || typeof blob.arrayBuffer !== 'function') {
+    return new Uint8Array();
+  }
+  const buffer = await blob.arrayBuffer();
+  return new Uint8Array(buffer);
+}
+
+const browserMediaStreamsSymbol = Symbol.for('com.rokid.jsui.ink.mediaStreams');
+
+function getBrowserMediaStreamRegistry() {
+  const current = globalThis[browserMediaStreamsSymbol];
+  if (current instanceof Map) {
+    return current;
+  }
+  const registry = new Map();
+  globalThis[browserMediaStreamsSymbol] = registry;
+  return registry;
+}
+
+function oggCrc(bytes) {
+  let crc = 0;
+  for (const byte of bytes) {
+    crc ^= byte << 24;
+    for (let bit = 0; bit < 8; bit += 1) {
+      crc = (crc << 1) ^ (crc & 0x80000000 ? 0x04c11db7 : 0);
+    }
+  }
+  return crc >>> 0;
+}
+
+function createOggPage(packet, serial, sequence, granule, headerType) {
+  const segments = [];
+  let remaining = packet.byteLength;
+  while (remaining >= 255) {
+    segments.push(255);
+    remaining -= 255;
+  }
+  segments.push(remaining);
+  const page = new Uint8Array(27 + segments.length + packet.byteLength);
+  const view = new DataView(page.buffer);
+  page.set([79, 103, 103, 83], 0);
+  page[5] = headerType;
+  view.setBigUint64(6, BigInt(granule), true);
+  view.setUint32(14, serial, true);
+  view.setUint32(18, sequence, true);
+  page[26] = segments.length;
+  page.set(segments, 27);
+  page.set(packet, 27 + segments.length);
+  view.setUint32(22, oggCrc(page), true);
+  return page;
+}
+
+function createOpusHead(sampleRate, channels) {
+  const packet = new Uint8Array(19);
+  const view = new DataView(packet.buffer);
+  packet.set(new TextEncoder().encode('OpusHead'));
+  packet[8] = 1;
+  packet[9] = channels;
+  view.setUint16(10, 312, true);
+  view.setUint32(12, sampleRate, true);
+  return packet;
+}
+
+function createOpusTags() {
+  const vendor = new TextEncoder().encode('Ink Web');
+  const packet = new Uint8Array(16 + vendor.length);
+  const view = new DataView(packet.buffer);
+  packet.set(new TextEncoder().encode('OpusTags'));
+  view.setUint32(8, vendor.length, true);
+  packet.set(vendor, 12);
+  return packet;
+}
+
+class BrowserOggOpusMuxer {
+  constructor(sampleRate, channels) {
+    this.serial = Math.floor(Math.random() * 0xffffffff) >>> 0;
+    this.sequence = 0;
+    this.pending = null;
+    this.headers = [
+      createOggPage(createOpusHead(sampleRate, channels), this.serial, this.sequence++, 0, 2),
+      createOggPage(createOpusTags(), this.serial, this.sequence++, 0, 0),
+    ];
+  }
+
+  add(packet, granule) {
+    const output = this.headers.splice(0);
+    if (this.pending) {
+      output.push(
+        createOggPage(this.pending.packet, this.serial, this.sequence++, this.pending.granule, 0),
+      );
+    }
+    this.pending = { packet, granule };
+    return output;
+  }
+
+  finish() {
+    const output = this.headers.splice(0);
+    if (this.pending) {
+      output.push(
+        createOggPage(this.pending.packet, this.serial, this.sequence++, this.pending.granule, 4),
+      );
+      this.pending = null;
+    }
+    return output;
+  }
+}
+
+class BrowserPcmMediaRecorder extends EventTarget {
+  constructor(stream, mimeType) {
+    super();
+    this.stream = stream;
+    this.mimeType = mimeType;
+    this.state = 'inactive';
+    this.chunks = [];
+    this.timesliceTimer = null;
+  }
+
+  _emitData(parts, type, isLastChunk = false) {
+    const event = new Event('dataavailable');
+    Object.defineProperties(event, {
+      data: { value: new Blob(parts, { type }) },
+      inkIsLastChunk: { value: isLastChunk },
+    });
+    this.dispatchEvent(event);
+  }
+
+  _emitError(error) {
+    const event = new Event('error');
+    Object.defineProperty(event, 'error', { value: error });
+    this.dispatchEvent(event);
+  }
+
+  start(timeslice) {
+    if (this.state !== 'inactive') {
+      throw new DOMException('MediaRecorder is not inactive', 'InvalidStateError');
+    }
+    this.state = 'recording';
+    this._startCapture().catch((error) => {
+      this.state = 'inactive';
+      this._emitError(error);
+    });
+    if (timeslice > 0) {
+      this.timesliceTimer = setInterval(() => this.requestData(), timeslice);
+    }
+  }
+
+  async _startCapture() {
+    const AudioContextConstructor = globalThis.AudioContext || globalThis.webkitAudioContext;
+    if (typeof AudioContextConstructor !== 'function') {
+      throw new DOMException('Web Audio capture is unavailable', 'NotSupportedError');
+    }
+    const audioTrack = this.stream.getAudioTracks?.()[0];
+    const settings = audioTrack?.getSettings?.() || {};
+    const requestedSampleRate = Math.max(8000, Math.trunc(Number(settings.sampleRate) || 48000));
+    this.channels = Math.min(2, Math.max(1, Math.trunc(Number(settings.channelCount) || 1)));
+    this.context = new AudioContextConstructor({ sampleRate: requestedSampleRate });
+    this.sampleRate = this.context.sampleRate;
+    this.source = this.context.createMediaStreamSource(this.stream);
+    this.processor = this.context.createScriptProcessor(4096, this.channels, this.channels);
+    this.silentGain = this.context.createGain();
+    this.silentGain.gain.value = 0;
+    this.processor.onaudioprocess = (event) => this._processAudio(event.inputBuffer);
+    this.source.connect(this.processor);
+    this.processor.connect(this.silentGain);
+    this.silentGain.connect(this.context.destination);
+    if (this.mimeType === 'audio/ogg;codecs=opus') {
+      await this._startOpusEncoder();
+    }
+    await this.context.resume();
+    this.dispatchEvent(new Event('start'));
+  }
+
+  async _startOpusEncoder() {
+    if (
+      typeof globalThis.AudioEncoder !== 'function' ||
+      typeof globalThis.AudioData !== 'function'
+    ) {
+      throw new DOMException('WebCodecs Opus encoder is unavailable', 'NotSupportedError');
+    }
+    const config = {
+      codec: 'opus',
+      sampleRate: this.sampleRate,
+      numberOfChannels: this.channels,
+      bitrate: 64000,
+    };
+    if (typeof globalThis.AudioEncoder.isConfigSupported === 'function') {
+      const support = await globalThis.AudioEncoder.isConfigSupported(config);
+      if (!support?.supported) {
+        throw new DOMException('WebCodecs Opus configuration is unsupported', 'NotSupportedError');
+      }
+    }
+    this.oggMuxer = new BrowserOggOpusMuxer(this.sampleRate, this.channels);
+    this.encoder = new globalThis.AudioEncoder({
+      output: (chunk) => {
+        const packet = new Uint8Array(chunk.byteLength);
+        chunk.copyTo(packet);
+        const duration = Number(chunk.duration) || 0;
+        const granule = 312 + Math.round(((Number(chunk.timestamp) + duration) * 48000) / 1000000);
+        const pages = this.oggMuxer.add(packet, granule);
+        if (pages.length > 0) {
+          this._emitData(pages, this.mimeType, false);
+        }
+      },
+      error: (error) => this._emitError(error),
+    });
+    this.encoder.configure(config);
+    this.nextTimestamp = 0;
+  }
+
+  _processAudio(input) {
+    if (this.state !== 'recording') {
+      return;
+    }
+    const frames = input.length;
+    if (this.encoder) {
+      const planar = new Float32Array(frames * this.channels);
+      for (let channel = 0; channel < this.channels; channel += 1) {
+        planar.set(
+          input.getChannelData(Math.min(channel, input.numberOfChannels - 1)),
+          channel * frames,
+        );
+      }
+      const data = new globalThis.AudioData({
+        format: 'f32-planar',
+        sampleRate: this.sampleRate,
+        numberOfFrames: frames,
+        numberOfChannels: this.channels,
+        timestamp: this.nextTimestamp,
+        data: planar,
+      });
+      this.nextTimestamp += Math.round((frames * 1000000) / this.sampleRate);
+      this.encoder.encode(data);
+      data.close();
+      return;
+    }
+    const pcm = new Int16Array(frames * this.channels);
+    for (let frame = 0; frame < frames; frame += 1) {
+      for (let channel = 0; channel < this.channels; channel += 1) {
+        const samples = input.getChannelData(Math.min(channel, input.numberOfChannels - 1));
+        const sample = Math.max(-1, Math.min(1, samples[frame]));
+        pcm[frame * this.channels + channel] = sample < 0 ? sample * 32768 : sample * 32767;
+      }
+    }
+    this.chunks.push(new Uint8Array(pcm.buffer));
+  }
+
+  pause() {
+    if (this.state !== 'recording')
+      throw new DOMException('MediaRecorder is not recording', 'InvalidStateError');
+    this.state = 'paused';
+    this.dispatchEvent(new Event('pause'));
+  }
+
+  resume() {
+    if (this.state !== 'paused')
+      throw new DOMException('MediaRecorder is not paused', 'InvalidStateError');
+    this.state = 'recording';
+    this.dispatchEvent(new Event('resume'));
+  }
+
+  requestData() {
+    if (this.encoder || this.chunks.length === 0) return;
+    this._emitData(this.chunks.splice(0), 'audio/pcm', false);
+  }
+
+  stop() {
+    if (this.state === 'inactive') return;
+    this.state = 'inactive';
+    clearInterval(this.timesliceTimer);
+    this.timesliceTimer = null;
+    this.processor?.disconnect();
+    this.source?.disconnect();
+    this.silentGain?.disconnect();
+    this._finishCapture().catch((error) => this._emitError(error));
+  }
+
+  async _finishCapture() {
+    if (this.encoder) {
+      await this.encoder.flush();
+      const pages = this.oggMuxer.finish();
+      this._emitData(pages, this.mimeType, true);
+      this.encoder.close();
+    } else {
+      this._emitData(this.chunks.splice(0), 'audio/pcm', true);
+    }
+    await this.context?.close();
+    this.dispatchEvent(new Event('stop'));
+  }
+}
+
+function createDefaultBrowserMediaCapability(eventTarget) {
+  const mediaDevices = getBrowserMediaDevices();
+  const BrowserMediaRecorder = getBrowserMediaRecorderConstructor();
+  if (!mediaDevices || typeof mediaDevices.getUserMedia !== 'function') {
+    return null;
+  }
+
+  const streams = getBrowserMediaStreamRegistry();
+  const recorders = new Map();
+  let deviceChangeBound = false;
+
+  const dispatchDevicesChanged = async () => {
+    if (typeof mediaDevices.enumerateDevices !== 'function') {
+      return;
+    }
+    try {
+      const devices = await mediaDevices.enumerateDevices();
+      dispatchHostCapabilityCustomEvent(eventTarget, 'media.mediaDevicesChanged', {
+        targetId: 'media-devices',
+        devices: Array.isArray(devices)
+          ? devices.map((device) => ({
+              deviceId: String(device?.deviceId || ''),
+              kind: String(device?.kind || ''),
+              label: String(device?.label || ''),
+              groupId: String(device?.groupId || ''),
+            }))
+          : [],
+      });
+    } catch (error) {
+      console.error('InkView browser media backend failed to enumerate devices change.', error);
+    }
+  };
+
+  const ensureDeviceChangeListener = () => {
+    if (deviceChangeBound || typeof mediaDevices.addEventListener !== 'function') {
+      return;
+    }
+    mediaDevices.addEventListener('devicechange', dispatchDevicesChanged);
+    deviceChangeBound = true;
+  };
+
+  return {
+    async enumerateDevices() {
+      ensureDeviceChangeListener();
+      if (typeof mediaDevices.enumerateDevices !== 'function') {
+        return [];
+      }
+      const devices = await mediaDevices.enumerateDevices();
+      return Array.isArray(devices)
+        ? devices.map((device) => ({
+            deviceId: String(device?.deviceId || ''),
+            kind: String(device?.kind || ''),
+            label: String(device?.label || ''),
+            groupId: String(device?.groupId || ''),
+          }))
+        : [];
+    },
+    async getUserMedia(request) {
+      ensureDeviceChangeListener();
+      const browserConstraints = {
+        audio: request?.constraints?.audio
+          ? normalizeBrowserTrackConstraints(request.constraints.audio)
+          : false,
+        video: request?.constraints?.video
+          ? normalizeBrowserTrackConstraints(request.constraints.video)
+          : false,
+      };
+      const stream = await mediaDevices.getUserMedia(browserConstraints);
+      streams.set(request.streamId, stream);
+
+      const tracks = stream.getTracks().map((track) => {
+        const streamId = request.streamId;
+        const trackId = String(track?.id || '');
+        if (typeof track?.addEventListener === 'function') {
+          track.addEventListener('ended', () => {
+            dispatchHostCapabilityCustomEvent(eventTarget, 'media.mediaTrackEnded', {
+              targetId: trackId,
+              streamId,
+              trackId,
+            });
+          });
+          track.addEventListener('mute', () => {
+            dispatchHostCapabilityCustomEvent(eventTarget, 'media.mediaTrackMuted', {
+              targetId: trackId,
+              streamId,
+              trackId,
+            });
+          });
+          track.addEventListener('unmute', () => {
+            dispatchHostCapabilityCustomEvent(eventTarget, 'media.mediaTrackUnmuted', {
+              targetId: trackId,
+              streamId,
+              trackId,
+            });
+          });
+        }
+        dispatchHostCapabilityCustomEvent(eventTarget, 'media.mediaTrackStarted', {
+          targetId: trackId,
+          streamId,
+          trackId,
+        });
+        return normalizeBrowserMediaTrackDescriptor(track);
+      });
+
+      return {
+        streamId: request.streamId,
+        tracks,
+      };
+    },
+    stopMediaTrack(request) {
+      const stream = streams.get(request?.streamId);
+      if (!stream || typeof stream.getTracks !== 'function') {
+        return;
+      }
+      const track = stream.getTracks().find((entry) => String(entry?.id || '') === request.trackId);
+      if (!track) {
+        return;
+      }
+      if (typeof track.stop === 'function') {
+        track.stop();
+      }
+      dispatchHostCapabilityCustomEvent(eventTarget, 'media.mediaTrackEnded', {
+        targetId: request.trackId,
+        streamId: request.streamId,
+        trackId: request.trackId,
+      });
+      if (stream.getTracks().every((entry) => entry.readyState === 'ended')) {
+        streams.delete(request.streamId);
+      }
+    },
+    createMediaRecorder(request) {
+      const stream = streams.get(request?.streamId);
+      if (!stream) {
+        throw new Error(`Media stream ${String(request?.streamId || '')} is unavailable.`);
+      }
+      const requestedMimeType = String(request?.mimeType || '');
+      const browserSupportsMimeType =
+        BrowserMediaRecorder &&
+        (!requestedMimeType ||
+          typeof BrowserMediaRecorder.isTypeSupported !== 'function' ||
+          BrowserMediaRecorder.isTypeSupported(requestedMimeType));
+      const recorder = browserSupportsMimeType
+        ? requestedMimeType
+          ? new BrowserMediaRecorder(stream, { mimeType: requestedMimeType })
+          : new BrowserMediaRecorder(stream)
+        : new BrowserPcmMediaRecorder(stream, requestedMimeType);
+      const session = {
+        recorder,
+        mimeType: String(recorder.mimeType || request.mimeType || ''),
+        pendingStop: false,
+        pendingData: Promise.resolve(),
+      };
+      recorders.set(request.recorderId, session);
+
+      recorder.addEventListener('start', () => {
+        dispatchHostCapabilityCustomEvent(eventTarget, 'media.mediaRecorderStarted', {
+          targetId: request.recorderId,
+          recorderId: request.recorderId,
+        });
+      });
+      recorder.addEventListener('pause', () => {
+        dispatchHostCapabilityCustomEvent(eventTarget, 'media.mediaRecorderPaused', {
+          targetId: request.recorderId,
+          recorderId: request.recorderId,
+        });
+      });
+      recorder.addEventListener('resume', () => {
+        dispatchHostCapabilityCustomEvent(eventTarget, 'media.mediaRecorderResumed', {
+          targetId: request.recorderId,
+          recorderId: request.recorderId,
+        });
+      });
+      recorder.addEventListener('stop', async () => {
+        await session.pendingData;
+        dispatchHostCapabilityCustomEvent(eventTarget, 'media.mediaRecorderStopped', {
+          targetId: request.recorderId,
+          recorderId: request.recorderId,
+          mimeType: session.mimeType,
+        });
+        recorders.delete(request.recorderId);
+      });
+      recorder.addEventListener('error', (event) => {
+        const message = event?.error?.message || event?.message || 'Browser MediaRecorder failed.';
+        dispatchHostCapabilityCustomEvent(eventTarget, 'media.mediaRecorderError', {
+          targetId: request.recorderId,
+          recorderId: request.recorderId,
+          message,
+        });
+      });
+      recorder.addEventListener('dataavailable', (event) => {
+        session.pendingData = session.pendingData.then(async () => {
+          const bytes = await blobToUint8Array(event?.data);
+          const isLastChunk =
+            typeof event?.inkIsLastChunk === 'boolean'
+              ? event.inkIsLastChunk
+              : Boolean(session.pendingStop);
+          if (isLastChunk) {
+            session.pendingStop = false;
+          }
+          dispatchHostCapabilityCustomEvent(eventTarget, 'media.mediaRecorderData', {
+            targetId: request.recorderId,
+            recorderId: request.recorderId,
+            bytes,
+            mimeType: String(event?.data?.type || session.mimeType || ''),
+            isLastChunk,
+          });
+        });
+      });
+
+      return {
+        recorderId: request.recorderId,
+        mimeType: session.mimeType,
+      };
+    },
+    startMediaRecorder(request) {
+      const session = recorders.get(request?.recorderId);
+      if (!session) {
+        throw new Error(`MediaRecorder ${String(request?.recorderId || '')} is unavailable.`);
+      }
+      if (request?.timesliceMs != null) {
+        session.recorder.start(request.timesliceMs);
+      } else {
+        session.recorder.start();
+      }
+    },
+    pauseMediaRecorder(request) {
+      const session = recorders.get(request?.recorderId);
+      if (!session) {
+        throw new Error(`MediaRecorder ${String(request?.recorderId || '')} is unavailable.`);
+      }
+      session.recorder.pause();
+    },
+    resumeMediaRecorder(request) {
+      const session = recorders.get(request?.recorderId);
+      if (!session) {
+        throw new Error(`MediaRecorder ${String(request?.recorderId || '')} is unavailable.`);
+      }
+      session.recorder.resume();
+    },
+    requestMediaRecorderData(request) {
+      const session = recorders.get(request?.recorderId);
+      if (!session) {
+        throw new Error(`MediaRecorder ${String(request?.recorderId || '')} is unavailable.`);
+      }
+      session.recorder.requestData();
+    },
+    stopMediaRecorder(request) {
+      const session = recorders.get(request?.recorderId);
+      if (!session) {
+        return;
+      }
+      session.pendingStop = true;
+      session.recorder.stop();
+    },
+  };
+}
+
+function normalizeHostCapabilities(capabilities, eventTarget = null) {
   const normalizedCapabilities = ensureHostCapabilitiesObject(capabilities);
-  if (!normalizedCapabilities) {
+  const defaultMediaCapability = createDefaultBrowserMediaCapability(eventTarget);
+  if (!normalizedCapabilities && !defaultMediaCapability) {
     return null;
   }
 
   return {
     async handleRequest(capability, method, requestJson) {
       const serializer = HOST_CAPABILITY_SERIALIZERS[capability]?.[method];
-      const hook = normalizedCapabilities?.[capability]?.[method];
+      const hook =
+        normalizedCapabilities?.[capability]?.[method] ||
+        (capability === 'media' ? defaultMediaCapability?.[method] : undefined);
       if (capability === 'openService' && method === 'getVendorHeaders' && hook == null) {
         parseHostCapabilityRequest(requestJson, capability, method);
         return serializer({});
@@ -1320,44 +2158,102 @@ const HOST_CAPABILITY_EVENT_BUILDERS = {
     buildSensorReadingEvent('Magnetometer', 'magnetometer.reading', detail, ['x', 'y', 'z']),
   'magnetometer.error': (detail) =>
     buildSensorErrorEvent('Magnetometer', 'magnetometer.error', detail),
-  'media.audioRecordingStarted': (detail) =>
-    buildMediaRecordingEvent('media', 'AudioRecordingStarted', detail),
-  'media.audioRecordingStopped': (detail) => {
-    const payload = requireDetailObject(detail, 'media.audioRecordingStopped');
-    return buildMediaRecordingEvent(
-      'media',
-      'AudioRecordingStopped',
-      payload,
-      String(payload.path || ''),
-    );
+  'media.mediaTrackStarted': (detail) => {
+    const payload = requireDetailObject(detail, 'media.mediaTrackStarted');
+    return buildMediaRecordingEvent('media', 'MediaTrackStarted', detail, {
+      streamId: String(payload.streamId || ''),
+      trackId: String(payload.trackId || ''),
+    });
   },
-  'media.audioRecordingPaused': (detail) =>
-    buildMediaRecordingEvent('media', 'AudioRecordingPaused', detail),
-  'media.audioRecordingResumed': (detail) =>
-    buildMediaRecordingEvent('media', 'AudioRecordingResumed', detail),
-  'media.audioFrameRecorded': (detail) => {
-    const payload = requireDetailObject(detail, 'media.audioFrameRecorded');
-    const bytes = cloneUint8Array(payload.data ?? payload.bytes ?? payload.buffer);
+  'media.mediaTrackEnded': (detail) => {
+    const payload = requireDetailObject(detail, 'media.mediaTrackEnded');
+    return buildMediaRecordingEvent('media', 'MediaTrackEnded', detail, {
+      streamId: String(payload.streamId || ''),
+      trackId: String(payload.trackId || ''),
+    });
+  },
+  'media.mediaTrackMuted': (detail) => {
+    const payload = requireDetailObject(detail, 'media.mediaTrackMuted');
+    return buildMediaRecordingEvent('media', 'MediaTrackMuted', detail, {
+      streamId: String(payload.streamId || ''),
+      trackId: String(payload.trackId || ''),
+    });
+  },
+  'media.mediaTrackUnmuted': (detail) => {
+    const payload = requireDetailObject(detail, 'media.mediaTrackUnmuted');
+    return buildMediaRecordingEvent('media', 'MediaTrackUnmuted', detail, {
+      streamId: String(payload.streamId || ''),
+      trackId: String(payload.trackId || ''),
+    });
+  },
+  'media.mediaTrackError': (detail) => {
+    const payload = requireDetailObject(detail, 'media.mediaTrackError');
+    return buildMediaRecordingEvent('media', 'MediaTrackError', detail, {
+      streamId: String(payload.streamId || ''),
+      trackId: String(payload.trackId || ''),
+      message: String(payload.message || ''),
+    });
+  },
+  'media.mediaRecorderStarted': (detail) => {
+    const payload = requireDetailObject(detail, 'media.mediaRecorderStarted');
+    return buildMediaRecordingEvent('media', 'MediaRecorderStarted', detail, {
+      recorderId: String(payload.recorderId || ''),
+    });
+  },
+  'media.mediaRecorderData': (detail) => {
+    const payload = requireDetailObject(detail, 'media.mediaRecorderData');
+    const bytes = cloneUint8Array(payload.bytes ?? payload.data ?? payload.buffer);
     if (!bytes) {
       throw new TypeError(
-        'Host capability event `media.audioFrameRecorded` requires binary `data`.',
+        'Host capability event `media.mediaRecorderData` requires binary `bytes`.',
       );
     }
-    return buildMediaRecordingEvent('media', 'AudioFrameRecorded', payload, Array.from(bytes));
+    return buildMediaRecordingEvent('media', 'MediaRecorderData', detail, {
+      recorderId: String(payload.recorderId || ''),
+      bytes: Array.from(bytes),
+      mimeType: String(payload.mimeType || ''),
+      isLastChunk: Boolean(payload.isLastChunk),
+    });
   },
-  'media.audioRecordingError': (detail) => {
-    const payload = requireDetailObject(detail, 'media.audioRecordingError');
-    return buildMediaRecordingEvent(
-      'media',
-      'AudioRecordingError',
-      payload,
-      String(payload.message || ''),
-    );
+  'media.mediaRecorderPaused': (detail) => {
+    const payload = requireDetailObject(detail, 'media.mediaRecorderPaused');
+    return buildMediaRecordingEvent('media', 'MediaRecorderPaused', detail, {
+      recorderId: String(payload.recorderId || ''),
+    });
+  },
+  'media.mediaRecorderResumed': (detail) => {
+    const payload = requireDetailObject(detail, 'media.mediaRecorderResumed');
+    return buildMediaRecordingEvent('media', 'MediaRecorderResumed', detail, {
+      recorderId: String(payload.recorderId || ''),
+    });
+  },
+  'media.mediaRecorderStopped': (detail) => {
+    const payload = requireDetailObject(detail, 'media.mediaRecorderStopped');
+    return buildMediaRecordingEvent('media', 'MediaRecorderStopped', detail, {
+      recorderId: String(payload.recorderId || ''),
+      mimeType: payload.mimeType == null ? null : String(payload.mimeType),
+    });
+  },
+  'media.mediaRecorderError': (detail) => {
+    const payload = requireDetailObject(detail, 'media.mediaRecorderError');
+    return buildMediaRecordingEvent('media', 'MediaRecorderError', detail, {
+      recorderId: String(payload.recorderId || ''),
+      message: String(payload.message || ''),
+    });
+  },
+  'media.mediaDevicesChanged': (detail) => {
+    const payload = requireDetailObject(detail, 'media.mediaDevicesChanged');
+    return buildMediaRecordingEvent('media', 'MediaDevicesChanged', detail, {
+      devices: Array.isArray(payload.devices)
+        ? payload.devices.map((device) => ({
+            deviceId: String(device?.deviceId || ''),
+            kind: String(device?.kind || ''),
+            label: String(device?.label || ''),
+            groupId: String(device?.groupId || ''),
+          }))
+        : [],
+    });
   },
-  'media.audioRecordingInterruptionBegin': (detail) =>
-    buildMediaRecordingEvent('media', 'AudioRecordingInterruptionBegin', detail),
-  'media.audioRecordingInterruptionEnd': (detail) =>
-    buildMediaRecordingEvent('media', 'AudioRecordingInterruptionEnd', detail),
 };
 
 const HOST_CAPABILITY_EVENT_TYPES = Object.keys(HOST_CAPABILITY_EVENT_BUILDERS);
@@ -1421,7 +2317,7 @@ export function getInkBundleVersion() {
 }
 
 /**
- * Returns whether the bundled Ink runtime version satisfies the supplied AIX
+ * Returns whether the Ink runtime version satisfies the supplied AIX
  * engine range.
  *
  * The engine range lets a package declare which Ink runtime versions it is
@@ -2469,7 +3365,10 @@ export class InkView {
   }
 
   setHostCapabilities(capabilities) {
-    const normalizedCapabilities = normalizeHostCapabilities(capabilities);
+    const normalizedCapabilities = normalizeHostCapabilities(
+      capabilities,
+      this.#hostCapabilitiesTarget,
+    );
     if (typeof this.#rawView.setHostCapabilities === 'function') {
       this.#rawView.setHostCapabilities(normalizedCapabilities);
     }