微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

无法读取mediaRecorder.stop中未定义错误的属性“ stop”;

如何解决无法读取mediaRecorder.stop中未定义错误的属性“ stop”;

事实是,在代码正常工作之前,它的工作方式是这样的:当您单击按钮(开始)时,在成功通过请求访问(网络摄像头和麦克风)后,现在开始录制视频将无法工作该脚本记录视频并通过ajax传输

用两个错误注释标记错误的地方

$(document).ready(function(){
            /*
        *  copyright (c) 2015 The WebRTC project authors. All Rights Reserved.
        *
        *  Use of this source code is governed by a BSD-style license
        *  that can be found in the LICENSE file in the root of the source
        *  tree.
        */

        // This code is adapted from
        // https://rawgit.com/Miguelao/demos/master/mediarecorder.html

        'use strict';

        /* globals MediaRecorder */

        let mediaRecorder;
        let recordedBlobs;
        
        // const errorMsgElement = document.querySelector('span#errorMsg');
        const recordedVideo = document.querySelector('video#recorded');
        const recordButton = document.querySelector('#record');
        recordButton.addEventListener('click',() => {
            document.getElementById("start").click();
        if (recordButton.textContent === 'Start Recording') {
            startRecording();
            $('#start').css("display","none");
            

            // setTimeout(stopRecording,50000);
        } else {
            stopRecording();
            recordButton.textContent = 'Start Recording';
            playButton.disabled = false;
            downloadButton.disabled = false;
        }
        });

        const playButton = document.querySelector('button#play');
        playButton.addEventListener('click',() => {
        const superBuffer = new Blob(recordedBlobs,{type: 'video/webm'});
        recordedVideo.src = null;
        recordedVideo.srcObject = null;
        recordedVideo.src = window.URL.createObjectURL(superBuffer);
        recordedVideo.controls = true;
        recordedVideo.play();
        });

        const downloadButton = document.querySelector('#download');
        downloadButton.addEventListener('click',() => {
        const blob = new Blob(recordedBlobs,{type: 'video/webm'});
        const url = window.URL.createObjectURL(blob);
        const a = document.createElement('a');
                
                    
                

        a.style.display = 'none';
        a.href = url;
        a.download = 'test.webm';
        document.body.appendChild(a);
        a.click();
        setTimeout(() => {
            document.body.removeChild(a);
            window.URL.revokeObjectURL(url);
        },100);
        location.reload();
        });

        function handleDataAvailable(event) {
        console.log('handleDataAvailable',event);
        if (event.data && event.data.size > 0) {
            recordedBlobs.push(event.data);
        }
        }

        function startRecording() {
        recordedBlobs = [];
        let options = {mimeType: 'video/webm;codecs=vp9,opus'};
        if (!MediaRecorder.isTypeSupported(options.mimeType)) {
            console.error(`${options.mimeType} is not supported`);
            options = {mimeType: 'video/webm;codecs=vp8,opus'};
            if (!MediaRecorder.isTypeSupported(options.mimeType)) {
            console.error(`${options.mimeType} is not supported`);
            options = {mimeType: 'video/webm'};
            if (!MediaRecorder.isTypeSupported(options.mimeType)) {
                console.error(`${options.mimeType} is not supported`);
                options = {mimeType: ''};
            }
            }
        }

        try {
            mediaRecorder = new MediaRecorder(window.stream,options);
        } catch (e) {
            console.error('Exception while creating MediaRecorder:',e);
            errorMsgElement.innerHTML = `Exception while creating MediaRecorder: ${JSON.stringify(e)}`;
            return;
        }

        console.log('Created MediaRecorder',mediaRecorder,'with options',options);
        recordButton.textContent = 'Stop Recording';
        playButton.disabled = true;
        downloadButton.disabled = true;
        mediaRecorder.onstop = (event) => {
            console.log('Recorder stopped: ',event);
            console.log('Recorded Blobs: ',recordedBlobs);
        };
        mediaRecorder.ondataavailable = handleDataAvailable;
        mediaRecorder.start();
        console.log('MediaRecorder started',mediaRecorder);
        }

        function stopRecording() {
            //ERROR
                 mediaRecorder.stop(); 
            //ERROR
        //document.getElementById("download").click();
            $('#record').css( "display","none" ); 
            $('#download').attr( "style",'');
        }

        function handleSuccess(stream) {
        recordButton.disabled = false;
        console.log('getUserMedia() got stream:',stream);
        window.stream = stream;

        const gumVideo = document.querySelector('video#gum');
        gumVideo.srcObject = stream;
        }

        async function init(constraints) {
        try {
            const stream = await navigator.mediaDevices.getUserMedia(constraints);
            handleSuccess(stream);
        } catch (e) {
            console.error('navigator.getUserMedia error:',e);
            // errorMsgElement.innerHTML = `navigator.getUserMedia error:${e.toString()}`;
        }
        }

        document.querySelector('#start').addEventListener('click',async () => {
            $('#main_img').css('display','none');
            $('#gum').attr('style','');
        //const hasEchoCancellation = document.querySelector('#echoCancellation').checked;
        const constraints = {
            //audio: {
            //echoCancellation: {exact: hasEchoCancellation}
            //},video: {
            width: 1280,height: 720
            }
        };
        console.log('Using media constraints:',constraints);
        await init(constraints);
        });
        });

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。