Using Three.js to create a custom texture from an IP camera source


I've been struggling to display the video from an Axis Camera onto a texture. The camera is providing the video as an image with the source being the camera's IP address.

I initially tried to directly apply the image to the texture, but encountered an error related to Cross-origin resource sharing. After some online research, I came across this resource. I decided to follow the example provided and it worked perfectly with my webcam and the 71st version of Three.js! However, when I attempted to apply the same method with my Axis camera, I received the same error:

Uncaught SecurityError: Failed to execute 'texImage2D' on 'WebGLRenderingContext': Tainted canvases may not be loaded.

Does anyone have any suggestions on how to resolve this issue?

javascriptsecuritycamerathree.jstextures

Answer №1

After much trial and error, I have finally figured it out! It turns out, the problem was indeed related to CROS. Simply setting the crossOrigin image to "anonymous" wasn't the right solution because the CROS issue persisted, especially since the image I wanted to use was from a different IP address.

The solution was actually much simpler - I just needed to add some attributes to Chrome:

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir="D:\chrome"

And voila! It worked like a charm! Just a word of caution, make sure to create a separate shortcut for your work and refrain from using it for regular internet browsing!

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

What could be causing the malfunction of my Superfish menu in Firefox?

I am currently experimenting with the Superfish jQuery plugin to improve a drop-down menu on my website. Unfortunately, in Firefox browser (v. 21.0), the drop-down menu does not open when hovering over it as expected. However, it works fine in Chrome and O ...

javascripthtmlcsssasssuperfish

Encountered an issue: Error message stating that a Handshake cannot be enqueued as another Handshake has already been enqueued

I am currently working on setting up a node.js server to handle POST requests that involve inserting data into two separate MySQL tables. Below is the code snippet for my node.js server: let mysql = require("mysql"); const http = require('h ...

javascriptnode.js

The parseFloat function only considers numbers before the decimal point and disregards

I need my function to properly format a number or string into a decimal number with X amount of digits after the decimal point. The issue I'm facing is that when I pass 3.0004 to my function, it returns 3. After reviewing the documentation, I realized ...

javascripttypescript

What is the method to retrieve the base host in AngularJS?

I need assistance with the following URL: https://192.168.0.10/users/#!/user-profile/20 When I use $location.host, it returns 192.168.0.10 However, I only want to extract https://192.168.0.10 What is the best way to achieve this? ...

javascriptangularjslocation

Removing an item from a table row cannot be completed due to the inability to retrieve the list_body ID necessary for deletion

I have been working on enhancing the delete button function in my table. The id linked to the list_body must be incorporated into the delete function code. I utilized some jquery methods to render the list onto the webpage. //retrieve user list information ...

javascripthtmljqueryhandlebars.js

Evaluation of Google Closure Library's performance

When researching the performance of JavaScript libraries, I come across numerous websites that compare the speed of popular libraries including: jQuery (known for being slow) Prototype (especially sluggish in IE) Dojo (considered the fastest when it come ...

javascriptjqueryperformancedojogoogle-closure-library

Troubleshooting Challenges with JavaScript DOM Manipulation

I am facing an issue with a table where I need the first column to remain fixed when scrolling horizontally. The code snippet below works perfectly for the first column of td's, but fails to work for the tr's. Despite checking the code thoroughly ...

javascripthtmlcss

What is the proper way to utilize a filtered object based on its properties within an Angular controller?

Currently, I am working on developing a stacked graph along with its associated table. To retrieve the necessary JSON data, I am utilizing $http.get() and then assigning it to $scope.dataset. Here's a snippet of the HTML: <input ng-model="_search ...

javascriptangularjsfilterangularjs-interpolate

Alter the design when hovering over a relevant element

How can I change hover styles for specific items in React? Currently, all item styles change at once when hovered. I want to only change the style of the selected div when hovering over the add to cart button. Visit this link import React, { useState } fr ...

javascriptreactjshoverdestructuringonmouseover

React Router v6 is throwing an error stating that within the <Routes> component, all children must be either a <Route> or <React.Fragment>

While the code snippet below may have worked perfectly fine in React Router v5, it's causing an error in React Router v6. Error: [Player] is not a <Route> component. All component children of <Routes> must be a <Route> or <React ...

javascriptreactjsreact-routerreact-router-dom

Error in delete operation due to CORS in Flask API

After successfully developing a rest api in Flask and testing all api endpoints with Postman, I encountered an issue while working on an application in Javascript that consumes the resources of my api. The problem lies in consuming an endpoint that uses t ...

javascriptpythonajaxflaskcors

Expanding div width with jQuery as a percentage

Currently, I am facing a dilemma as I try to devise an equation for expanding the width of a div based on its current height. The Scenario Within this situation, there is a div that features a background image set to "contain." The original background ima ...

javascriptjquerymath

Ways to split JSON information into several pages?

I am currently facing an issue with my HTML code. It works perfectly fine for a small JSON file, displaying the data in an HTML table as expected. However, when I try to load a larger JSON file with around 15,000 rows of data, my page becomes unresponsiv ...

javascriptphpjqueryhtmlcss

Currently, I am on a quest to locate a particular item within an array through the power of node.js

Here is the array I am working with: [ { "_attributes": { "key": "attributes" }, "dt_assoc": { "item": { "_attributes": { "key": "status" }, ...

javascriptnode.jsarraysjson

The Vuex this.$store is not defined in the "mounted" lifecycle hook of the component

Currently in the process of integrating Paypal into my Vue project, following the official documentation and copying the necessary code from here. Successfully rendered the Paypal button, completed the transaction, and obtained an orderID. However, encount ...

javascriptvue.jspaypalvuex

The date-fns parse function will retrieve the value from the previous day

When attempting to parse a date using the date-fns library, I am encountering an issue where the resulting date is one day prior. How can this be resolved in order to obtain the correct result? start = '2021-08-16' const parseStart = parse(start, ...

javascriptnode.jsreactjsexpressdate-fns

Using the Inline If-Else in AngularJS

<div class="alcohol"> <img src="~/img/Interaction/alcohol.png" title="Alcohol" /> <span>{{product.interaction}}</span> </div> If the value of {{product.interaction}} is 'CAUTION', the color of the sp ...

javascriptangularjs

Does a DOM API exist specifically for querying comment nodes within the document?

My document contains a debugging comment that appears as follows: <!--SERVER_TRACE {...}--> Is there a method to search the DOM and access this specific node? I would prefer a vanilla JavaScript solution, without relying on any external libraries. ...

javascripthtmldom

Synchronizing Vuetify Carousel with dynamic route parameters

I'm facing an issue where the v-carousel value does not sync correctly with a route parameter using a computed property. Despite waiting for the mounted hook, the carousel seems to emit its own input and disregard the initial value from the route para ...

javascriptvue.jsvuetify.js

Is it possible to show or hide a DIV based on the text content of another DIV using JavaScript in

I am looking for a way to dynamically hide a DIV based on user roles using only the text inside a title tag as a reference. Here is an example of the HTML structure: <title>admin</title> If the user role is admin, then hide the following DI ...

javascript