Error message: Incorrect XMP data detected within PhotoSphereViewer" and "WebGL issue: INVALID_VALUE error when attempting to load faulty image data

I'm currently utilizing Photo Sphere Viewer to showcase a panoramic image similar to how Facebook does it, but I am encountering some difficulties.

Below is the code snippet:

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3141435e5c5842541c415e5d4857585d5d71091f001f02">[email protected]</a>/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="67120211020913275549574957">[email protected]</a>/browser.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="70041802151530405e4141455e40">[email protected]</a>/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/photo-sphere-viewer@4/dist/photo-sphere-viewer.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photo-sphere-viewer@4/dist/photo-sphere-viewer.css">
<div id="photosphere"></div>
<script>
new PhotoSphereViewer.Viewer({
  panorama: 'https://terrafrost.sfo2.digitaloceanspaces.com/20200618_131549.jpg',
  container: 'photosphere',
  caption: 'Parc national du Mercantour <b>&copy; Damien Sorel</b>',
  loadingImg: 'https://terrafrost.sfo2.cdn.digitaloceanspaces.com/photosphere-logo.gif',
  defaultLat: 0.3,
  touchmoveTwoFingers: true,
  mousewheelCtrlKey: true,
});
</script>

Upon executing this code, two errors appear in the JS console:

  • PhotoSphereViewer: invalid XMP data (from psv.js:11)
  • WebGL: INVALID_VALUE: texImage2D: bad image data (from three.min.js:130)

Any insights on where I might be going wrong or what I should do differently?

Appreciate any assistance!

javascriptthree.js360-panoramaphotospherephotosphereviewer

Answer №1

Unfortunately, I am unable to provide a complete answer as your panorama file is not public. However, the error message indicates that there are inconsistencies in the embedded XMP data. To resolve this issue, you may consider disabling XMP parsing using the useXmpData: false option.

For more information on XMP data, please refer to the following link:

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

Issue with NullInjectorError: Failure to provide a custom component - Attempting to add to providers without success

I keep encountering errors during my test attempts... Despite looking into similar issues, I am still facing problems even after adding my custom LoginComponent to app.module.ts providers. It is already included in the imports section. app.module.ts @Ng ...

javascriptangulartypescript

What is the best way to distinguish if users are accessing my Facebook app through an iframe or by directly entering the

If my Twitter app url is http://tw.domain.com/ and the app url is http://apps.twitter.com/demoapp/ I need to ensure that users cannot access the application url directly, they must view it within an iframe on Twitter. What method can I use to detect & ...

phpjavascriptjqueryfacebookhttp-redirect

Update the month in the second date picker to align with the selection made in the first date picker within the Angular framework

Is it possible to dynamically change the month of the second datepicker based on the selection made in the first date picker? Currently, it is displaying the current date by default. For example: If I select 15-10-2104 from the first date picker, the secon ...

javascriptangularjsdatedatepickerbootstrap-datepicker

I'm having trouble getting Socket.io to function properly with my Node/Express application

Using openshift with express, I have been experiencing difficulties configuring socket.io. No matter what adjustments I make, it seems to disrupt my application. What could be the issue? Interestingly, when I disable the sections related to socket.io, the ...

javascriptnode.jsexpresssocket.ioopenshift

Is there a way to temporarily hide content hidden with ng-hide from being displayed on the page?

Recently delving into the world of Angular, I've come across an issue where an element appears briefly on the page before disappearing. My goal is to prevent this behavior, but I am unsure how to go about it. The specific scenario involves a radio bu ...

javascriptangularjs

Establish the predefined date for the air-datepicker

I am currently utilizing the air-datepicker inline feature. My objective is to establish the starting date for it. Below is the script detailing my attempt: export function load_datepickers_inline():void { const search_legs_0_datepicker = $("#search_leg ...

javascriptjquerytypescriptdatepicker

Personalize your message in a JavaScript alert using Bootstrap notifications

On numerous websites, a new visitor landing on the page is greeted with an alert notification that pops up in either the bottom right or left corner. The code below functions perfectly fine, except for my unsuccessful attempts to change the message text w ...

javascriptjquerynotificationsalert

The parameters used in the json.parse function in javascript may be difficult to interpret

Currently, I am examining a JavaScript file on this website. It contains the following code: let source = fs.readFileSync("contracts.json"); let contracts = JSON.parse(source)["contracts"]; I'm curious about what exactly the JSON.parse function is d ...

javascriptjson

Chargebee encountered an error of type TypeError when attempting to create a subscription. The action

Every time I attempt to send a request with Chargebee, an error appears. Error: Failed to create subscription async createSubscriptionForTeamMember(customerId, options) { try { // Proceed with subscription creation using Chargebee API ...

javascriptnode.jschargebee

Retrieve Image/png using an Extjs ajax request

Hello, I am currently working on an application that is designed to showcase dynamically generated images stored on a server. The process involves fetching the image, typically in PNG format, using an Ajax Request. The data retrieved appears as follows: ...

javascriptajaximageextjs

Issue with commenting system: Ajax/PHP integration malfunctioning

I am facing an issue with my commenting system. The comments are getting inserted into the database, but they are not showing up immediately after clicking the submit button. I would like them to appear with a sliding effect right after submission. I susp ...

javascriptphpajaxpdocomments

Is WebStorm with Node Supervisor being utilized to eliminate the need for restarting after every code modification?

Currently, I am utilizing WebStorm as my node IDE and have found it to be quite impressive. However, one issue I am facing is figuring out how to incorporate node supervisor into my workflow within WebStorm. Has anyone successfully managed to set this up ...

javascriptnode.jsintellij-ideawebstormnode-supervisor

Having trouble with a Three.JS/WebGL 3D object not loading in Firefox?

After creating a 3D Object using Three.js examples, I noticed that it works perfectly in Chrome and IE 11, but for some reason, it's not loading on Firefox. I am currently using the latest version of Firefox (FF 27.0). When I tested the code on Firef ...

javascriptfirefoxpluginsfirefox-addonthree.js

The functionality of the JavaScript animated placeholder seems to be malfunctioning

I am currently working on a code that updates the placeholder text every 2 seconds. The idea is to have it type out the letters one by one, and then erase them in the same manner. Unfortunately, the code is not functioning as expected. As a newcomer to J ...

javascriptjqueryarrays

retrieve the information from a specific field within the store and store it in an array

Perhaps this is a question that pertains to using pure JavaScript, but for some reason I can't seem to figure it out. I am currently working on extjs4.2 using Sencha Architect and have received a JSON response from the server in the following format: ...

javascriptjsonextjsextjs4

Efficiently reducing the size of a CSS selector string with javascript

Is there a library that already performs this function? I've only been able to find online tools. The reason I am interested in accomplishing this task using JavaScript is because I need to ensure that the strings a > b, a and a> b,a are conside ...

javascriptjquerycss

Is there a way to fetch and display property changes in Vue Material's md-dialog?

In the component hierarchy, there is a parent component containing a child, which further contains an md-dialog component. The dialog is opened from the parent component using the following code: ParentComponent.vue <template> <div> < ...

javascriptvue.js

Sending a JavaScript variable to PHP in order to specify the timezone

I'm working on setting the timezone for every user in the navbar.php file that's included on all pages of my website. After finding a helpful js script, I am able to echo the variable 'Europe/Brussels' to identify my timezone correctly. ...

javascriptphpajaxtimezone

Tips for sending properties to a Material-UI styled component

I am facing a challenge with passing props to a component that already has internal props for handling styling. I am not sure how to manage both sets of props effectively. Below is my current setup. const styles = theme => ({ // Theme building }); ...

javascriptnode.jsreactjsmaterial-ui

Is it possible to utilize JSX when developing an App using React CDN or the CRA (create-react-app) boilerplate template?

The HTML Code: <div id="app"></div> <script src="https://unpkg.com/react@latest/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@latest/umd/react-dom.develo ...

javascriptreactjs