GStreamer Daemon - Javascript Video Player Example
Introduction to GStreamer Daemon Javascript Video Player Example
This is one concrete usage example of the GStreamer Daemon along with a Javascript + HTML Application. In this case, the application uses the Javascript GSTD API to communicate with GStreamer Daemon through the HTTP server.
The application consists of a Simple Video Player with several capabilities:
- Select the input (Camera or video file)
- Regular and reverse video playback.
- Trick modes (fast-forward, speed change, seek to position).
- Read messages from the GSTD bus.
Usage
Server side
Run gstd
gstd --enable-http-protocol --http-port=192.168.0.114 --htress=5005
Then move to web examples and run the server:
cd examples/web/
ADDRESS = 192.168.0.114 PORT = 5002 ./setup_http_server.sh -a $ADDRESS -p $PORT'
Client side
On your browser go to:
http://192.168.0.114:5002/ (Use the ip and port that you configured in the last step)
Now you can see the menu with the available examples In this page you need to configure the ip and port where gstd is running, in this case ip=192.168.0.114 and port=5005
Example 1: Video player
Now select the first example "Video player" and you can see the following page. It ios possible to enter to the example without the menu, in that case it is necessary to configure the Address and port as shown in the picture.
Controls:
- Select the input
- Camera: Select the camera that you want to use, e.g. /dev/video0 .
- File: Select the video file that you want to use, e.g. /home/user/videos/video.mp4 .
- Create the pipelines
- Delete the pipeline
- Pay, Pause, Stop
- Speed
- Playback direction ( > Forward, < backward )
- Jump to a specific time
- The console show the errors, warnings and logs of gstd
Example 2: GSTD Controller
Now select the second example "GSTD controller" and you can see the following page It ios possible to enter to the example without the menu, in that case it is necessary to configure the Address and port as shown in the picture.
Controls:
- Pipeline e.g videotestsrc ! autovideosink
- Create the pipelines
- Delete the pipeline
- Pay, Pause, Stop
- Speed
- Playback direction ( > Forward, < backward )
- Jump to a specific time
- The console show the errors, warnings and logs of gstd
Advance controls:
- Elements selection (Select the element to modify the properties)
- Property selection (Select the property that you want to modify)
- New value of the selected property
- Filter the bus
- Send an EOS
- Send a Flush Start and Stop
Add your own example