AgoraIO / Advanced-Video

MIT License
261 stars 336 forks source link

Video orientation is incorrect in firefox. #209

Closed khuongdv93 closed 3 years ago

khuongdv93 commented 4 years ago
Nitish-web-nik commented 4 years ago

The bug was mainly due to the code written in the Javascript module Agora-Screen -Sharing-Webpack-Web. of .eslintrc.js. Screen orientation is something slightly different than device orientation. Even if a device doesn't have the capacity to detect its own orientation, a screen always has one. And if a device is able to know its orientation, it's good to have the ability to control the screen orientation in order to preserve or adapt the interface of a web application. There is no issue for either Firefox or Chrome. There are several ways to handle screen orientation, both with CSS and JavaScript.

For a Firefox OS and Firefox Android, specific way to lock orientation, you can set the orientation field in app's your manifest file, for example:

"orientation": "portrait"

The orientationchange event is triggered each time the device change the orientation of the screen and the orientation itself can be read with the Screen.orientation property.

screen.addEventListener("orientationchange", function () { console.log("The orientation of the screen is: " + screen.orientation); }); If you were dealing with a CSS and get set type of issue then you will definitely have to use the Media queries which helps a-lot in these things like display-mode, orientations etc.

The orientation media query actually applies based on the orientation of the browser window (or iframe) not the orientation of the device. So you can simply apply the above rules your bug will surely get fixed.

For a simply CSS you can think this as the following given code for better orientation:- / First let's define some common styles /

html, body { width : 100%; height: 100%; }

body { border: 1px solid black;

-moz-box-sizing: border-box; box-sizing: border-box; }

p { font : 1em sans-serif; margin : 0; padding: .5em; }

ul { list-style: none;

font : 1em monospace; margin : 0; padding: .5em;

-moz-box-sizing: border-box; box-sizing: border-box;

background: black; }

li { display: inline-block; margin : 0; padding: 0.5em; background: white; }

shellGrace commented 4 years ago
  • I have build app one to one video call : Web (Vuejs) - App (IOS), but i have issue:

  • In Chrome when remote user (IOS) turn on/off video, video orientation remote user in web app was rotated, after 1sec, video back to normal.

  • In Firefox browser the video orientation is incorrect on for remote video, it rotated 180 deg.

  • It is a bug Chrome and Firefox ? I was tested with facebook message it worked fine.

I think the Nitish-Web-nik solution is feasible, and you can try to solve your problem according to his solution.

stale[bot] commented 3 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

apiphoomchu commented 3 years ago

I think the nitish-web-nik solution can solve your problem

plutoless commented 3 years ago

closed for no more activities