metamagikum
metamagikum

Reputation: 1368

Upload video from mobile phone recording with HDR / HDR10+ metadata trough ajax saturation lost

I'm trying to upload a MP4 video stream from Android/IOS with HDR10+ metadata. The video is transferred to the server as a base64 encoded string, then re-decoded and stored on the file system.

Capture from original video (just for clarification. That is a very angry dog but the colors are also lost in other shots ​​:))

Capture from original video

Capture from uploaded video

Capture from uploaded video

This is the first step in my processing chain, but here's the kicker: The saturation of the video is lost. The video looks colorless and washed out like some original classics of laurrel & hardy.

I'll do nothing special here. This is the relevant part of my upload script:

var reader = new FileReader();
reader.readAsDataURL(file);
                
reader.onload = function (e) {
    
    if (file.name != "" && (["video/x-ms-wmv", "video/mp4", "video/avi", "video/3gp", "video/quicktime", "video/ogm", "video/mpg", "video/webm", "video/ogv", "video/mov", "video/asx", "video/mpeg", "video/m4v", "video/wmv"].indexOf(file.type) > -1)) {
            
        var requestData = {};
        requestData.vidName = file.name;
        requestData.vidData = reader.result;

        $.ajax({
            xhr: function() {
                var xhr = new window.XMLHttpRequest();
                xhr.upload.addEventListener("progress", function(evt) {
                    if (evt.lengthComputable) {
                        var percentComplete = Math.round((evt.loaded / evt.total) * 100);
                        $("#progressPercent").text(percentComplete);
                    }
               }, false);
               return xhr;
            },
            type: "POST",
            url: window.SITE_URL+'productdesign/file/uploadUserStream',
            data: requestData,
            async: true,
            success: function(response){
                    ... success handling
                } else {
                    ... error handling
            },
            dataType: 'json'
        });
    }
}

On serverside i'll recostruct the stream and save as file:

$fileName = $this->getRequest()->getPost('vidName');
$data = $this->getRequest()->getPost('vidData');
$split = explode( ',', $data );
$blob = base64_decode($split[1],true);
try {
    $success = file_put_contents($file, $blob);
    further processing...

The topic of lost saturation in HDR processing is discussed very often, but I have not found a solution to prepare the information in the HTML upload. For post-processing the tonemap must probably be used in the follow-up ffmpeg conversion.

Upvotes: 0

Views: 45

Answers (0)

Related Questions