Question

我的代码中有一个非常愚蠢的错误，我找不到。基本上，我正在使用两个单独的按钮来开始/停止记录从WebRTC getUserMedia（）获得的流（我正在使用RecordRTC进行记录）。我的停止功能会停止录制，但不会释放相机。

<script type="text/javascript">
    $(document).ready(function () {

        var recorder;
        var video = document.getElementById("video");

        var videoConstraints = {
            video: {
                mandatory: {
                    minWidth: 1280,
                    minHeight: 720,

                    maxWidth: 1920,
                    maxHeight: 1080,

                    minFrameRate: 29.97,
                    maxFrameRate: 60,

                    minAspectRatio: 1.77
                }
            },
            audio: true
        };

        function captureCamera(callback) {
            navigator.mediaDevices.getUserMedia(videoConstraints).then(function (camera) {
                callback(camera);
            }).catch(function (error) {
                alert('Unable to capture your camera. Please check console logs.');
                console.error(error);
            });
        }

        function stopRecordingCallback() {
            video.src = video.srcObject = null;
            video.src = URL.createObjectURL(recorder.getBlob());
            video.play();
            //recorder.camera.stop();   //its the deprecated way
            recorder.camera.getTracks().forEach(track => track.stop());  //modern way as per documentation
            recorder.destroy();
            recorder = null;
        }

        hasGetUserMedia() {
            return (navigator.getUserMedia ||
                navigator.webkitGetUserMedia ||
                navigator.mozGetUserMedia ||
                navigator.msGetUserMedia);
        }


        $('#startRecord').on("click", function () {
            if (hasGetUserMedia()) {


                /*----------------recording process start----------------*/

                this.disabled = true;
                captureCamera(function (camera) {
                    setSrcObject(camera, video);
                    video.play();
                    var options = {
                        recorderType: MediaStreamRecorder,
                        mimeType: 'video/webm\;codecs=h264',
                        audioBitsPerSecond: 128000,
                        videoBitsPerSecond: 2097152, // 2 mbps
                    };
                    recorder = RecordRTC(camera, options);
                    recorder.startRecording();
                    // release camera on stopRecording

                    recorder.camera = camera;
                    document.getElementById('stopRecord').disabled = false;
                });


                /*----------------recording process end----------------*/

            }
            else {
                alert('getUserMedia() is not supported by your browser');
            }

        });
        $('#stopRecord').on("click", function () {
            this.disabled = true;
            document.getElementById('startRecord').disabled = false;
            recorder.stopRecording(stopRecordingCallback);
        });
    });
</script>

因此，我无法找到调用$('#stopRecord').on("click", function (){})时相机未释放的原因。有帮助吗？

Answer 1

您可以停止流中的曲目，如下所示：

navigator.getUserMedia({audio: false, video: true},
    function(stream) {
         // can also use getAudioTracks() or getVideoTracks()
        var track = stream.getTracks()[0];  // if only one media track
        // ...
        track.stop();
    },
    function(error){
        console.log('getUserMedia() error', error);
    });

所以，就您而言，我相信您可以执行以下操作：

  var track = recorder.camera.getTracks()[0];  // if only one media track
  // ...
  track.stop();

getUserMedia（）无法释放相机

1 个答案: