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 Recorder doesn't work on mobile devices #459

Closed lwaterslisa closed 4 years ago

lwaterslisa commented 4 years ago

Description

I have the video recorder working fine on desktop but, it won't record on phones.

I can click on the middle icon and it asks to use my camera. Then the camera launches and it just shows a still show with no options to record. Any help would be appreciated.

thijstriemstra commented 4 years ago

it won't record on phones.

you have to be more specific. And always include browser version, videojs-record version and your videojs-record config.

lwaterslisa commented 4 years ago

Videojs-record: version 2.4.1. I am trying it on a IPhone with 13.2 installed.

Here is my code:

<script>
var player = videojs("myVideo", {
    controls: true,
    width: 320,
    height: 240,
    fluid: true,
    plugins: {
        record: {
            audio: true,
            video: true,
            maxLength: 180,
            debug: true
        }
    }
}, 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
player.on('deviceError', function() {
    console.log('device error:', player.deviceErrorCode);
});
player.on('error', function(error) {
    console.log('error:', error);
});
// user clicked the record button and started recording
player.on('startRecord', function() {
    console.log('started recording!');
});
// user completed recording and stream is available
player.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: ', player.recordedData);

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

    // file name
formData.append('media-filename', player.recordedData.video.name);

// mime-type
formData.append('media-type', player.recordedData.video.type);
    // file name
    // Execute the ajax request, in this case we have a very simple PHP script
    // that accepts and save the uploaded "video" file
    xhr('upload-video.php', formData, function (fName) {
        console.log("Video succesfully uploaded !");
    });

    // Helper function to send 
    function xhr(url, data, callback) {
        var request = new XMLHttpRequest();
        request.onreadystatechange = function () {
            if (request.readyState == 4 && request.status == 200) {
                callback(location.href + request.responseText);
            }
        };
        request.open('POST', url);
        request.send(data);
    }
});
</script>

Thank you

lwaterslisa commented 4 years ago

I am using Safari on my phone. Please let me know if there is anymore info that you need. I am using this for students to upload videos for student learning and I was supposed to have it live today. Sorry about the urgency. :)

thijstriemstra commented 4 years ago

Sorry about the urgency. :)

Don't worry, I don't care about the urgency :)

Marking as a duplicate of #332