HTML5 Video Frozen in Place on Screen's Edge

I am encountering a problem specifically on Webkit, particularly in web view on iOS. When I tested it on desktop Chrome, the issue did not appear.

Here is the Portrait image and Here is the Landscape image

The video seems to be fixed in one position regardless of where I scroll. It's impossible for me to see the entire video or scroll within the video area to view the complete feed.

I suspect this could be due to a compatibility issue with Webkit and my lack of CSS proficiency. My setup includes the latest Cordova, WKWebView, P5.js, and a Cordova iOS RTC plugin for streaming video into P5. Any assistance on this matter would be greatly appreciated!

      p.createCanvas(640, 480);
      video = p.createCapture(p.VIDEO);
      console.log("video", video);
      video.size(640, 480);
      video.attribute("autoplay", "autoplay");
      video.attribute("playsinline", "playsinline");
      video.attribute("muted", "muted");
      p.image(video, 0, 0, 640, 480);
javascriptcsscordovawkwebviewp5.js

Answer №1

It seems like the problem you're experiencing is related to p.createCanvas(640, 480). When utilizing p5 to create a video element, it appears that it utilizes the HTML video element instead of the canvas element. This results in the canvas taking up space, pushing the video element below it.

To resolve this issue, try implementing the following solution and let me know if it resolves your problem:

p.createCanvas(0, 0)

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

Limit the usage of map() to solely operate on a collection of headers stored within an array generated from a specified range

I need to limit the map functionality to only include columns within the specified range that are also present in the headers list, which is a subset of the values in v[0]. This ensures that only values from columns listed in the headers array will be mo ...

javascriptgoogle-apps-scriptgoogle-sheetsmap-function

What is the best way to include CSS in a CodeIgniter project?

I am facing an issue with loading a CSS file in Codeigniter. It seems like there might be something wrong with my code. Can someone help me understand how to properly load a CSS file in Codeigniter and possibly identify any errors in my current code? < ...

phphtmlcsscodeigniter

Uploading files with the help of Formik and the Material-UI stepper component

When attempting to upload a file, the entire component refreshes each time. The process involves 3 steps: the first step captures the user's name, the second step collects their address, and the third step allows them to upload a profile picture. Howe ...

javascriptreactjsfile-uploadmaterial-uiformik

What could be causing the missing key value pairs in my JSON parsing process?

I have set up a Rails backend to serve JSON data, such as the example below from 2.json: {"id":2,"name":"Magic","location":"Cyberjaya","surprise_type":"Great","instructions":"test","status":"awesome","pricing_level":3,"longitude":"2.90873","latitude":"101 ...

javascriptruby-on-railsangularjsjson

UI-Router is malfunctioning, causing ui-sref to fail in generating the URL

I'm currently working on a project that involves Angular, Express, and UI-router for managing routes. While I've properly configured my $states and included the necessary Angular and UI-router libraries in my HTML file, I am facing an issue wher ...

javascriptangularjsnode.jsexpressangular-ui-router

Tips for improving the scrolling function in Java with Selenium for optimal performance

I'm currently working on a project using Java in MAVEN. My task involves retrieving a URL, scrolling down the page, and extracting all the links to other items on that website. So far, I have been able to achieve this dynamically using Selenium, but ...

javajavascriptseleniumweb-crawlerjsoup

`Why won't Puppeteer let me pass a variable into a page URL parameter?`

Encountered an error message: Error: Protocol error (Page.navigate): Invalid parameters Failed to deserialize params.url - BINDINGS: mandatory field missing at position 49... The issue arises when trying to pass a variable into the page URL parameter as s ...

javascriptnode.jsexpresspuppeteer

Using JSON parsing to extract an integer as the key in JavaScript

I've been searching for almost 2 hours now, but I can't seem to find anyone using an integer as the key in their json object. The structure of my json object is as follows: {"342227492064425": {"added":"2020-10-04T23: ...

javascripthtmlarraysjson

Building Your Own Array Object in JavaScript

Yes, it may seem crazy at first glance, but let me clarify things a bit. When using Jquery, for instance $('div'), it returns an Array Collection similar to this: [div#container, div#header, div#logo]. The interesting part is that primitive Arra ...

javascriptjquery

Can you determine the sequence in which these code statements are placed on the call stack?

I am a beginner in the world of Javascript and currently seeking to grasp a better understanding of how the JS execution engine operates. I am aware that any asynchronous code statement is pushed onto the call stack and then promptly removed, allowing it t ...

javascriptpromisees6-promisejavascript-engine

Learn the process of updating an Xero invoice seamlessly with the xero-Node integration

After successfully integrating Xero with my app for accounting and billing purposes, I am now looking to update a previous invoice that was created in the past on Xero. Is there a solution available for this? Any suggestions would be greatly appreciated. ...

javascriptnode.jsexpressxero-api

Error message: ParseError: Received an unexpected character '<' while running tests using AVA

Initially encountering an issue within the project built on nuxt, I attempted to resolve it by creating a new project using vue-cli and re-installing AVA via npm. However, this did not have any effect on the problem at hand. Upon researching, I came across ...

javascriptvue.jsnuxt.jsava

The Vue JS Router is prominently displayed in the center of the webpage

I have been delving into Vue JS and working on constructing an app. I've implemented vue router, however, it seems to be causing the content within the routed component to display with excessive margins/padding. I've attempted various solutions s ...

javascriptvue.jsvuejs2

What is the best way to modify the background color of a whole div when hovering over it

Recently, I encountered a challenge while working on my website. I want to set up a link inside a div that changes color when hovered over. However, the desired effect is not quite coming out as expected. Before hovering, I aim to have a border around the ...

htmlcss

Class for making elements draggable using jQuery UI

Is it possible to use jQueryui's draggable/droppable combo and add a class to the dragged item when dropped into a specific container, rather than adding a class to the container itself? I've tried adding a class to the container, but that is not ...

javascriptjquerycssjquery-ui

The background image fails to display properly on the server in Next.js

Hello, I'm currently using NextJs and I have a challenge. I want to set a background image on the body element that is rendered server-side. Below you'll find my code snippets: First, here is my App.js: import BodyStyle from '@components/Bo ...

javascriptcssreactjsnext.js

Are you harnessing the power of Ant Design's carousel next and previous pane methods with Typescript?

Currently, I have integrated Ant Design into my application as the design framework. One of the components it offers is the Carousel, which provides two methods for switching panes within the carousel. If you are interested in utilizing this feature using ...

javascriptreactjstypescriptantd

JavaScript code must be tailored to reference a JS file based on the specific environment, whether it be Production, Development, or staging

I need to determine which .js file to refer based on the URL of Prod, Dev, and QA environments. For Production URLs (domain.com and www.domain.com), I should refer to prod.js file. For Dev and QA URLs (dev.domain.com and staging.com), I should refer to s ...

javascriptjqueryif-statementwindow.location

I can only use innerHTML once in my React application

I am attempting to clear my container div when the user clicks the search button in order to remove all existing search results. However, I am encountering an issue where using innerHTML to clear the container div only works the first time. If a second sea ...

javascripthtmlreactjsreact-nativereact-redux

backbone.js router failing to recognize URL fragments

I have set up a basic router in my code and initialized it. Issue: I encountered an unexpected behavior when visiting the URL http://localhost/backbone1/#photos/5. Despite expecting an output from console.log() in the JavaScript console, nothing appears. ...

javascriptjquerybackbone.js