Блог

Я записываю видео через VideoJS. Код выглядит следующим образом:

 // 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";
        }
    });
});``
  

На стороне сервера у меня есть приложение django, которое сохраняет файл как .mp4, создает новую модель видеоблога.

Когда я открываю страницу, видео загружается и может воспроизводиться всеми браузерами. Кроме устройств Safari и iOS, видео не воспроизводится (формат не поддерживается).

Когда я загружаю видео из файла вместо записи с веб-камеры. И файл является действительным видео в формате mp4 (например, отсюда:example_video), файл воспроизводится на каждом устройстве и браузере.

Я думаю, что проблема заключается в кодировании видео в моем js-коде. Та же проблема возникает с .также файл webm. Когда я загружаю webm, конвертирую в mp4 в VLC и загружаю на сервер, видео воспроизводится правильно.

У кого-нибудь есть опыт работы с такой проблемой? Спасибо

Вам необходимо конвертировать видео с веб-камеры на сервер mp4 для воспроизведения в Safari.

При веб-записи с веб-камеры каждый браузер сохраняет в определенном собственном формате (тип mime). Safari сохраняет mp4 / mp3, в то время как другие браузеры обычно сохраняют webm. Изменение расширения файла не помогает. Вам необходимо преобразовать видео.

Вы можете конвертировать webm в mp4 с помощью ffmpeg на стороне сервера.