How restart a closed video track , stopped using userStream.getVideoTracks()[0].stop()

Question

I am trying to implement, the video on/off toggle for a webRtc application in react, so far i am able to stop the video using

userStream.getVideoTracks()[0].stop()

but can't seem to find any function to restart the video track .

I have tried the .enable method

 userStream.getVideoTracks()[0].enabled = !userStream.getVideoTracks()[0]

but using this still leaves the webcam light on, which in undesirable but gets the functionality working, on the other hand userStream.getVideoTracks()[0].stop() turns off the light but i am not able start it back.
Is there anyway to achive this without creating a new stream.

Answer 1

When you use track.stop() you can't reuse the track. You'll have to create a new one.

With the track.enabled method it should normally get the functionality that you're looking for. Disabling the camera indicator when disabled. Because as the official docs state:

If the MediaStreamTrack represents the video input from a camera, disabling the track by setting enabled to false also updates device activity indicators to show that the camera is not currently recording or streaming. For example, the green "in use" light next to the camera in iMac and MacBook computers turns off while the track is muted in this way.

https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamTrack/enabled

It could be another track is still using your track or it could be something browser version related why your camera indicator is still on.

Answer 2

best way to do is you can replace tracks.

function replaceTracks(elementId, newStream, localStream, peerConnection) {

    detachMediaStream(elementId);

    newStream.getTracks().forEach(function (track) {
      localStream.addTrack(track);
    });

    attachMediaStream(elementId, newStream);

    // optionally, if you have active peer connections:
    _replaceTracksForPeer(peerConnection);

    function _replaceTracksForPeer(peer) {
      console.log(peer)
      peer.getSenders().map(function (sender) {
        sender.replaceTrack(newStream.getTracks().find(function (track) {
          return track.kind === sender.track.kind;
        }));
      });
    }
    function attachMediaStream(id, stream) {
      var elem: any = document.getElementById(id);

      if (elem) {
        if (typeof elem.srcObject === 'object') {
          elem.srcObject = stream;
        } else {
          elem.src = window.URL.createObjectURL(stream);
        }

        elem.onloadedmetadata = function (e) {
          elem.play();
        };
      } else {
        throw new Error('Unable to attach media stream');
      }
    }
    function detachMediaStream(id) {
      var elem;
      elem = document.getElementById(id);

      if (elem) {
        elem.pause();

        if (typeof elem.srcObject === 'object') {
          elem.srcObject = null;
        } else {
          elem.src = '';
        }
      }
    }
  }