collab-project / videojs-record

video.js plugin for recording audio/video/image files
https://collab-project.github.io/videojs-record
MIT License
1.4k stars 317 forks source link

Video Js Record is not working on safari, iphone, ipad and not converting in mp3, mp4 format #498

Closed anayinfowind closed 4 years ago

anayinfowind commented 4 years ago
/*--------------------------------------------------------------------------
         *  Record Audio
         * -------------------------------------------------------------------------*/
            var options = {
                controls: true,
                bigPlayButton: false,
                width: 320,
                height: 240,
                fluid: true,
                plugins: {
                    wavesurfer: {
                        //src: "live",
                        backend: 'WebAudio',
                        waveColor: "#36393b",
                        progressColor: "black",
                        cursorColor: '#FFFFFF',
                        debug: true,
                        cursorWidth: 1,
                        hideScrollbar: true,
                        //msDisplayMax: 20,
                        plugins: [
                            // enable microphone plugin
                            WaveSurfer.microphone.create({
                                bufferSize: 4096,
                                numberOfInputChannels: 1,
                                numberOfOutputChannels: 1,
                                constraints: {
                                    video: false,
                                    audio: true
                                }
                            })
                        ]
                    },
                    record: {
                        audio: true,
                        video: false,
                        maxLength: 30,
                        //audioMimeType: 'audio/wav',
                        displayMilliseconds: true,
                        convertEngine: 'ffmpeg.js',
                        convertOptions: ['-f', 'mp3', '-codec:a', 'libmp3lame', '-qscale:a', '2'],
                        pluginLibraryOptions: {
                            outputType: 'audio/mpeg'
                        },
                        convertWorkerURL: './lib/ffmpeg-worker-mp4.js',
                        // or use WebM encoding worker (VP8 & Opus encoders)
                        // convertWorkerURL: '/lib/ffmpeg-worker-webm.js',
                        debug: true
                    }
                }
            };

            // apply audio workarounds for certain browsers
            applyAudioWorkaround();

            var recordAudio = videojs("recordAudio", options, function() {
                // print version information at startup
                var msg = 'Using video.js ' + videojs.VERSION +
                    ' with videojs-record ' + videojs.getPluginVersion('record') +
                    ', videojs-wavesurfer ' + videojs.getPluginVersion('wavesurfer') +
                    ', wavesurfer.js ' + WaveSurfer.VERSION + ' and recordrtc ' +
                    RecordRTC.version;
                videojs.log(msg);
            });
            // error handling
            recordAudio.on('deviceError', function() {
                console.log('device error:', recordAudio.deviceErrorCode);
            });
            recordAudio.on('error', function(error) {
                console.log('error:', error);
            });
            // user clicked the record button and started recording
            recordAudio.on('startRecord', function() {
                console.log('started recording!');
            });
            // user completed recording and stream is available
            recordAudio.on('finishRecord', function() {
                // the blob object contains the recorded data that
                // can be downloaded by the user, stored on server etc.
                console.log('finished recording: ', recordAudio.recordedData);

                var formData = new FormData();
                formData.append('audio', recordAudio.recordedData);

                $('.myrec').empty().html('<p><a href="#" class="btn btn-primary clear-myrec">Clear</a></p>');

                $('#recorded_data').attr('data-type', 'audio');
                var reader = new FileReader();
                reader.readAsDataURL(recordAudio.recordedData); 
                reader.onloadend = function() {
                    var base64data = reader.result;
                    $('#recorded_data').val(base64data);
                }

            });

            // converter started processing
            recordAudio.on('startConvert', function() {
                console.log('started converting!');
            });

            // converter completed and stream is available
            recordAudio.on('finishConvert', function() {
                // the convertedData object contains the recorded data that
                // can be downloaded by the user, stored on server etc.
                console.log('finished converting: ', recordAudio.convertedData);

                $('.myrec').empty().html('<p><a href="#" class="btn btn-primary clear-myrec">Clear</a></p>');

                $('#recorded_data').attr('data-type', 'audio');
                var reader = new FileReader();
                reader.readAsDataURL(recordAudio.convertedData); 
                reader.onloadend = function() {
                    var base64data = reader.result;
                    $('#recorded_data').val(base64data);
                }
            });

/*--------------------------------------------------------------------------
         *  Record Audio Video
         * -------------------------------------------------------------------------*/
            var options = {
                controls: true,
                //bigPlayButton: false,
                width: 320,
                height: 240,
                fluid: true,
                plugins: {
                    record: {
                        audio: true,
                        video: true,
                        maxLength: 60,
                        audioMimeType: 'audio/wav',
                        videoMimeType: 'video/webm;codes=H264',
                        debug: true
                    }
                }
            };
            // apply some workarounds for opera browser
            applyVideoWorkaround();

            var recordAudioVideo = videojs("recordAudioVideo", options, function(){
                // print version information at startup
                var msg = 'Using video.js ' + videojs.VERSION +
                    ' with videojs-record ' + videojs.getPluginVersion('record') +
                    ' and recordrtc ' + RecordRTC.version;
                videojs.log(msg);
            });
            // error handling
            recordAudioVideo.on('deviceError', function() {
                console.log('device error:', recordAudioVideo.deviceErrorCode);
            });
            recordAudioVideo.on('error', function(error) {
                console.log('error:', error);
            });
            // user clicked the record button and started recording
            recordAudioVideo.on('startRecord', function() {
                console.log('started recording!');
            });
            // user completed recording and stream is available
            recordAudioVideo.on('finishRecord', function() {
                // the blob object contains the recorded data that
                // can be downloaded by the user, stored on server etc.
                console.log('finished recording: ', recordAudioVideo.recordedData);

                var formData = new FormData();
                formData.append('audiovideo', recordAudioVideo.recordedData.video);

                $('#recorded_data').attr('data-type', 'audio_video');

                $('.myrec').empty().html('<p><a href="#" class="btn btn-primary clear-myrec">Clear</a></p>');

                var reader = new FileReader();
                reader.readAsDataURL(recordAudioVideo.recordedData); 
                reader.onloadend = function() {
                    var base64data = reader.result;
                    $('#recorded_data').val(base64data);
                }
            });
thijstriemstra commented 4 years ago

@anayinfowind what library versions? what iOS version? what iPhone type? what iPad? It's annoying you don't include this information when the ticket instructions clearly ask for them.

thijstriemstra commented 4 years ago

no feedback, closing.