Skip to content

Instantly share code, notes, and snippets.

@tetkuz
Last active November 8, 2024 08:47
Show Gist options
  • Save tetkuz/0c038321d05586841897 to your computer and use it in GitHub Desktop.
Save tetkuz/0c038321d05586841897 to your computer and use it in GitHub Desktop.
GStreamer stream to HTML5

Description

[Server] GStreamer ---> HTML [Client]

Require

  • gstreamer-1.x
  • Browser which supports video tag of HTML5

debian

sduo apt-get install gstreamer1.0

Usage

  1. Please set a webcam to the your pc.
  2. Open index.html by the browser.
  3. Run streaming-XXXXX.sh by the terminal.
  4. You will can watch video which captured by webcam !!
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>gst-stream</title>
</head>
<body>
<video width=320 height=240 autoplay>
<source src="http://localhost:8080">
</video>
</body>
</html>
#!/bin/sh
# for Linux
gst-launch-1.0 \
v4l2src device=/dev/video0 \
! videoconvert ! videoscale ! video/x-raw,width=320,height=240 \
! clockoverlay shaded-background=true font-desc="Sans 38" \
! theoraenc ! oggmux ! tcpserversink host=127.0.0.1 port=8080
#!/bin/sh
# for Windows
gst-launch-1.0 \
ksvideosrc device-index=0 \
! videoconvert ! videoscale ! video/x-raw,width=320,height=240 \
! clockoverlay shaded-background=true font-desc="Sans 38" \
! theoraenc ! oggmux ! tcpserversink host=127.0.0.1 port=8080
@sureshbadagi
Copy link

Thanks, I will try and update if i get any good solution.

@stiv-yakovenko
Copy link

Yes, that would be very helpful to the community. I just wanted to say that this instruction is clearly missleading.

Thanks, I will try and update if i get any good solution.

@Sayyam-Jain
Copy link

Thanks, I will try and update if i get any good solution.

Did you figure it out?

@janoglezcampos
Copy link

Hello everyone, Im working on an Electron app with GStreamer, and I needed it to work with Chrome, and after lots of headaches I managed it work, I posted the script used on a repository, is my first time posting code, may its not very good explained, so open an issue if you don't can't make it work or anything else so I can improve it.

The problem (as net::ERR_INVALID_HTTP_RESPONSE states), is that you need to add a response, so I did with NodeJs, wish it can help.

Here is the repository: https://github.com/janoglezcampos/GstreamerChromeBridge

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment