How to track muted event in webRTC for browser typescript/javascript code

Question

I am struggling to tracking the muted event in webrtc, I have my subscription where I have device changed and track mute,

export const subscriptions: subscriptionType = {
  events: {
    'device:changed': <eventListeners> new Map(),
    'track:mute': <eventListeners> new Map()
  },
};

In my subscriptions

/**
 * Obtains multiple subscriptions for various media events and stores listeners
 * Also sets appropriate browser event listeners
 *
 * @param eventName - event name to subscribe to (device:changed | track:muted)
 * @param listener - callback method to call when an event occurs
 * @returns promise that resolves with subscription object that can be used to unsubscribe
*/
export async function subscribe(eventName: string, listener: () => void) : Promise<subscription> {
  const subscriptionListener = {
    id: uuidv4(),
    method: listener,
  };

  subscriptions.events[eventName].set(subscriptionListener.id, subscriptionListener.method);

  switch (eventName) {
    case 'device:changed': {
      const thisEventListeners = subscriptions.events[eventName];

      if (thisEventListeners.size === 1) {
        const thisDeviceList = await getDevices();

        deviceList.push(...thisDeviceList);
        navigator.mediaDevices.ondevicechange = deviceChangePublisher;
      }
      break;
    } 
    // case 'track:mute': {
    //   const thisEventListeners = subscriptions.events[eventName];

    //   if (thisEventListeners.size === 1) {
    //     const thisDeviceList = await getDevices();

    //     deviceList.push(...thisDeviceList);
    //     MediaStreamTrack.onmute = onmute; // this need to check
    //   }
    //   break;
    // }
    default:
      break;
  }

  return new Promise((resolve) => {
    resolve({
      type: eventName,
      listener: subscriptionListener,
    });
  });
}

Same as navigator.mediaDevices.ondevicechange is for on device change what is to track onmute. I have tried with MediaStreamTrack.onmute = onmute; but it doesn't work.

I have my seperate onmute handler function which is shown below -

**
 * Eventhandler method for onmute event
 * @returns promise that is resolves the track
*/

export async function onmute(type?: any, device?: DeviceInterface): Promise<TrackInterface> {
  // type and device are optional just for checking this will be removed.
  console.log("type", type);
  console.log("device", device);

  const deviceConfig = device
    ? { video: { deviceId: { exact: device.ID } } }
    : { audio: true, video: true };

  const stream: MediaStream = await navigator.mediaDevices.getUserMedia(deviceConfig);
  // console.log("stream", stream);
  let track: MediaStreamTrack;
  if (device && device.kind !== DeviceKinds.VIDEO_INPUT) {
    stream.getAudioTracks()[0].enabled = type === 'mute' ? true : false;

    // enabled is for setting, and muted is read-only on the remote side (the other person)
    track = stream.getAudioTracks()[0];
  } else {
    stream.getVideoTracks()[0].enabled = type === 'mute' ? true : false;

    // enabled is for setting, and muted is read-only on the remote side (the other person)
    track = stream.getVideoTracks()[0];
  }

  // console.log("track", track);
  return new Promise((resolve, reject) => {
    if (track) {
      _streams.set(stream, stream.id);

      return resolve(new Track(track));
    }

    return reject(Error('Error'));
  });
}

Answer 1

Same as navigator.mediaDevices.ondevicechange is for on device change what is to track onmute

No. mediaDevices is an actual object, MediaStreamTrack is a prototype. The mute event will fire on instances of that object (obtained via getUserMedia usually) but there is no global event handler.