Ensure that the WebRTC video stream content is centered when displaying a tall video on a wide screen

Currently, I am encountering an issue while making a webrtc video call between a mobile device in portrait mode and a laptop. The streams from the mobile and the laptop have different aspect ratios, causing challenges when trying to display the video fullscreen.

To address this problem, I implemented the following CSS:

position:fixed;
left:0;
top:0;
right:0;
bottom:0;
object-fit:contain;
object-position:50% 50%;
minHeight:100%;
minWidth:100%;
height:100%;
width:100%;

While this CSS makes the video fullscreen, it only displays the top portion of the stream with the remaining parts cut off. My question is, Is there a way through JavaScript or additional CSS to adjust the video display so that it shows the center portion of the stream and cuts out the edges? The desired effect can be seen in the reference app Apprtc.

Thank you.

javascripthtmlcsshtml5-videowebrtc

Answer №1

If you want to center your video, there's a simple solution. Apply the CSS property object-fit: cover; to the container where the video is displayed. This will automatically adjust and center the video for you, supported by most modern browsers.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Different Option for Ajax/Json Data Instead of Using Multiple Jquery Append Operations

I am working on a complex data-driven application that heavily relies on Ajax and Javascript. As the amount of data returned for certain value selections increases, the application is starting to struggle. This is more of a brainstorming session than a q ...

javascriptjqueryajaxjson

Stop auto-refreshing when a popup is active

As I work on a GSP (Grails) page, there are links that trigger a popup using thickbox (JQuery). Recently, I implemented a simple JavaScript to refresh the page every 5 minutes. However, I encountered an issue whereby the popup closes whenever the page is ...

javascriptjquerygrailsgsp

I am interested in delivering a blended, divided response containing JSON and a string using Express

I am currently in the process of integrating ChatGPT into my Node/Express project and I have a specific requirement. I would like to initially send some metadata in JSON format to the client before streaming the response from ChatGPT as it comes in. Every ...

javascriptnode.jsjsonexpresschunking

WebView on Android still showing highlighted text even after selection has been cleared

When using my web app on an android WebView, I've noticed that whenever I click on something or navigate somewhere, a blue highlight appears on the container div. It sometimes disappears quickly, but other times it remains until clicking elsewhere. I ...

javascriptandroidhtmlcsswebview

What could be causing the issue with the unexpected token in the API Ajax request?

I have a document that contains the following content: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8> <title>Document</title> </head> <body> <script src="http://ajax.aspnetcdn.com/ ...

javascriptajaxapitoken

Trouble with smooth shading on OBJ file when loaded into Three.js environment

It's interesting how the OBJ appears smooth in my 3D modeling software but looks somewhat quirky and triangular in the Three.js scene. I've applied MeshLambertMaterial to it, which supposedly uses THREE.SmoothShading as its default shading. Despi ...

javascriptthree.js

The event to close the HTTP connection in the Node server always triggers

I want to set up a close event that triggers before the server shuts down. To achieve this, I have implemented the following code: var express = require('express'); var app = express(); var http = require('http').Server(app); var list ...

javascriptnode.js

Stop flex child from shrinking in size

I have a form row with two inputs. There is a requirement to show ⚠️ (warning emoji) next to the second input in the row, based on the input number. However, because of how flexbox behaves, the input size gets reduced... How can I maintain the input s ...

htmlcssreactjsbootstrap-4flexbox

How can we determine when a row has been modified while using a list of floating-left LIs?

Check out this list of products for an example: I have a function that is triggered on document ready which goes through each item in the list and adjusts the height of a span wrapping the image to ensure uniform spacing. My question is, is it possible f ...

cssjavascriptjquery

When I navigate to the URL using a router-link, the v-for in my Vue.js component renders properly. However, if I manually type the URL or refresh the page, the v-for fails to render

Whenever I navigate to a specific URL that showcases icons of characters from a game, everything functions as expected and the icons are displayed. However, upon refreshing the page, the icons vanish. If I manually enter www.example.com/champions, the ico ...

javascriptvue.js

Using XPath and Selenium in Java to extract information from HTML tables

I need help organizing data without HTML tags. The data I have looks like this: <table class="SpecTable"> <col width="40%" /> <col width="60%" /> <tr> <td class="LightRowHead">Optical Zoom:</td> ...

javahtmlxpathseleniumwebdriver

Tips for implementing a dynamic path in the path attribute of the single-spa-router in a single-spa react application

Here is the current code snippet: microfrontend-layout.html <single-spa-router base="/"> <main> <route default> <h1>404 route not defined</h1> </route> </main> </single-spa-router> ...

htmlreactjssingle-spabase-path

When using ng-checked in Angular, the DOM may not display the element.input.checked property even when the

I am having issues with using ng-checked to automatically check a checkbox when a modal loads under certain conditions. Despite the item being checked, the condition if (item.checked) returns false. Below is the directive I am working with. app.directive ...

javascriptangularjsforms

Jest is raising a TypeError: Unable to access attributes of an object that is undefined (referencing 'getVideoTracks')

When running my unit tests with Jest, I encountered an error: TypeError: Cannot read properties of undefined (reading 'getVideoTracks') Does anyone have any suggestions on how to properly test the following line using Jest? [videoTrack] = (await ...

javascripttypescriptunit-testingjestjsts-jest

Struggling to display my JSON file in an HTML element with AJAX

Having some trouble here. I can successfully print my JSON file content to the console using console.log, but now I'm trying to display it on the page. I want to display the 'Information' section from the JSON file using innerHTML like this ...

javascriptjsonajaxdom

Ways to take an item out of your shopping cart

Do you have any ideas on how to handle cart redirection in JavaScript? My specific request involves a cart with a function that removes products. What approach should I take to redirect to the main page if the cart becomes empty? Here is the delete produc ...

javascripthtmljsonshopping-cart

How can a button be linked directly to a particular list item?

I currently have a HTML tag within my React application that looks something like this: <ul> <li> Item 1 <button> Delete </button> </li> <li> Item 2 <button> ...

javascripthtmlreactjs

Utilizing Firebase's real-time database for executing specific conditional queries

I am currently utilizing Express along with the Firebase Realtime Database Admin SDK to handle my database operations. My goal is to retrieve all tickets with a status of pending or open that belong to the logged-in user. However, I am facing difficulty in ...

javascriptnode.jsfirebaseexpressfirebase-realtime-database

The <iframe> generated by Create-React-App often hinders my ability to interact with or modify the application directly, requiring me to remove it using the browser's element editor

After conducting a global installation of create-react-app, I encountered an issue where instead of editing the rendered content directly in the browser while working on a project, there is a mysterious container created around my app. Upon closer examina ...

javascripthtmlreactjsiframecreate-react-app

Trouble with top attribute functionality within animate function

Why does the top attribute in the animate function of JQuery not seem to work, while the opacity attribute functions correctly in the code snippet below? $(function() { $(window).on('scroll', function() { ...

javascriptjqueryhtmlcss