Help with the JavaScript Example.

[jcnils]

Hello,

I have been playing with gstd on a Jetson Nano, and it works fine with command line and python. And interpipe makes my life a lot easier. Thank you so much.

I am investigating ways to show the video in a browser (e.g. hlssink), and I saw the example on gstd wiki:
https://developer.ridgerun.com/wiki/index.php/GStreamer_Daemon_-_Javascript_Video_Player_Example

But when I run it, and open the url on my browser, I first have to click on menu.html then I have:

It is quite different from the example's page.

And the video player page is all white.

I am running it on the Nano, and opening in a browser on another computer.

The only change I did on the settings was to change the localhost to the Nano IP.

GstD version 0.14.0 - I used the development branch to build.

The browsers I tested were Firefox, Chrome and Ungoogled Chromium.

./setup_http_server.sh -a $SERVER_ADDRESS -p $SERVER_PORT

./setup_http_server.sh -a $SERVER_ADDRESS -p $SERVER_PORT
Serving HTTP on 192.168.1.107 port 8000 (http://192.168.1.107:8000/) ...
192.168.1.101 - - [10/Nov/2022 16:02:05] "GET / HTTP/1.1" 200 -
192.168.1.101 - - [10/Nov/2022 16:02:06] "GET /menu.html HTTP/1.1" 200 -
192.168.1.101 - - [10/Nov/2022 16:02:06] "GET /src/resources/logo.png HTTP/1.1" 200 -
192.168.1.101 - - [10/Nov/2022 16:02:08] "GET /src/video_player_app.html HTTP/1.1" 200 -
192.168.1.101 - - [10/Nov/2022 16:02:08] "GET /src/index.css HTTP/1.1" 200 -
192.168.1.101 - - [10/Nov/2022 16:02:08] "GET /src/main.js HTTP/1.1" 200 -
192.168.1.101 - - [10/Nov/2022 16:02:09] "GET /src/components/controllerApp.js HTTP/1.1" 200 -
192.168.1.101 - - [10/Nov/2022 16:02:09] "GET /src/components/videoPlayerApp.js HTTP/1.1" 200 -
192.168.1.101 - - [10/Nov/2022 16:02:09] "GET /src/components/navControl.js HTTP/1.1" 200 -
192.168.1.101 - - [10/Nov/2022 16:02:09] "GET /src/components/videoPlayer.js HTTP/1.1" 200 -
192.168.1.101 - - [10/Nov/2022 16:02:09] "GET /src/components/selectInput.js HTTP/1.1" 200 -
192.168.1.101 - - [10/Nov/2022 16:02:09] "GET /src/components/elementsControl.js HTTP/1.1" 200 -
192.168.1.101 - - [10/Nov/2022 16:02:09] "GET /src/components/changeProperty.js HTTP/1.1" 200 -
192.168.1.101 - - [10/Nov/2022 16:02:09] "GET /src/components/busConsole.js HTTP/1.1" 200 -
192.168.1.101 - - [10/Nov/2022 16:02:09] "GET /src/components/busControl.js HTTP/1.1" 200 -
192.168.1.101 - - [10/Nov/2022 16:02:09] "GET /src/components/footerControl.js HTTP/1.1" 200 -
192.168.1.101 - - [10/Nov/2022 16:02:09] "GET /src/components/gstdControl.js HTTP/1.1" 200 -
192.168.1.101 - - [10/Nov/2022 16:21:31] "GET / HTTP/1.1" 200 -
192.168.1.101 - - [10/Nov/2022 16:21:32] code 404, message File not found
192.168.1.101 - - [10/Nov/2022 16:21:32] "GET /favicon.ico HTTP/1.1" 404 -
192.168.1.101 - - [10/Nov/2022 16:21:33] "GET /menu.html HTTP/1.1" 200 -
192.168.1.101 - - [10/Nov/2022 16:21:34] "GET /src/resources/logo.png HTTP/1.1" 200 -
192.168.1.101 - - [10/Nov/2022 16:21:54] "GET /src/video_player_app.html HTTP/1.1" 200 -
192.168.1.101 - - [10/Nov/2022 16:21:54] "GET /src/main.js HTTP/1.1" 200 -
192.168.1.101 - - [10/Nov/2022 16:21:54] "GET /src/index.css HTTP/1.1" 200 -
192.168.1.101 - - [10/Nov/2022 16:21:54] "GET /src/components/controllerApp.js HTTP/1.1" 200 -
192.168.1.101 - - [10/Nov/2022 16:21:54] "GET /src/components/videoPlayerApp.js HTTP/1.1" 200 -
192.168.1.101 - - [10/Nov/2022 16:21:54] "GET /src/components/navControl.js HTTP/1.1" 200 -
192.168.1.101 - - [10/Nov/2022 16:21:54] "GET /src/components/videoPlayer.js HTTP/1.1" 200 -
192.168.1.101 - - [10/Nov/2022 16:21:54] "GET /src/components/selectInput.js HTTP/1.1" 200 -
192.168.1.101 - - [10/Nov/2022 16:21:54] "GET /src/components/elementsControl.js HTTP/1.1" 200 -

gstd --enable-http-protocol --http-address=${GSTD_ADDRESS} --http-port=${GSTD_PORT}

GstD version 0.14.0
Copyright (C) 2015-2021 RidgeRun (https://www.ridgerun.com)

Even if it does not work, I would appreciate it if someone could explain how it gets autovideosink to work in the browser.

On the source code, I can see the code that starts and stop the pipeline, but I cannot find what is supposed to show the video. Or maybe I understood it wrong, and this example is not supposed to show the video, just control the pipelines.

Thank you so much!
Cheers,

[filiphanes]

Problem is that this script is 404 Not found
<script src="https://rawcdn.githack.com/RidgeRun/gstd-1.x/feature/http-server-script/libgstc/javascript/libgstc.js"></script>

It is used in both /src/video_player_app.html and /src/controller_app.html

I have copied it from libgstc/javascript/libgstc.js to examples/web/src/libgstc.js
and changed script to:
<script src="libgstc.js"></script>

Then both examples works. Then only CORS was needed to disable in browser.

Change line 63 in libgstc.js to const url = `${address}`; might help too.