mediaRecorder.state remains recording even after stoping mediaStreamTrack

Question

I am using getUserMedia and mediaRecorder API to record an video from webcam.

I am calling stopLocalStram on a button click to stop the media tracks and call mediaRecorder.onstop().

In mediaRecorder.onstop(), I am saving the blob content as formData and sending it back to server.

Even after stoping the mediaTracks the mediaRecorder.state shows recording.Instead it should have shown Inactive. Web cam light also remains on.

Every thing works fine in firefox.

I am using chrome version 51

In firefox mediaRecorder.onstop() is called explicitly when the stream tracks are stoped.

In chrome have to trigger it manually.

StopLocalStream() function that works great in firefox:-

function stoplocalStream(localStream)
        {
            console.log('stop called');

            localStream.getAudioTracks()[0].stop();
            localStream.getVideoTracks()[0].stop();

        }

In chrome first try:-

function stoplocalStream(localStream)
        {
            console.log('stop called');

            localStream.getAudioTracks()[0].stop();
            localStream.getVideoTracks()[0].stop();

            console.log('Stopped, state = ' + mediaRecorder.state);
            //shows recording
            setTimeout(function(){
                mediaRecorder.onstop();
            }, 3000);

        }

I even tried removing the tracks from the stream rather then stoping it, but it didn't work. In chrome second try:-

function stoplocalStream(localStream)
        {
            console.log('stop called');
            var audioTrack = localStream.getAudioTracks();

            if (audioTrack.length > 0) {

                localStream.removeTrack(audioTrack[0]);
            }

            var videoTrack = localStream.getVideoTracks();

            if (videoTrack.length > 0) {

                 localStream.removeTrack(videoTrack[0]);
            }


            console.log('Stopped, state = ' + mediaRecorder.state);

            setTimeout(function(){
                mediaRecorder.onstop();
            }, 3000);

        }

mediaRecorder.onstop() :-

mediaRecorder.onstop = function()
            {

                console.log('Stopped, state = ' + mediaRecorder.state);
                var blob = new Blob(chunks, {type: "video/mp4"});
                chunks = [];

                var videoURL = window.URL.createObjectURL(blob);
                var downloadLink = document.getElementById('downloadLink');
                downloadLink.href = videoURL;
                video.src = videoURL;
                downloadLink.innerHTML = 'Download video file';

                var rand = Math.floor((Math.random() * 10000000));
                var name = "video_"+rand+".mp4" ;

                downloadLink.setAttribute( "download", name);
                downloadLink.setAttribute( "name", name);

                var dataBlob = new Blob([$scope.upr,$scope.question], { type: "text/plain" });

                var uprId = $scope.upr;
                var question = $scope.question;
                var f = new FormData();

                f.append('videofile', blob);
                f.append('uprId', $scope.upr);
                f.append('questionId',$scope.question);

                var xhr = new XMLHttpRequest();
                xhr.open('POST','index.php?r=site/SaveRecordedFile',true);
                xhr.onreadystatechange = function() {
                    if (xhr.readyState == 4 && xhr.status == 200) {

                        $scope.$apply(function () {
                            video.src = xhr.responseText;
                        });

                    }
                };
                xhr.send(f);

            };

please help me out how can i stop the stream for chrome.

Ref:- http://www.html5rocks.com/en/tutorials/getusermedia/intro/

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