Question

我正在使用getUserMedia和mediaRecorder API来录制网络摄像头的视频。

我在单击按钮时调用stopLocalStram以停止媒体轨道并调用mediaRecorder.onstop（）。

在mediaRecorder.onstop（）中，我将blob内容保存为formData并将其发送回服务器。

即使在停止mediaTracks后，mediaRecorder.state也会显示录音。相反，它应该显示为Inactive。网络摄像头灯也一直亮着。

在firefox中，每件事都运行良好。

我正在使用chrome版本51

在firefox mediaRecorder.onstop（）在流轨道停止时显式调用。

在chrome中必须手动触发它。

在firefox中运行良好的StopLocalStream（）函数： -

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

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

        }

首先尝试镀铬： -

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

        }

我甚至尝试从流中移除轨道而不是停止它，但它不起作用。在chrome第二次尝试： -

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

            };

请帮我解决如何阻止Chrome流的问题。

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

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

即使在停止mediaStreamTrack

0 个答案: