代码之家  ›  专栏  ›  技术社区  ›  Javascript Coder

如何在浏览器typescript/javascript代码的webRTC中跟踪静音事件

  •  0
  • Javascript Coder  · 技术社区  · 4 年前

    我正在努力追踪webrtc中的静音事件, 我有我的订阅,在那里我更改了设备并跟踪静音,

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

    在我的订阅中

    /**
     * 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': {
      if (thisEventListeners.size === 1) {
        const deviceConfig = {audio: true, video: true};
        //let track = await navigator.mediaDevices.getUserMedia(deviceConfig);
    
        let track : MediaStream = await navigator.mediaDevices.getUserMedia(deviceConfig);
    
        var vtracks = track.getVideoTracks();
        for (var i = 0; i < vtracks.length; i++) {
          vtracks[i].onmute = onmute;
        }
        var atracks = track.getAudioTracks();
        for (var i = 0; i < atracks.length; i++) {
          atracks[i].onmute = onmute;
        }
      }
        default:
          break;
      }
    
      return new Promise((resolve) => {
        resolve({
          type: eventName,
          listener: subscriptionListener,
        });
      });
    }
    

    与navigator.mediaDevices.ondevicechange相同,它用于在设备上更改要在途中跟踪的内容。 我试过了 MediaStreamTrack.onmute = onmute; 但它不起作用。

    我有一个单独的onmute处理程序函数,如下所示-

    **
     * 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'));
      });
    }
    

    已编辑- 我已经在tract中添加了我的代码:静音情况,但我得到了

    TypeError: navigator.mediaDevices.getUserMedia is not a function
    
    1 回复  |  直到 4 年前
        1
  •  0
  •   Philipp Hancke    4 年前

    与navigator.mediaDevices.ondevicechange相同,它用于设备上的更改,用于在途中跟踪什么

    不。mediaDevices是一个实际对象,MediaStreamTrack是一个原型。静音事件将在该对象的实例上激发(通常通过getUserMedia获得),但没有全局事件处理程序。