I have a webpage where I want user to take a picture with his laptop/phone camera. Once he clicks on a button a modal is shown and the following js will start the camera stream to take the picture:

    function startStreaming() {
        if (null != cameraStream) {
            var track = cameraStream.getTracks()[0];
            track.stop();
            stream.load();
            cameraStream = null;
        }
        //const audioSource = audioInputSelect.value;
        const videoSource = videoSelect.value;
        const constraints = {
            //audio: {deviceId: audioSource ? {exact: audioSource} : undefined},
            video: {
                deviceId: videoSource ? {
                    exact: videoSource
                } : undefined
            }
        };
        navigator.mediaDevices.getUserMedia(constraints).then(gotStream).then(gotDevices).catch(handleError);
        var mediaSupport = 'mediaDevices' in navigator;
        if (mediaSupport && null == cameraStream) {
            const videoSource = videoSelect.value;
            const constraints = {
                video: {
                    deviceId: videoSource ? {
                        exact: videoSource
                    } : undefined
                }
            };
            navigator.mediaDevices.getUserMedia(constraints)
                .then(function (mediaStream) {
                    cameraStream = mediaStream;
                    stream.srcObject = mediaStream;
                    stream.play();
                })
                .catch(handleError);
        } else {
            alert('Your browser does not support media devices.');
            return;
        }
    }

This is triggered by

            $('#photoStudio').on('show.bs.modal', function (event) {
                navigator.mediaDevices.enumerateDevices().then(gotDevices).catch(handleError);
                startStreaming();
            });

Then when I close the modal I want to stop the streaming but the led indicator next to my camera is still on)

            $('#photoStudio').on('hide.bs.modal', function (event) {
                stopStreaming();
            });

where stopStreaming() is:

    function stopStreaming() {
        if (null != cameraStream) {
            var track = cameraStream.getTracks()[0];
            track.stop();
            stream.load();
            cameraStream = null;
        }
    }

I don't get any kind of error and I cannot find a way to debug why the camera is still running. Am I missing anything in the stopStreaming function?

I have a webpage where I want user to take a picture with his laptop/phone camera. Once he clicks on a button a modal is shown and the following js will start the camera stream to take the picture:

    function startStreaming() {
        if (null != cameraStream) {
            var track = cameraStream.getTracks()[0];
            track.stop();
            stream.load();
            cameraStream = null;
        }
        //const audioSource = audioInputSelect.value;
        const videoSource = videoSelect.value;
        const constraints = {
            //audio: {deviceId: audioSource ? {exact: audioSource} : undefined},
            video: {
                deviceId: videoSource ? {
                    exact: videoSource
                } : undefined
            }
        };
        navigator.mediaDevices.getUserMedia(constraints).then(gotStream).then(gotDevices).catch(handleError);
        var mediaSupport = 'mediaDevices' in navigator;
        if (mediaSupport && null == cameraStream) {
            const videoSource = videoSelect.value;
            const constraints = {
                video: {
                    deviceId: videoSource ? {
                        exact: videoSource
                    } : undefined
                }
            };
            navigator.mediaDevices.getUserMedia(constraints)
                .then(function (mediaStream) {
                    cameraStream = mediaStream;
                    stream.srcObject = mediaStream;
                    stream.play();
                })
                .catch(handleError);
        } else {
            alert('Your browser does not support media devices.');
            return;
        }
    }

This is triggered by

            $('#photoStudio').on('show.bs.modal', function (event) {
                navigator.mediaDevices.enumerateDevices().then(gotDevices).catch(handleError);
                startStreaming();
            });

Then when I close the modal I want to stop the streaming but the led indicator next to my camera is still on)

            $('#photoStudio').on('hide.bs.modal', function (event) {
                stopStreaming();
            });

where stopStreaming() is:

    function stopStreaming() {
        if (null != cameraStream) {
            var track = cameraStream.getTracks()[0];
            track.stop();
            stream.load();
            cameraStream = null;
        }
    }

I don't get any kind of error and I cannot find a way to debug why the camera is still running. Am I missing anything in the stopStreaming function?

• javascript
• jquery
• mediadevices

2 Answers 2

If any track has not been stopped then your camera will still be active. In your stopStreaming function you only stop the first track in the returned array.

If you instead iterate through the tracks you may catch ones you aren't currently:

    function stopStreaming() {
        if (null != cameraStream) {
            var tracks = cameraStream.getTracks();
           // stop all the tracks, not just the first
            tracks.forEach((track) => {
                track.stop();
           });
            stream.load();
            cameraStream = null;
        }
    }

this.camera_stream.getTracks().forEach((track) => {
    console.log(track);
    track.stop();
    **track.enabled = false**        
});
video.load()
this.camera_stream = null