Stereopix ROOMS: synchronized stereoscopic viewer


JackDesBwa|3D
 

(Sorry for the previous message that was sent far too fast.)

You will be excited!
Dave Comeau and I talked a few months ago about the possibility to create a synchronized stereoscopic viewer for online meetings. The idea is that one presenter choose which image to show and all connected people will see their image change... and it will be displayed in their preferred format! (Chatting done with another independent channel, such as a web-audioconference)

The viewer of Stereopix was not mature enough at this time, but now the game has changed!!!
I played a few hours and managed to have a working base. A few hours more and a prototype was running on a server. It works well, it is amazing!

However, it is not very sexy, and even complex for the presenter part.
Is there someone interested in stereophotography (and web) who would like to work on the visual aspect of the web pages? Mostly HTML/CSS involved, possibly a bit of JS for more easy presenter experience.

Now more technical details (until the end, you can skip if not interested)

The synchronization is done with WebSockets connected to a server running a python code that handles the dispatching of the messages. Code is public under MIT license. This part will probably not be touched, except to add new features.

To run the simple messaging server, I found repl.it which is a service that can run this kind of special application without the complexity of configuring a full server. As it is built primary with collaboration in mind, I could add access to this REPL environment (though I would need to read the doc to check how it works). The code itself is also hosted in GitHub (this is the reference) and can be executed locally for tests anyway.

You can have a preview here: https://rooms.stereopix.repl.co/
If the application was not used for more than one hour, you will have to wait a few tens of seconds for wake-up.

To create a room, choose a name, enter it in the appropriate form and submit. Then submit the JSON description of the image list (otherwise the room will not be accessible) The JSON is the same as for the advanced examples (by the way, you can try with list.json from them)
After that, you can enter the room with several browsers possibly with several devices possibly from different networks, and play with the buttons.

JackDesBwa


Etienne Monneret (Perso)
 

Hi Jack,

When creating a room, it's very strange that clicking on send buttons makes nothing at screen. It lets the user thinking it's not working. But, in fact, it works.

For a first test, I tried with the latest image link exchanged on this list, and all seems ok:

Now, when trying an other image link, whatever the web site, I get a loading error message in the client side. If I move the above link to position N, then the client is displaying it when selecting this position N. Thus, it's not a question of position in the list. It's really a problem with other URLs. Possibly your server is black-listing nearly all URLs, and grant only few ones.

Small suggestions:
- do something at screen when send buttons are clicked, to inform something occurs, and was properly achieved.
- add an option to remove the send button on the page number selection and make it automatic with the selector. In my small test, I was always forgetting clicking on this send button. At least, put this send button just after the selector, to be sure viewing it when selecting.
- start numbering the page numbers at 1, not zero.
- display the page number in the client side viewer

;-)

Etienne

Le 07/01/2021 à 01:45, Stereopix Net a écrit :

(Sorry for the previous message that was sent far too fast.)

You will be excited!
Dave Comeau and I talked a few months ago about the possibility to create a synchronized stereoscopic viewer for online meetings. The idea is that one presenter choose which image to show and all connected people will see their image change... and it will be displayed in their preferred format! (Chatting done with another independent channel, such as a web-audioconference)

The viewer of Stereopix was not mature enough at this time, but now the game has changed!!!
I played a few hours and managed to have a working base. A few hours more and a prototype was running on a server. It works well, it is amazing!

However, it is not very sexy, and even complex for the presenter part.
Is there someone interested in stereophotography (and web) who would like to work on the visual aspect of the web pages? Mostly HTML/CSS involved, possibly a bit of JS for more easy presenter experience.

Now more technical details (until the end, you can skip if not interested)

The synchronization is done with WebSockets connected to a server running a python code that handles the dispatching of the messages. Code is public under MIT license. This part will probably not be touched, except to add new features.

To run the simple messaging server, I found repl.it which is a service that can run this kind of special application without the complexity of configuring a full server. As it is built primary with collaboration in mind, I could add access to this REPL environment (though I would need to read the doc to check how it works). The code itself is also hosted in GitHub (this is the reference) and can be executed locally for tests anyway.

You can have a preview here: https://rooms.stereopix.repl.co/
If the application was not used for more than one hour, you will have to wait a few tens of seconds for wake-up.

To create a room, choose a name, enter it in the appropriate form and submit. Then submit the JSON description of the image list (otherwise the room will not be accessible) The JSON is the same as for the advanced examples (by the way, you can try with list.json from them)
After that, you can enter the room with several browsers possibly with several devices possibly from different networks, and play with the buttons.

JackDesBwa



JackDesBwa|3D
 

Possibly your server is black-listing nearly all URLs, and grant only few ones.

Nope. It is classical CORS protection which is implemented in the browsers themselves.
Basically, when you load external resources for processing, the browser asks the server of the other domain if it is allowed, and this one has to answer explicitly positively (domains not supporting this are assumed to refuse)
In fact, the same conditions as for the embed viewer apply, because this app uses it.

In the help page, there are some cases showing how to emit the right headers to allow the sharing in different situations (needs at least to have some control on the site)
[By the way, the JSON syntax is the one described in the same page]
Otherwise, you could use services that already emit those headers (Flickr, Imgur, GitHub Pages, ...)
 
Small suggestions:

These are frontend modifications, exactly the ones that I asked if someone would be interested to work on. ;-)

Some people really enjoy frontend work, but I usually don't.
I would prefer to orient my time for stereo coding to develop the functionalities of the viewer itself. (Well it is mostly a frontend thing too)

About the send page button, you can hit return to validate the form.
Also, the "change" event is emitted when the field loses focus (not very satisfying your case), while the "input" event is fired at each character change (so would trigger "1" and "13" when you type 13). Both fire using up/dow arrows.

JackDesBwa


Etienne Monneret (Perso)
 

Le 07/01/2021 à 15:32, Stereopix Net a écrit :
Possibly your server is black-listing nearly all URLs, and grant only few ones.

Nope. It is classical CORS protection which is implemented in the browsers themselves.
Basically, when you load external resources for processing, the browser asks the server of the other domain if it is allowed, and this one has to answer explicitly positively (domains not supporting this are assumed to refuse)

I found it very strange that nearly all the URL I tested was including such cross limitations.

I did a test with one of them in a minimal HTML page, and the image is displaying properly:

http://3denlive.com/JackDesBwa/TestCrossWeb.html

I thought it could be a problem with HTTP/HTTPS mixing, but, in my case, the page is still properly loading using HTTPS (Firefox or Chromium just complain about the fact that some contents of the page are not secure):

https://3denlive.com/JackDesBwa/TestCrossWeb.html

Etienne



JackDesBwa|3D
 

I did a test with one of them in a minimal HTML page, and the image is displaying properly

The problems start when you want to process the image.
In the case of the viewer of Stereopix, simply copying the image into a WebGL texture triggers security features.

As soon as you draw into a canvas any data that was loaded from another origin without CORS approval, the canvas becomes tainted. A tainted canvas is one which is no longer considered secure, and any attempts to retrieve image data back from the canvas will cause an exception to be thrown.

JackDesBwa


Jay Kusnetz
 

We just tried this for our club's January meeting, worked great. We may use it as our primary display next month.


JackDesBwa|3D
 

We just tried this for our club's January meeting, worked great. We may use it as our primary display next month.

Awesome.
How many people were connected simultaneously?

JackDesBwa


JackDesBwa|3D
 

ROOMS update:
- There is an alias address easier to remember: https://rooms.stereopix.net/ (it is a full page frame redirecting to the other site)
- If you have a JSON file on your server, you can type its URL instead of its content, which would make the browser of the presenter download it.
- You can give direct link to the room with the alias address above followed by your room's name. (If you include it in an iframe, you could also use the real address; when included in an iframe, do not forget to add the permissions for fullscreen, webxr & co).

JackDesBwa


Jay Kusnetz
 

just 2 or 3 connected. Will try to get 10+ next week as a test before February's meeting.
I hope to be able to make another front end for the presenter, utilizing thumbnails generated by stereophotomaker (what it makes for its web gallery)