collab-project / videojs-record

video.js plugin for recording audio/video/image files
https://collab-project.github.io/videojs-record
MIT License
1.39k stars 315 forks source link

Video data corrupted on some devices when screen is not rotated. #630

Open fsuk opened 2 years ago

fsuk commented 2 years ago

Description

Using a web cam with my PC or a tablet I am able to succesfully record and store data as a file. When using my phone (Pixel 4a) the video streams to the player correclty whilst recording but once saved to a file and played the video is garbled with lines and green in the bottom quaters.

This issue only ocurrs when the phone is in portait mode not horizontal. My guess is the data is being transposed into the frames with the wrong orientation.

image

Steps to reproduce

Use a Pixel 4a (possibly other devices) to record using the example here: https://collab-project.github.io/videojs-record/demo/audio-video.html

Results

Expected

Video as recorded.

Actual

Video appears garbled with green filling bottom part of the video. MOBTAQ38AV8B877XT1ONTFFEMB2H7REW48Y0ZRPZO75SJ2OENZ.zip

Error output

No errors out put to console.

Additional Information

Please include any additional information necessary here. Including the following:

versions

videojs

videojs 7.15.4 videojs-record 4.5.0 recordrtc 5.62

browsers

Chome (Android)

OSes

Android

player.recordedData value onfinishRecord:

recordedData: Blob lastModified: 1639146423777 lastModifiedDate: Fri Dec 10 2021 14:27:03 GMT+0000 (Greenwich Mean Time) {} name: "1639146423777.webm" size: 323618 type: "video/webm;codecs=vp8"

fsuk commented 2 years ago

Does not appear to be a videojs-record issue but an issue with RecordRTC. Reproduced with this example: https://www.webrtc-experiment.com/RecordRTC/

Will update this issue if I find anything with RecordRTC