muaz-khan / RecordRTC

RecordRTC is WebRTC JavaScript library for audio/video as well as screen activity recording. It supports Chrome, Firefox, Opera, Android, and Microsoft Edge. Platforms: Linux, Mac and Windows.
https://www.webrtc-experiment.com/RecordRTC/
MIT License
6.56k stars 1.76k forks source link

iOS Safari rotation issue #718

Open duhar opened 3 years ago

duhar commented 3 years ago

Hello, I am facing issue to save video in correct orientation . Currently video record in Safari browser, But after save it rotate in 90 degree left side. https://prnt.sc/xhn5j0 So please suggest me what I need to update to save in correct orientation ?

image

Thanks !

talalz94 commented 3 years ago

@duhar Any update regarding this issue?

duhar commented 3 years ago

Not yet, But I have used some script to rotate image.

vub commented 3 years ago

I face same issue when testing it on iOS 12.4.2.

duhar commented 3 years ago

function captureImageFromWebcam(takeIage, retakeImage, cameraID) { webCamPid = cameraID; webCamTakeM = takeIage; webCamRetakeM = retakeImage;

    Webcam.set({
        width: 300,
        // flip_horiz:true,
        height: 397,
        image_format: 'jpeg',
        jpeg_quality: 90,
        user_callback: function (data_uri) {
            $("." + imgclass).val(data_uri);
            $('#rotatepp').val(0);
            if (bname == 'Chrome' && os == 'iOS' && version > 12.5 &&

version <= 14.2) { $('#rotatepp').val(-90); document.getElementById(cameraID).innerHTML = '<img src="' + data_uri + '" style="transform:rotate(-90deg);"/>'; } else { document.getElementById(cameraID).innerHTML = '<img src="' + data_uri + '"/>'; } } });

    Webcam.attach('#' + cameraID);
}

On Thu, Aug 19, 2021 at 1:09 PM Bùi Minh Vũ @.***> wrote:

@duhar https://github.com/duhar Can you please share the script to rotate this video?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/muaz-khan/RecordRTC/issues/718#issuecomment-901683775, or unsubscribe https://github.com/notifications/unsubscribe-auth/AEDXVSA3HNL3THIWXGWXV2LT5SYL5ANCNFSM4WPPIHBQ . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&utm_campaign=notification-email .

duhar commented 3 years ago

From here we check the device and version and in the hidden field we pass the value and USING php I have rotated and saved.

On Thu, Aug 19, 2021 at 1:50 PM Ghanshyam sharma @.***> wrote:

function captureImageFromWebcam(takeIage, retakeImage, cameraID) { webCamPid = cameraID; webCamTakeM = takeIage; webCamRetakeM = retakeImage;

    Webcam.set({
        width: 300,
        // flip_horiz:true,
        height: 397,
        image_format: 'jpeg',
        jpeg_quality: 90,
        user_callback: function (data_uri) {
            $("." + imgclass).val(data_uri);
            $('#rotatepp').val(0);
            if (bname == 'Chrome' && os == 'iOS' && version > 12.5 &&

version <= 14.2) { $('#rotatepp').val(-90); document.getElementById(cameraID).innerHTML = '<img src="' + data_uri + '" style="transform:rotate(-90deg);"/>'; } else { document.getElementById(cameraID).innerHTML = '<img src="' + data_uri + '"/>'; } } });

    Webcam.attach('#' + cameraID);
}

On Thu, Aug 19, 2021 at 1:09 PM Bùi Minh Vũ @.***> wrote:

@duhar https://github.com/duhar Can you please share the script to rotate this video?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/muaz-khan/RecordRTC/issues/718#issuecomment-901683775, or unsubscribe https://github.com/notifications/unsubscribe-auth/AEDXVSA3HNL3THIWXGWXV2LT5SYL5ANCNFSM4WPPIHBQ . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&utm_campaign=notification-email .