VideoTexture: Doesn't handle file rotation.

[MarcRibguth]

Hallo,
It seems that the video from some mobile devices are not rotating correctly. I used the same video element for the right view and the left plain and the rotation is not the same. Other videos are working.

video.zip

Three.js version

• r91
• r89

Browser

• All of them
• Chrome
• Firefox
• Internet Explorer

OS

• Linux

[Mugen87]

Um, it's not clear to me what's your issue. Can you please provide a live example that demonstrates the problem?

[MarcRibguth]

I can try to do thet, but I'm not shoure when I will have the time for that.
The probelm is, that I use the loaded video data to create the geometry of the mesh on the left side. That part is working fine. But when I load the video on to the plain, the video has not the right rotation like in the video element on the right side.

function loadedmetadataFunk(event) {

    if (event && event.path.length > 0 && event.path[0]) {

          mesh.geometry.dispose();
          mesh.geometry = new THREE.PlaneGeometry(event.path[0].videoWidth / 50, 
          event.path[0].videoHeight / 50);

    }

    showProgressSpinnerInEditor(false);
}

let vid = document.createElement("Video")
vid.src = url;
vid.load();
vid.addEventListener('loadedmetadata', loadedmetadataFunk);

let texture = new THREE.VideoTexture(vid);
texture.generateMipmaps = false;
texture.magFilter = THREE.LinearFilter;
texture.minFilter = THREE.LinearFilter;
mesh.material = new THREE.MeshBasicMaterial({ map: texture });

I will try to create an example in the next days.

[Mugen87]

Please try your video with this live demo and test if the orientation is correct.

[MarcRibguth]

I checked it and the rotation is wrong. I also noticed, that Windows Media-Player is also not rotating the file correctly. In VLC-Player is the rotation right.

https://jsfiddle.net/wt77a5ug/#&togetherjs=KFlkmPq6A8

[Mugen87]

I don't think that's a three.js related issue. Or do you have a suggestion what the library should make different?

[MarcRibguth]

I would expect that the texture has the same rotation like the video element I putted in. Or do you know a way to detract the rotation?

[Mugen87]

Or do you know a way to detract the rotation?

No. And i don't think that's the task of a 3D library.

You should first investigate why Windows Media-Player shows the same behavior.

[calrk]

The reason for this is most likely the video rotation metadata that has been saved in the video when filming on a mobile device. The mobile will record the video with whatever its default rotation is, then add in the rotation metadata for video players to use when playing back. The reason I believe is to reduce any video processing needed during recording.

Modern browsers will use this to rotate the videos in playback when using

I think the solution is to transcode the video without the rotation metadata.

[MarcRibguth]

Thanks for the replies, then I have to close this issue and try to convert the files on the server.

[Mugen87]

@calrk Thanks for your explanation!

[mrdoob]

@kenrussell what do you think about this? the browser applies the rotation specified in the video metadata when displaying it with <video> but the rotation gets lost when using it as a texture.

[MarcRibguth]

I will reopen this and maybe you could make a feature out of this.

[Mugen87]

This rotation metadata is not available to Javascript, so can't be used by ThreeJS to rotate the video.

That's the reason why three.js can't do anything here. So reopening this issue makes no sense to me.

[calrk]

Yes I agree with @Mugen87 . Given my research into the problem I don't believe the solution can be implemented in three.js without updates to the browser video spec.

[MarcRibguth]

Maybe the video texture could load the video as file resource and read the file rotation direct?

[mrdoob]

I think the browser is going to handle this (at least chrome).