H264 RTP stream with gstreamer-1.0

Question

I try to make a H264 RTP stream from a Raspberry Pi 3 with a camera module to a video tag.

Using the following code to start the stream

raspivid -t 0 -h 720 -w 1080 -fps 25 -hf -b 2000000 -o - | \

gst-launch-1.0 -v fdsrc \
           ! h264parse \
           ! rtph264pay \
           ! gdppay \
           ! udpsink host="192.168.0.11" port=5000

Then I provide a simple webpage with a video tag:

<video id="videoTag" src="h264.sdp" autoplay>
        <p class="warning">Your browser does not support the video tag.</p>
</video>

The src references the following SDP file:

v=0
m=video 5000 RTP/AVP 96
c=IN IP4 192.168.0.51
a=rtpmap:96 H264/90000

When I load the webpage nothing happens, and the js console is completely empty.

So I tried to view the stream with VLC, and got the following error:

[00007efd80c03ea8] es demux error: cannot peek
[00007efd80c03ea8] es demux error: cannot peek
[00007efd80c03ea8] live555 demux error: no data received in 10s, aborting

I thought that there had been no UDP communication at all, So I tested it from a remote machine:

gst-launch-1.0 udpsrc port=5000 \
               caps="application/x-rtp, media=(string)video, clock-rate=(int)90000, encoding-name=(string)H264, payload=(int)96" \
               ! fakesink dump=true

ans received UDP packets. So I researched forward and found this:

https://cardinalpeak.com/blog/the-many-ways-to-stream-video-using-rtp-and-rtsp/

Now it is clear that I need 2 ports one to stream data and to establish RTP Control Protocol. However I have no idea how can I do it with gstreamer.

Worst of all when I run:

gst-inspect-1.0 | grep -i rtcp

I get nothing.

How can start video stream with gstreamer-1.0 to a video tag inside a webpage using the RTP protocol?

update

Using videotestsrc as gstreamer videosoruce and removing gdppay (it caused invalid RTP payload error) I was able to view the video stream from a remote client with VLC and with this gstreamer code:

gst-launch-1.0 udpsrc port=5000 \
               caps="application/x-rtp, media=(string)video, clock-rate=(int)90000, encoding-name=(string)H264, payload=(int)96" \
               ! rtph264depay \
               ! avdec_h264 \
               ! autovideosink

Answer 1

First you need to provide more info: which browser (try chrome, also safari is said to have better streaming support)..

To the SDP I think you are missing the info that its h264? And yes gdppay is just for internal "GStreamer only" streaming (gdp means "GStreamer Data Protocol" which noone else understands:) ).

If you really want GStreamer to stream RTSP you may use gstreamer rtsp server implementation - this is in separate repo and is incuded in some packages in Ubuntu for example.

If you want just rtp you are doing it correctly - as you see this approach works with for example vlc.. but what makes you think the sdp will work in HTML5 (I am just asking I do not have up to date infos on this)?

You can test this also with netcat - its fine for these kind of debugging. you can fake a rtp client this way:

nc -u -l 5000 

Which will dump the traffic out.

I read here that there are problems with rtp/rtsp in HTML5, but who knows maybe now it is already working..

You can try hls - which is usually used for streaming and has much better support int GStreamer these days 1.6 and further versions.. (hint: use hlssink).

Here you have some js for processing hls: https://github.com/dailymotion/hls.js

You can also try ogg/vorbis/theora and such stuff (sounds crazy, but you can give it a shot, I read somewhere that its suitable for streaming)..