Implement media muting/unmuting (#27)

CHANGELOG.md

@@ -42,7 +42,8 @@ All user visible changes to this project will be documented in this file. This p
     - Calculate and send call quality score based on RTC stats ([#132]);
     - Enabling/disabling `MediaTrack`s by receiver ([#127], [#155]);
     - Send `TrackUpdate::IceRestart` based on RTC stats analysis ([#138]);
-    - Multiple `Room`s served by one RPC connection support ([#147]).
+    - Multiple `Room`s served by one RPC connection support ([#147]);
+    - Muting/unmuting `MediaTrack`s ([#156]).
 - [Coturn] integration:
     - [Coturn] sessions destroying ([#84]);
     - [Coturn] stats processing ([#94]).
@@ -85,6 +86,7 @@ All user visible changes to this project will be documented in this file. This p
 [#147]: /../../pull/147
 [#153]: /../../pull/153
 [#155]: /../../pull/155
+[#156]: /../../pull/156
 
 
 

Makefile

@@ -21,8 +21,8 @@ DEMO_IMAGE_NAME := instrumentisto/medea-demo
 CONTROL_MOCK_IMAGE_NAME := instrumentisto/medea-control-api-mock
 
 RUST_VER := 1.48
-CHROME_VERSION := 86.0
-FIREFOX_VERSION := 82.0.2
+CHROME_VERSION := 87.0
+FIREFOX_VERSION := 83.0
 
 crate-dir = .
 ifeq ($(crate),medea-jason)

jason/CHANGELOG.md

@@ -40,23 +40,30 @@ All user visible changes to this project will be documented in this file. This p
             - `DeviceVideoTrackConstraints`, `DisplayVideoTrackConstraints` classes ([#78]);
             - `DeviceVideoTrackConstraints.ideal_facing_mode` and `DeviceVideoTrackConstraints.exact_facing_mode` functions ([#137]);
             - `FacingMode` enum ([#137]).
-        - `MediaKind` enum that provides `MediaTrack` and `InputDeviceInfo` kind ([#146]);
-        - `MediaSourceKind` enum that provides `MediaTrack` media source kind (`Device` or `Display`) ([#146]);
+        - `MediaKind` enum that provides `LocalMediaTrack`/`RemoteMediaTrack` and `InputDeviceInfo` kind ([#146]);
+        - `MediaSourceKind` enum that provides `MediaTrack` media source kind (`Device` or `Display`) ([#146], [#156]);
         - Room management:
             - `Jason.init_room()` ([#46]);
             - `Room.join()` ([#46]);
             - `Jason.close_room()` ([#147]).
         - Ability to configure local media stream used by `Room` via `Room.set_local_media_settings()` ([#54], [#97], [#145]);
         - `Room.on_failed_local_media` callback ([#54], [#143]);
         - `Room.on_close` callback for WebSocket close initiated by server ([#55]);
-        - `MediaTrack.on_enabled` and `MediaTrack.on_disabled` callbacks being called when `MediaTrack` is enabled or disabled ([#123], [#143]);
-        - `ConnectionHandle.on_remote_track_added` callback being called when new receiver `MediaTrack` is added ([#123], [#143]);
+        - `RemoteMediaTrack.on_enabled` and `RemoteMediaTrack.on_disabled` callbacks being called when `RemoteMediaTrack` is enabled or disabled ([#123], [#143], [#156]);
+        - `ConnectionHandle.on_remote_track_added` callback being called when new receiver `RemoteMediaTrack` is added ([#123], [#143], [#156]);
         - Enabling/disabling remote video/audio ([#127], [#155]):
             - `Room.disable_remote_audio`;
             - `Room.enable_remote_audio`;
             - `Room.disable_remote_video`;
             - `Room.enable_remote_video`.
-        - `MediaTrack.media_source_kind` function ([#145], [#146]).
+        - Muting/unmuting audio/video send ([#156]):
+            - `Room.mute_audio`;
+            - `Room.unmute_audio`;
+            - `Room.mute_video`;
+            - `Room.unmute_video`.
+        - `RemoteMediaTrack`/`LocalMediaTrack` `media_source_kind` function ([#145], [#146], [#156]);
+        - `RemoteMediaTrack` class ([#156]);
+        - `LocalMediaTrack` class ([#156]).
     - Optional tracks support ([#106]);
     - Simultaneous device and display video tracks publishing and receiving ([#144]);
     - `RtcIceTransportPolicy` configuration ([#79]).
@@ -73,8 +80,9 @@ All user visible changes to this project will be documented in this file. This p
 - Signalling:
     - Emitting of RPC commands:
         - `AddPeerConnectionMetrics` with `IceConnectionState` and `PeerConnectionState` ([#71], [#87]);
-        - `ApplyTracks` for enabling/disabling ([#81], [#155]);
         - `AddPeerConnectionStats` with `RtcStats` ([#90]);
+        - Enabling/disabling audio/video send/receive via `UpdateTracks` command ([#81], [#155]);
+        - Muting/unmuting audio/video send via `UpdateTracks` ([#156]).
     - Handling of RPC events:
         - `TracksApplied` with `TrackUpdate::Added`, `TrackUpdate::Updated` and `TrackUpdate::IceRestart` ([#105], [#138]);
         - `ConnectionQualityUpdated` ([#132]).
@@ -115,6 +123,7 @@ All user visible changes to this project will be documented in this file. This p
 [#146]: /../../pull/146
 [#147]: /../../pull/147
 [#155]: /../../pull/155
+[#156]: /../../pull/156
 
 
 

jason/demo/index.html

@@ -41,6 +41,8 @@
     let disableVideoSendBtn = document.getElementById('control__disable_video_send');
     let disableAudioRecvBtn = document.getElementById('control__disable_audio_recv');
     let disableVideoRecvBtn = document.getElementById('control__disable_video_recv');
+    let muteAudioSendBtn = document.getElementById('control__mute_audio_send');
+    let muteVideoSendBtn = document.getElementById('control__mute_video_send');
     let joinCallerButton = document.getElementById('join__join');
     let connectionState = document.getElementById('connection-state__state');
     let videoDiv = document.getElementById('remote-videos');
@@ -60,6 +62,8 @@
     let isVideoSendEnabled = true;
     let isAudioRecvEnabled = true;
     let isVideoRecvEnabled = true;
+    let isAudioMuted = false;
+    let isVideoMuted = false;
     let isPublishingEnabled = true;
     let remote_videos = [];
 
@@ -718,6 +722,36 @@
           disableVideoRecvBtn.textContent = 'Disable video recv';
         }
       });
+      muteAudioSendBtn.addEventListener('click', async () => {
+        try {
+          if (isAudioMuted) {
+            await room.unmute_audio();
+            isAudioMuted = false;
+            muteAudioSendBtn.textContent = 'Mute audio send';
+          } else {
+            await room.mute_audio();
+            isAudioMuted = true;
+            muteAudioSendBtn.textContent = 'Unmute audio send';
+          }
+        } catch (e) {
+          console.error(e.trace());
+        }
+      });
+      muteVideoSendBtn.addEventListener('click', async () => {
+        try {
+          if (isVideoMuted) {
+            await room.unmute_video();
+            isVideoMuted = false;
+            muteVideoSendBtn.textContent = 'Mute video send';
+          } else {
+            await room.mute_video();
+            isVideoMuted = true;
+            muteVideoSendBtn.textContent = 'Unmute video send';
+          }
+        } catch (e) {
+          console.error(e.trace());
+        }
+      });
 
       let roomId = window.location.hash.replace('#', '');
 
@@ -854,6 +888,10 @@
             <button class="btn btn-info" id="control__disable_audio_recv">Disable audio recv</button>
             <button class="btn btn-info" id="control__disable_video_recv">Disable video recv</button>
           </div>
+          <div>
+            <button class="btn btn-info" id="control__mute_audio_send">Mute audio send</button>
+            <button class="btn btn-info" id="control__mute_video_send">Mute video send</button>
+          </div>
         </div>
 
         <div class="mb-3">

jason/e2e-demo/js/index.js

@@ -13,6 +13,8 @@ let disableAudioSend = document.getElementById('control__disable_audio_send');
 let disableVideoSend = document.getElementById('control__disable_video_send');
 let disableAudioRecv = document.getElementById('control__disable_audio_recv');
 let disableVideoRecv = document.getElementById('control__disable_video_recv');
+let muteAudioSend = document.getElementById('control__mute_audio_send');
+let muteVideoSend = document.getElementById('control__mute_video_send');
 let closeApp = document.getElementById('control__close_app');
 let audioSelect = document.getElementById('connect__select-device_audio');
 let videoSelect = document.getElementById('connect__select-device_video');
@@ -453,6 +455,8 @@ window.onload = async function() {
   let isVideoSendEnabled = true;
   let isAudioRecvEnabled = true;
   let isVideoRecvEnabled = true;
+  let isAudioMuted = false;
+  let isVideoMuted = false;
   let room = await newRoom();
 
   async function initLocalStream() {
@@ -818,6 +822,36 @@ window.onload = async function() {
         console.error(e.trace());
       }
     });
+    muteAudioSend.addEventListener('click', async () => {
+      try {
+        if (isAudioMuted) {
+          await room.unmute_audio();
+          isAudioMuted = false;
+          muteAudioSend.textContent = 'Mute audio send';
+        } else {
+          await room.mute_audio();
+          isAudioMuted = true;
+          muteAudioSend.textContent = 'Unmute audio send';
+        }
+      } catch (e) {
+        console.error(e.trace());
+      }
+    });
+    muteVideoSend.addEventListener('click', async () => {
+      try {
+        if (isVideoMuted) {
+          await room.unmute_video();
+          isVideoMuted = false;
+          muteVideoSend.textContent = 'Mute video send';
+        } else {
+          await room.mute_video();
+          isVideoMuted = true;
+          muteVideoSend.textContent = 'Unmute video send';
+        }
+      } catch (e) {
+        console.error(e.trace());
+      }
+    });
     disableAudioRecv.addEventListener('click', async () => {
       if (isAudioRecvEnabled) {
         await room.disable_remote_audio();

jason/e2e-demo/video-call.html

@@ -176,6 +176,10 @@
       <button id="control__disable_audio_recv" class="btn btn-secondary">Disable audio recv</button>
       <button id="control__disable_video_recv" class="btn btn-secondary">Disable video recv</button>
     </div>
+    <div class="mb-3">
+      <button id="control__mute_audio_send" class="btn btn-secondary">Mute audio send</button>
+      <button id="control__mute_video_send" class="btn btn-secondary">Mute video send</button>
+    </div>
     <button type="button"
             class="btn btn-secondary"
             data-toggle="modal"

jason/src/api/connection.rs

@@ -10,7 +10,7 @@ use medea_client_api_proto::{ConnectionQualityScore, MemberId, PeerId};
 use wasm_bindgen::prelude::*;
 
 use crate::{
-    media::MediaStreamTrack,
+    media::track::remote,
     utils::{Callback0, Callback1, HandlerDetachedError},
 };
 
@@ -101,9 +101,9 @@ struct InnerConnection {
     /// Current [`ConnectionQualityScore`] of this [`Connection`].
     quality_score: Cell<Option<ConnectionQualityScore>>,
 
-    /// JS callback, that will be invoked when remote [`MediaStreamTrack`] is
+    /// JS callback, that will be invoked when [`remote::Track`] is
     /// received.
-    on_remote_track_added: Callback1<MediaStreamTrack>,
+    on_remote_track_added: Callback1<remote::Track>,
 
     /// JS callback, that will be invoked when [`ConnectionQualityScore`] will
     /// be updated.
@@ -125,8 +125,8 @@ impl ConnectionHandle {
         upgrade_or_detached!(self.0).map(|inner| inner.remote_id.0.clone())
     }
 
-    /// Sets callback, which will be invoked when new remote
-    /// [`MediaStreamTrack`] will be added to this [`Connection`].
+    /// Sets callback, which will be invoked when new [`remote::Track`] will be
+    /// added to this [`Connection`].
     pub fn on_remote_track_added(
         &self,
         f: js_sys::Function,
@@ -164,8 +164,8 @@ impl Connection {
     }
 
     /// Invokes `on_remote_track_added` JS callback with the provided
-    /// [`MediaStreamTrack`].
-    pub fn add_remote_track(&self, track: MediaStreamTrack) {
+    /// [`remote::Track`].
+    pub fn add_remote_track(&self, track: remote::Track) {
         self.0.on_remote_track_added.call(track);
     }