CODEWITHSUNDEEP
javascriptiossafarimp4videojs-record
MarekJanda
MarekJanda

Reputation: 31

Webcam Recordings from in .mp4 or .webm are not play on MacOS Safari browser and on iOS devices

I record a video through VideoJS. The code looks like this:

// Video recording via webcam
var videoMaxLengthInSeconds = 180;

// Inialize the video player
let videoBlob;
var player = videojs("myVideo", {
    controls: true,
    width: 720,
    height: 480,
    fluid: false,
    plugins: {
        record: {
            audio: true,
            video: true,
            maxLength: videoMaxLengthInSeconds,
            debug: true,
            videoMimeType: "video/mp4"
        }
    }
}, function() {
    // print version information at startup
    videojs.log(
        'Using video.js', videojs.VERSION,
        'with videojs-record', videojs.getPluginVersion('record'),
        'and recordrtc', RecordRTC.version
    );
});

// error handling for getUserMedia
player.on('deviceError', function() {
    console.log('device error:', player.deviceErrorCode);
});

// Handle error events of the video player
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! Do whatever you need to');
});

// user completed recording and stream is available
// Upload the Blob to your server or download it locally !
let recording;
let recordingData;
player.on('finishRecord', function() {
    // the blob object contains the recorded data that
    // can be downloaded by the user, stored on server etc.
    recordingData = player.recordedData;
    videoBlob = player.recordedData.video;
    //let myblob = new Blob(player.recordedData, { type: "video/webm" });
    let objectURL = window.URL.createObjectURL(player.recordedData)
    let downloadButton = document.getElementById('downloadButton');
    downloadButton.href = objectURL;
    downloadButton.download = "Vlog.webm";
    //recording = new File(myBlob, 'vlog.webm')
    console.log(recording)
    console.log('finished recording: ', videoBlob);
});

// Sending recorder video to server
$('#postButton').click(function() {
    // Get form data
    form = document.querySelectorAll('#form');
    let formData = new FormData(form[0]);

    let disabled = document.getElementById("commentsDisable").checked
    console.log("Comments Enabled: " + disabled)
    formData.append('commentsDisabled', disabled);

    let selection = document.getElementById('categorySelect');
    let selected = selection.options[selection.selectedIndex].value;

    // Append selected category
    formData.append('category', selected)

    //Apend YouTube embed link
    if (ytUrl) {
        formData.append('ytlink', ytUrl)
    }

    // Append recordedBlob to form data as file
    if (recordingData) {
        console.log('Recording detected: ' + recordingData)
        formData.append('videoFile', recordingData, recordingData.name);
    }

    //Append video from local upload
    if (tempFile) {
        formData.append('videoFile', tempFile);
    }

    // Send POST request via AJAX to server
    $.ajax({
        type: "POST",
        url: "/make_vlog/",
        processData: false,
        contentType: false,
        data: formData,
        success: function(response) {
            alert(response);
            //location.href = "/vlogs";
        }
    });
});``

On the server side I have a django app which stores the file as .mp4 creates a new Vlog model.

When I open the page the video is loaded and can be played by all browsers. Except Safari and iOS devices don't play the video (Format not supported).

When I upload video from file instead of webcam recording. And the file is a valid mp4 video (for example from here:example_video) the file is played on every device and browser.

I think the problem is the video encoding in my js code. The same problem occurs with .webm file as well. When I download the webm, convert into mp4 in VLC and upload on the server the video is played correctly.

Does anyone have experience with such problem? Thanks

Upvotes: 3

Views: 2167

Answers (1)

TopReseller
TopReseller

Reputation: 666

You need to convert the webm videos to mp4 server site for playback in Safari.

On web based webcam recording each browser saves in specific native format (mime type). Safari saves mp4/mp3 while other browsers usually save webm. Changing the file extension does not help. You need to convert the video.

You can convert the webm to mp4 with ffmpeg, server side.

Upvotes: 1

Related Questions