Pixel streaming custom HTML not loaded

Development Programming & Scripting
1

I’m following the “Pixel Streaming - How To Work With Interactive Video In Engine” course. At the “Customizing the HTML and Javascript Files” part it is shown that the custom_html folder is copied over to the signalling web server folder and explained that the ps.html and ps.js files will be loaded automatically the next time the server starts. Well, they do nothing: I changed a button texts and added a few console.log() prints but they are not showing up in the browser (caching is off).

1 Like
2

I also tried the Pixel Streaming Demo and I get the default PS page with the video stream if I go to “localhost” in my web browser. If I follow the linked page’s instructions and go to “localhost/PixelDemo.htm” then I get the customized web page but no video stream. The console shows two errors:

Failed to load resource: the server responded with a status of 404 (Not Found)

Uncaught TypeError: Cannot set property 'className' of null
3

Hi,

Did you ever solve this? - Having the exact same issue! Works fine up until I try the custom html.

Any help much appreciated - Jake

1 Like
4

Well, not really… I just added the following line to the header of the player.html file:

<script type="text/javascript" src="ps.js"></script>

So it will try to load ps.js directly.

5

in brave
Uncaught TypeError: Cannot set property ‘className’ of null

in firefox
Uncaught TypeError: qualityStatus is null

app.js:1519

i have coment this line and is qualityStatus.className = “grey-status”;
and it start but i not have mouse function

6

same problem here.
I have 2 errors.
the first is about socket.io. it cannot load the script. solved copyin the script inside the custom_html folder.
the second one is related to “className”.
the server i srunning and it works if I point directly to localhost.
using pixelDemo.html throws the error.
it seems it’s tying to use “something” but there are any network error in console.
anyone?
thanks

7

I find the solution!
the custom_html doesn’t contain that element, “aualityStatus”.
if you search it in the “player.html” file the the signalingWebServer folder, it’s just before the “plus” sign in the top right corner.
so…
open the PixelDemo.html file in custom_html folder, search for the “plus” sign (it’s a div with id “overlayButton”) and paste the “qualityStatus” element before.
&#9679

now the streaming works.

the new problem is mouse drag event, but all the rest seems to work.

8

I got the solution, finally.
there are some elements to change in both html and javascript so I attach a zip with all modified files.
unzip it inside the SignallingWebServer folder.link text

2 Likes
9

Hi, I tried to use ur way to solve same problem, and I also have a same problem that is mouse drag event didnt work but web connection is fine, is this a typical problem with 4.26? it’s seems no any other solution from answer hub and forum.

10

The link is invalid. Could you please provide a valid ZIP again? Thank you very much

1 Like
11

339135-scripts.zip (960.8 KB)

4 Likes
12

Thank you very much！！ :heart:

1 Like
13

You save my Life

1 Like
14

you save my life too. Thank you very much

1 Like
15

Hello. I need only remove the setting icon, but if i edit player.html and remove the button the play icon disappear. Can you help me?