Stop disabled video track when Safari

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@whereby/jslib-media",
   "description": "Media library for Whereby",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "private": false,
   "license": "MIT",
   "homepage": "https://github.com/whereby/jslib-media",

src/webrtc/P2pRtcManager.js

@@ -295,7 +295,7 @@ export default class P2pRtcManager extends BaseRtcManager {
 
     stopOrResumeVideo(localStream, enable) {
         // actually turn off the camera. Chrome-only (Firefox has different plans)
-        if (browserName !== "chrome") {
+        if (!["chrome", "safari"].includes(browserName)) {
             return;
         }
         if (enable === false) {

src/webrtc/VegaRtcManager.js

@@ -1104,7 +1104,7 @@ export default class VegaRtcManager {
 
         this._pauseResumeWebcam();
 
-        if (browserName === "chrome") {
+        if (["chrome", "safari"].includes(browserName)) {
             // actually turn off the camera. Chrome-only (Firefox etc. has different plans)
 
             if (!enable) {

tests/webrtc/P2pRtcManager.spec.js

@@ -5,23 +5,50 @@ import * as CONNECTION_STATUS from "../../src/model/connectionStatusConstants";
 import P2pRtcManager from "../../src/webrtc/P2pRtcManager";
 import { RELAY_MESSAGES, PROTOCOL_RESPONSES } from "../../src/model/protocol";
 
+const originalNavigator = global.navigator;
+
 describe("P2pRtcManager", () => {
+    let navigator;
     let serverSocketStub;
     let serverSocket;
     let emitter;
     let webrtcProvider;
     let clientId;
+    let mediaContstraints;
 
     beforeEach(() => {
         window.RTCPeerConnection = helpers.createRTCPeerConnectionStub();
+        mediaContstraints = {
+            audio: true,
+            video: true,
+        };
         serverSocketStub = helpers.createServerSocketStub();
         serverSocket = serverSocketStub.socket;
         webrtcProvider = {
             webRtcDetectedBrowser: "chrome",
             webRtcDetectedBrowserVersion: "60",
+            getMediaConstraints: () => mediaContstraints,
         };
         emitter = helpers.createEmitterStub();
         clientId = helpers.randomString("client-");
+
+        navigator = {
+            mediaDevices: {
+                getUserMedia: () => {
+                    throw "must be stubbed";
+                },
+            },
+        };
+
+        Object.defineProperty(global, "navigator", {
+            value: navigator,
+        });
+    });
+
+    afterEach(() => {
+        Object.defineProperty(global, "navigator", {
+            value: originalNavigator,
+        });
     });
 
     function createRtcManager({
@@ -409,4 +436,138 @@ describe("P2pRtcManager", () => {
             });
         });
     });
+
+    describe("stopOrResumeVideo", () => {
+        let clock;
+        let localStream;
+        let rtcManager;
+
+        beforeEach(() => {
+            clock = sinon.useFakeTimers();
+            localStream = helpers.createMockedMediaStream();
+            rtcManager = createRtcManager();
+        });
+
+        afterEach(() => {
+            clock.restore();
+        });
+
+        describe("when disabling", () => {
+            it("should stop the video track after 5 seconds", () => {
+                const videoTrack = localStream.getVideoTracks()[0];
+                videoTrack.enabled = false;
+
+                rtcManager.stopOrResumeVideo(localStream, false);
+
+                expect(videoTrack.stop).not.to.have.been.called();
+                clock.tick(5000);
+                expect(videoTrack.stop).to.have.been.called();
+            });
+
+            it("should NOT stop track if it is still enabled", () => {
+                const videoTrack = localStream.getVideoTracks()[0];
+                videoTrack.enabled = true;
+
+                rtcManager.stopOrResumeVideo(localStream, false);
+
+                expect(videoTrack.stop).not.to.have.been.called();
+                clock.tick(5000);
+                expect(videoTrack.stop).not.to.have.been.called();
+            });
+
+            it("should remove the track from local stream", () => {
+                const videoTrack = localStream.getVideoTracks()[0];
+                videoTrack.enabled = false;
+
+                rtcManager.stopOrResumeVideo(localStream, false);
+                clock.tick(5000);
+
+                expect(localStream.removeTrack).to.have.been.calledWithExactly(videoTrack);
+            });
+
+            it("should emit event", () => {
+                const videoTrack = localStream.getVideoTracks()[0];
+                videoTrack.enabled = false;
+
+                rtcManager.stopOrResumeVideo(localStream, false);
+                clock.tick(5000);
+
+                expect(emitter.emit).to.have.been.calledWithExactly(
+                    CONNECTION_STATUS.EVENTS.LOCAL_STREAM_TRACK_REMOVED,
+                    {
+                        stream: localStream,
+                        track: videoTrack,
+                    }
+                );
+            });
+        });
+
+        describe("when enabling", () => {
+            let gumStream;
+            let gumStub;
+
+            beforeEach(() => {
+                gumStream = helpers.createMockedMediaStream();
+                gumStub = sinon.stub(navigator.mediaDevices, "getUserMedia").resolves(gumStream);
+                localStream.removeTrack(localStream.getVideoTracks()[0]);
+            });
+
+            afterEach(() => {
+                gumStub.restore();
+            });
+
+            it("should obtain new video track with existing constraints", () => {
+                mediaContstraints = { video: { some: "constraint" } };
+
+                rtcManager.stopOrResumeVideo(localStream, true);
+
+                expect(navigator.mediaDevices.getUserMedia).to.have.been.calledWithExactly({
+                    video: mediaContstraints.video,
+                });
+            });
+
+            it("should add video track to local stream", async () => {
+                const expectedTrack = gumStream.getVideoTracks()[0];
+
+                await rtcManager.stopOrResumeVideo(localStream, true);
+
+                expect(localStream.addTrack).to.have.been.calledWithExactly(expectedTrack);
+            });
+
+            it("should emit event", async () => {
+                const expectedTrack = gumStream.getVideoTracks()[0];
+
+                await rtcManager.stopOrResumeVideo(localStream, true);
+
+                expect(emitter.emit).to.have.been.calledWithExactly(CONNECTION_STATUS.EVENTS.LOCAL_STREAM_TRACK_ADDED, {
+                    streamId: localStream.id,
+                    tracks: [expectedTrack],
+                    screenShare: false,
+                });
+            });
+
+            it("should add track to peer connection(s)", async () => {
+                const expectedTrack = gumStream.getVideoTracks()[0];
+                sinon.spy(rtcManager, "_addTrackToPeerConnections");
+
+                await rtcManager.stopOrResumeVideo(localStream, true);
+
+                expect(rtcManager._addTrackToPeerConnections).to.have.been.calledWithExactly(expectedTrack);
+            });
+
+            it("should replace track in peer connection(s) when stopped track exists", async () => {
+                const expectedTrack = gumStream.getVideoTracks()[0];
+                const stoppedTrack = helpers.createMockedMediaStreamTrack({ kind: "video" });
+                rtcManager._stoppedVideoTrack = stoppedTrack;
+                sinon.spy(rtcManager, "_replaceTrackToPeerConnections");
+
+                await rtcManager.stopOrResumeVideo(localStream, true);
+
+                expect(rtcManager._replaceTrackToPeerConnections).to.have.been.calledWithExactly(
+                    stoppedTrack,
+                    expectedTrack
+                );
+            });
+        });
+    });
 });