GStreamer Daemon - Javascript Video Player Example

GStreamer Daemon
GStreamer Daemon Basics
Building GStreamer Daemon
Quick Start Guide
Interacting with Pipelines
Modifying Element Properties
Sending Events
Receiving Messages from the Bus
EOS Seek Flush start/Flush stop
Receiving Signals
Enabling the Debug Subsystem
Low-level Implementation for Applications
Response Format
API Reference
C/C++ API Python API JavaScript API HTTP API
Simple Examples
Gapless Playback MP4 Video Recording New Clock Slow Motion Reverse Playback Monitor pipeline errors
Advanced Examples
Gstd and Interpipes CCTV Digital Camera GstD Digital PTZ GstD with ROS
API Examples
Python Video Player Example Javascript Video Player Example
Troubleshooting
Interpipesink
Releases
Licensing
FAQ
Contact Us

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:

1. Select the input (Camera or video file)
2. Regular and reverse video playback.
3. Trick modes (fast-forward, speed change, seek to position).
4. 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

Menu gstd examples

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.

Error creating thumbnail: Unable to save thumbnail to destination

GSTD controller

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