We are offering our members free Video chat.
The Video chat windows display fine in case of PC to PC calls across all Web browsers.
But when one of the callers is on Android based phones, then their remote Video to the other person rather than displaying normally as on their PC displays in huge cut off size as if the CSS for Mobile Web is being displayed to the person on the PC!
How can we fix this?
Or put another way: how can we ensure that Video stream from Mobile Web and PC Web to other party always plays within the CSS designation of local user and does not jump to the CSS designation of remote user?
Thanks,
FYI, if you want to actually see the issue you need to sign-up for a free anoox account and then initiate a Video call with someone on PC to see all fine and then with someone on Mobile Web (Android)
And Video chat is not working on iPhone Web browsers
I would love to be able to post this code to Codepen but that is not possible in this case since the related code is so massive and has many aspects as far as generating the experience goes.
So the experience is having Video chat via your PC with someone who is on another PC which works just fine and on a Mobile Web where the Video window of the remote person is too large as if it is the CSS for the Mobile Web user displaying to the person who is on a PC!
So let me give you the related CSS Video codes:
PC (full screen) CSS:
/* To where Video Streams of Local user and Remote users are appended to */
#video-grid {
position: relative;
margin-right: 20%;
height: 98%;
}
/* CSS for Video DIV of local user */
#owner_video, #owner_anim {
position: absolute;
right: 2%;
top: 40px;
border: 1px solid #d3d3d3;
border-radius: 5px;
width: 30%;
min-height: 30%;
height: auto;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
resize: both;
overflow: auto;
padding: 5px;
background: white;
}
/* CSS for Video DIV of Remote user */
#visio_video, #vis_anim {
position: absolute;
left: 2%;
top: 40px;
/* bottom: 10px; */
border: 1px solid #d3d3d3;
border-radius: 5px;
width: 50%;
min-height: 50%;
height: auto;
overflow: hidden;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
padding: 5px;
background: white;
}
/* for Video */
video {
width: 100%;
height: 100%;
object-fit: cover;
}
@media only screen and (min-device-width: 300px) and (max-device-width: 480px) {
#video-grid {
margin-right: 0;
height: 100%;
}
#owner_video, #owner_anim {
width: 5%;
right: 5%;
top: 50%;
z-index: 500;
}
#visio_video, #vis_anim {
left: 1%;
top: 1%;
width: 95%;
height: auto;
}
}
That would sound like a programming issue and not html or css. I don’t even understand how someone else’s device can affect the display on your own device. It must be that the programming for your chat is mistakenly applying a mobile class or similar on an incoming video call from a mobile. Unfortunately I have no knowledge of these matters so can’t offer any advice apart from the following observation.
The following is unlikely to have anything to do with your problem but the media query you are using is deprecated. That refers to the physical dimensions of the device and not the available pixel width for displaying content. It probably does not obey orientation changes either as the device’s actual width doesn’t change just because you turn it around. This is one of the reasons it was deprecated so just use min-width or max-width and not min-device-width or max-device-width.
You don’t want the min-width version anyway as the 300px limit will miss the galaxy fold which is 280px. Just use the max-width version and cater for everything smaller.
As I said this is likely nothing to do with your problem so can’t really help with this.
Ok, 1st as per your recommendation we switched the Media query to be:
@media only screen and (max-width: 480px)
Now as to the main issue, exactly I too:
" don’t understand how someone else’s device can affect the display on your own device."
But that is what is happening!
I think is happening due to a quirk of CSS or Video!
Not sure, which is I am hoping someone here has an answer or hack to this quirk.
So again to summarize:
1- Remote Video stream displays in Big window to local user on PC - OK
2- Local video displays in tiny window on Mobile Web and Remote Video on a larger Window - OK
3- Remote Video displays (wrong) in larger Window to Local user on a PC when Remote is on Mobile Web!
I tried that but as I have a Mac an iphone I was unable to test because the video page does not work on the Mac at all as it is blocked by an error message. Also I only have an iphone and notice you say iphones are not supported.
The only thing I can suggest is that you open the developer tools on the broken page and see what css is being applied and where it is coming from. You should be able to work out where the element is getting its styling from which may help in diagnosing the problem. I’m guessing that a script is dynamically changing something on the page that is upsetting the css.
1st, thanks for thoughtful update.
But to be exact it is not our Video chat that does not work on Apple Mac or iOs it is Apple that has failed to implement WebRTC getUserMedia in their device browsers, amazingly
As you can see here:
Now as to your comment, of course we have looked at that possible problem again and again and tested it many ways, but No script is affecting the Remote Video on Local PC at all.
I can assure you of that. It is some bug/quirk of CSS in regard to Video that is doing it.
And again it only happens when Remote Video is coming from Mobile Web Android!
Hopefully from these screen shots you can see what the problem is as result of which Video of caller on Mobile Web is larger that it should be on Pc side and bottom of their Video is cut off.
