Stop disabled video track when Safari

Previously, only Chrome needed to stop the video track to make the
camera light turn off. Recent Safari releases have now opted to use the
same logic, meaning we need to do the same for Safari on our end.

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
+                );
+            });
+        });
+    });
 });