Hello everyone,
We are using Capacitor for our mobile app connected to Ricoh Theta Z1 device. However we are facing CORS error. I know the existing solutions mentioned here which is creating reverse proxy for example. But I was wondering if its possible to do this via installing custom plugin to the device.
I do not know Capacitor and I do not understand why you would be getting a CORS error.
A plugin can access an internal web server.
The plugin uses the Android environment.
You can also run another web server for the gui.
This article is 5 years old, but may give you some ideas.
@Alverrt did you solve your problem?
If not, can you provide more information on how you want to change the headers?
If you run your own HTTP API server inside the camera, it seems that you should be able to modify the API headers, right?
BTW, if this is for a commercial project, please send me a DM with the use case and if possible, name of your company.
If you are trying to manage multiple cameras on a network, here’s an example:
We couldn’t solve it completely. Why is there CORS headers anyway? It creates so much headaches for mobile WebView development.
The reason we’re facing this issue is that we want to communicate with the API via WebView on the mobile app. However, since the API doesn’t return the necessary CORS headers, we’re unable to do so. If there were a way to more easily configure CORS headers and allow specific domains, rather than writing an API plugin just to set the headers, it would not only resolve this issue but also make it simpler for many other applications using this API.
Yes its high budget commercial project and our customer is a government which in among top 5 NATO countries.
We use Capacitor and it works well with it. Only problem is CORS.
We are meeting with a person from RICOH on Wednesday and will raise this issue. There may be no solution, but we will discuss and see if there are options for you.
Can you post what the existing header is from the camera and what the difference you want is?
I’m assuming you’re going to the endpoint like http://192.168.1.1/osc/commands/execute from within the WebView on the mobile app?
Are you running the mobile app on iOS, Android, or both?
Can you write the process is pseudocode?
Example:
Hello,
Our mobile application runs on standard Android, not a custom ROM. When we use JavaScript libraries to handle panoramic views, we encounter issues when trying to use Native DOM functions such as displaying an image or video returned from the Theta API.
For example, if we make a request to the Theta API to retrieve a picture or video and receive a URL like http://192.168.1.1/path/to/image.jpg, we then use it in the DOM as follows:
<img src="http://192.168.1.1/path/to/image.jpg"> or <video src="http://192.168.1.1/path/to/video.mp4">.
This approach creates CORS issues, as the Theta API does not include proper Access-Control-Allow-Origin headers in its responses.
On the Android side, we tried to address this issue by using an interceptor to manually append headers to fetch requests. However, this workaround only works for programmatic requests (like JavaScript fetch) and not for Native DOM elements (e.g., <img> or <video> tags). As a result, we are unable to display resources like images or videos properly while maintaining the security and purpose of CORS.
Here is more information about CORS headers:
(Access-Control-Allow-Origin - HTTP | MDN)
If it were possible to configure or customize the CORS-related headers returned by the Theta API, it would help us resolve this issue effectively.
Example Steps:
Connect the Android device and the Theta camera to Wi-Fi in AP mode. The camera’s IP is 192.168.1.1.
The mobile app makes a request to the Theta API, for example, to retrieve an image or video:
Endpoint: http://192.168.1.1/osc/commands/execute
Payload: { “name”: “camera.getImage”, “parameters”: { “fileUrl”: “path/to/file.jpg” } }
The API returns a URL in the response, e.g., http://192.168.1.1/path/to/image.jpg.
This URL is used in the Native DOM, e.g.,:
<img src="http://192.168.1.1/path/to/image.jpg" />
CORS restrictions block the request when trying to load the image or video due to missing headers like Access-Control-Allow-Origin.
Attempts to fix this by intercepting fetch requests and appending headers only address JavaScript fetch requests but do not resolve the issue for resources handled directly in the DOM (like <img> or <video>).
Request:
If the Theta API could provide a way to configure or include appropriate CORS headers in its responses, such as Access-Control-Allow-Origin: * or allowing specific origins, this issue could be resolved.
