Guide to Live Streaming to a Google Chrome Browser from a Web-Camera

Newcomers
1

Hello,

I’m working on a project to live stream video data from a web-cam to a browser and could use some guidance.

Project Setup:

  • Source: Web-cam connected to a laptop.
  • OS: Ubuntu 20.04.
  • Encoding: H264 or H265.
  • Client: Google Chrome browser, initially on localhost (127.0.0.1) and subsequently on a tablet via WIFI.

Objective: Create a simple homepage displaying only the live video stream.

Progress & Challenges: I’ve explored using GStreamer for encoding and have considered TCP stream to an HTML page, but understand this won’t facilitate live streaming. I’ve read about HLS and WebRTC on the GStreamer forum and am leaning towards WebRTC as it seems to align with my goal of real-time streaming.

I found a WebRTC sendonly example but admit some technical aspects of live video streaming are still unclear to me.

Questions:

  1. WebRTC vs. HLS: Is WebRTC the best choice for real-time streaming in this context, or should I consider HLS?
  2. GStreamer & WebRTC: How do I set up GStreamer to capture, encode, and transmit video via WebRTC?
  3. WebRTC & Browser: How can I ensure the stream is viewable in a Chrome browser, both locally and on a tablet via WIFI?
  4. Guides/Examples: Are there any step-by-step guides or examples available for setting up a basic live streaming server using GStreamer and WebRTC?

Any guidance or resources that could help me navigate through this would be greatly appreciated. Thank you in advance!

2 Likes
2

I’ve dug a bit deeper and stumbled upon gst-rtsp-server, which seems to partially align with what I’m exploring: Real Time Streaming Protocol (RTSP). Further reading on RTP in WebRTC has been insightful, though gst-rtsp-server doesn’t seem to be crafted for web-browsers, making me ponder if I’m veering off course.

Despite testing various configurations, success eludes me, indicating a fundamental piece of the puzzle is still missing. For those interested, you might explore an example of using gst-rtsp-server for streaming (source: STMicroelectronics).

My inclination towards WebRTC remains, albeit with a cloud of uncertainty regarding the missing link to craft a successful example.

In a separate experiment, I managed to stream H264 from a webcam (/dev/video0) via UDP, but it doesn’t quite hit the mark of what I’m seeking. If you’re curious about streaming via UDP, you might find an example of H264 Streaming using GStreamer useful.

My own test was:

cssCopy code

gst-launch-1.0 -v v4l2src device=/dev/video0 ! "video/x-raw, width=640, height=480" ! x264enc pass=qual quantizer=20 tune=zerolatency ! rtph264pay ! udpsink host=127.0.0.1 port=9090
  • gst-launch-1.0: This is the command-line tool to build and run basic GStreamer pipelines.
  • v4l2src device=/dev/video0: This sets the video source to the first webcam available on your system.
  • "video/x-raw, width=640, height=480": This sets the raw video format and specifies the width and height of the video.
  • x264enc pass=qual quantizer=20 tune=zerolatency: This uses the x264 encoder, with settings aimed at reducing latency.
  • rtph264pay: This converts the H264 encoded Payload to RTP packets (RTP payload format for H264 video streams).
  • udpsink host=127.0.0.1 port=9090: This sends the RTP packets to the specified UDP address and port
3

You might want to give webrtcsink a try. That offers you a simple way to set up send-only WebRTC streams from GStreamer, and you can then receive those via some web app in a browser.

Correct, none of the usual web browsers support RTSP out of the box. Your choices are WebRTC (low latency) or HLS/DASH/etc (higher latency, CDN-capable).

4

Hello

I want to do the exact same project with a slight difference.

Can I use your experience?

I don’t know how to display this file stream in the browser?