Difference between revisions of "GstWebRTC - PubNub Web Pages - x86"

From RidgeRun Developer Connection
Jump to: navigation, search
m
 
(27 intermediate revisions by 5 users not shown)
Line 1: Line 1:
−
<table>
+
{{GstWebRTC/Head|previous=Audio + Video Examples - x86|next=AppRTC Signaler Examples - x86|metakeywords=GstWebRTC Examples,WebRTC Examples,GstWebRTC GStreamer pipelines,WebRTC GStreamer pipelines,GstWebRTC PubNub Signaler,WebRTC PubNub Signaler,GstWebRTC PubNub Demo Page,WebRTC PubNub Demo Page,GstWebRTC PubNub GStreamer pipelines,WebRTC PubNub Pipelines,signaling}}
−
<tr>
 
−
<td><div class="clear; float:right">__TOC__</div></td>
 
−
<td valign=top>
 
−
{{Debug Symbol}} Problems running the pipelines shown on this page?<br>Please see our [http://developer.ridgerun.com/wiki/index.php?title=GStreamer_Debugging GStreamer Debugging guide] for help.
 
−
</td>
 
−
</table>
 
  
−
{{GstWebRTC Page|
+
This page shows a series of pipelines to try out the experimental PubNub support on '''x86 platform'''.
−
[[GstWebRTC - Audio + Video Examples|Audio + Video]]|
+
<br>
−
[[GstWebRTC|Home]]|
+
<br>
−
 
+
{{GStreamer debug}}
−
This page shows a series of pipelines to try out the experimental PubNub support.
 
−
 
 
−
__TOC__
 
  
 
== PubNub Demo Pages ==
 
== PubNub Demo Pages ==
  
−
PubNub offers a couple of test web pages to try out the WebRTC signalers.  
+
PubNub offers a few test web pages to try out the WebRTC signalers.
 +
* https://webrtc.ridgerun.com:7443
 +
* http://webrtc.ridgerun.com:7080
 
* https://kevingleason.me/SimpleRTC/minivid.html
 
* https://kevingleason.me/SimpleRTC/minivid.html
 
* https://www.pubnub.com/developers/demos/webrtc/
 
* https://www.pubnub.com/developers/demos/webrtc/
Line 24: Line 17:
 
These examples are such that audio+video is required in both ways.
 
These examples are such that audio+video is required in both ways.
 
</pre>
 
</pre>
 +
 +
=== PubNub's WebRTC page ===
 +
 +
WebRTC provides a PubNub page that does not require audio+video streaming in both ways. It allows the selection of sending or receiving (or both): only video, only audio and audio+video.
 +
You can access the PubNub WebRTC page from here https://webrtc.ridgerun.com:7443/.
 +
Also you can access using your localhost like in the following example, the port is defined as 8080:
 +
 +
<syntaxhighlight lang='bash'>
 +
cd gst-webrtc/tests/examples/signalers/pubnub
 +
python3 -m http.server 8080
 +
</syntaxhighlight>
 +
 +
The following show how to establish a call using the PubNub's WebRTC page in https://localhost:8080 (Select the port you defined)
 +
<br>
 +
[[File:pubnub_webpage.png|700px|center|Establish a WebRTC call with https://localhost:8080]]
 +
<br>
 +
# Type a unique name in the top text bar.
 +
# Type the pipeline name in the bottom text bar.
 +
# Select video and audio options: Disable, Send only, Receive only or Send-Receive.
 +
# Select Data: Send-Receive or Disable
 +
# Select Register button.
 +
# Start the call from the pipeline or selecting the call button on the Webpage.
 +
 +
'''Note:''' In the following examples, the start-call property on the pipeline is set to false, thus you have to start the call from the website pressing the correct button. If start-call is set to true, the pipeline starts the call.
  
 
=== SimpleRTC WebPage ===
 
=== SimpleRTC WebPage ===
  
 
The following figure show how to establish a call using the SimpleRTC web page in https://kevingleason.me/SimpleRTC/minivid.html
 
The following figure show how to establish a call using the SimpleRTC web page in https://kevingleason.me/SimpleRTC/minivid.html
−
 
+
<br>
 
[[File:demo-minivid.png|700px|center|Establish a WebRTC call with https://kevingleason.me/SimpleRTC/minivid.html]]
 
[[File:demo-minivid.png|700px|center|Establish a WebRTC call with https://kevingleason.me/SimpleRTC/minivid.html]]
−
 
+
<br>
 
# Type a unique name in the top text bar.
 
# Type a unique name in the top text bar.
 
# Register that unique name to PubNub
 
# Register that unique name to PubNub
Line 38: Line 55:
 
=== PubNub Official Demo ===
 
=== PubNub Official Demo ===
  
−
The following figure show how to establish a call using the official PubNub's WebRTC demo in https://www.pubnub.com/developers/demos/webrtc/
+
The following figure show hows to establish a call using the official PubNub's WebRTC demo in https://www.pubnub.com/developers/demos/webrtc/
 +
<br>
 +
[[File:PubNub_Google_Chrome.png|700px|center|Establish a WebRTC call with https://www.pubnub.com/developers/demos/webrtc/]]
 +
<br>
 +
'''Follow these steps'''
 +
 
 +
# Make sure to type the number above the message "this is your phone number" in the pipeline description
 +
# Just type the pipeline's name in the bottom text bar. In the examples 123 this would be $USER_CHANNEL or 123, don't press any of the other buttons
 +
# Launch the pipeline, the call should start right away (in Chrome), a couple of seconds at most (in Firefox).
 +
 
 +
====VP8====
  
−
[[File:demo-pubnub.png|700px|center|Establish a WebRTC call with https://www.pubnub.com/developers/demos/webrtc/]]
+
'''Send/receive (VP8)'''
 +
<pre style="white-space: pre-wrap;">
 +
GST_DEBUG=3 gst-launch-1.0 rrwebrtcbin rtcp-mux=true start-call=true signaler::user-channel=$USER_CHANNEL signaler::peer-channel=$PEER_CHANNEL name=web videotestsrc is-live=true ! "video/x-raw, width=(int)640, height=(int)480, format=(string)I420, framerate=(fraction)30/1" ! vp8enc ! rtpvp8pay ! web.video_sink web.video_src ! rtpvp8depay ! avdec_vp8 ! xvimagesink
 +
</pre>
  
−
# Type the pipeline's name in the bottom text bar. In the examples 123 this would be $USER_CHANNEL or 123
+
'''Send only (VP8)'''
−
# Start the call
+
<pre style="white-space: pre-wrap;">
 +
GST_DEBUG=3 gst-launch-1.0 rrwebrtcbin rtcp-mux=true start-call=true signaler::user-channel=$USER_CHANNEL signaler::peer-channel=$PEER_CHANNEL name=web videotestsrc is-live=true ! "video/x-raw, width=(int)640, height=(int)480, format=(string)I420, framerate=(fraction)30/1" ! vp8enc ! rtpvp8pay ! web.video_sink
 +
</pre>
 +
 
 +
'''Receive only (VP8)'''
 +
<pre style="white-space: pre-wrap;">
 +
GST_DEBUG=3 gst-launch-1.0 rrwebrtcbin rtcp-mux=true start-call=true signaler::user-channel=$USER_CHANNEL signaler::peer-channel=$PEER_CHANNEL name=web web.video_src ! rtpvp8depay ! avdec_vp8 ! xvimagesink
 +
</pre>
 +
 
 +
====H.264====
 +
 
 +
'''Send/receive (H.264)'''
 +
<pre style="white-space: pre-wrap;">
 +
GST_DEBUG=3 gst-launch-1.0 rrwebrtcbin rtcp-mux=true start-call=true signaler::user-channel=$USER_CHANNEL signaler::peer-channel=$PEER_CHANNEL name=web videotestsrc is-live=true ! x264enc aud=false key-int-max=1 tune=zerolatency intra-refresh=true ! rtph264pay ! web.video_sink web.video_src ! rtph264depay ! h264parse ! avdec_h264 ! autovideosink
 +
</pre>
 +
 
 +
'''Send only (H.264)'''
 +
<pre style="white-space: pre-wrap;">
 +
GST_DEBUG=3 gst-launch-1.0 rrwebrtcbin rtcp-mux=true start-call=true signaler::user-channel=123 signaler::peer-channel=471 name=web videotestsrc is-live=true ! x264enc aud=false key-int-max=1 tune=zerolatency intra-refresh=true ! rtph264pay ! web.video_sink
 +
</pre>
 +
 
 +
'''Receive only (H.264)'''
 +
<pre style="white-space: pre-wrap;">
 +
GST_DEBUG=3 gst-launch-1.0 rrwebrtcbin rtcp-mux=true start-call=true signaler::user-channel=123 signaler::peer-channel=683 name=web web.video_src ! rtph264depay ! h264parse ! avdec_h264 ! autovideosink
 +
</pre>
 +
 
 +
== H264+Opus Send+Receive ==
 +
 
 +
===Example===
 +
 
 +
This pipeline will encode a video and audio streams to H264 and OPUS accordingly and send them to the demo web page. Additionally, it will receive the web page's video and audio feeds, in the same format.
 +
 
 +
==== x264 ====
 +
 
 +
<pre style="background-color:yellow">
 +
It seems that browsers do not get along with x264 because of SEI NAL units sent with the stream. As a workaround, we set key-int-max=1 and avoid the SEI insertions.
 +
</pre>
 +
 
 +
<syntaxhighlight lang=bash>
 +
USER_CHANNEL=123
 +
gst-launch-1.0 rrwebrtcbin rtcp-mux=true start-call=false signaler::user-channel=$USER_CHANNEL name=web \
 +
videotestsrc is-live=true ! x264enc aud=false key-int-max=1 tune=zerolatency intra-refresh=true ! "video/x-h264,profile=constrained-baseline,level=(string)3.1" ! \
 +
rtph264pay ! web.video_sink \
 +
audiotestsrc is-live=true ! opusenc ! rtpopuspay ! web.audio_sink \
 +
web.video_src ! rtph264depay ! h264parse ! avdec_h264 ! autovideosink \
 +
web.audio_src ! rtpopusdepay ! opusdec ! autoaudiosink
 +
</syntaxhighlight>
 +
 
 +
==== OpenH264 ====
  
−
=== PubNub's WebRTC page ===
+
<syntaxhighlight lang=bash>
 +
USER_CHANNEL=123
 +
gst-launch-1.0 rrwebrtcbin rtcp-mux=true start-call=false signaler::user-channel=$USER_CHANNEL name=web \
 +
videotestsrc is-live=true ! openh264enc ! \
 +
rtph264pay ! web.video_sink \
 +
audiotestsrc is-live=true ! opusenc ! rtpopuspay ! web.audio_sink \
 +
web.video_src ! rtph264depay ! h264parse ! avdec_h264 ! autovideosink \
 +
web.audio_src ! rtpopusdepay ! opusdec ! autoaudiosink
 +
</syntaxhighlight>
  
−
WebRTC provides a PubNub page that can be found the repository. In the following example, the port is defined as 8080:
+
== VP8+Opus Send+Receive ==
  
−
<syntaxhighlight lang='bash'>
+
===Example===
−
cd gst-webrtc/tests/examples/signalers/pubnub
 
−
python3 -m http.server 8080
 
−
</syntaxhighlight>
 
  
−
The following show how to establish a call using the PubNub's WebRTC page in https://localhost:8080 (Select the port you defined)
+
This pipeline will encode a video and audio streams to VP8 and OPUS respectively and send them to the demo web page. Additionally, it will receive the web page's video and audio feeds, in the same format.
  
−
[[File:pubnub_webpage.png|700px|center|Establish a WebRTC call with https://localhost:8080]]
+
<syntaxhighlight lang=bash>
 +
USER_CHANNEL=123
 +
gst-launch-1.0 rrwebrtcbin rtcp-mux=true start-call=false signaler::user-channel=$USER_CHANNEL name=web \
 +
videotestsrc is-live=true ! vp8enc ! rtpvp8pay ! web.video_sink \
 +
audiotestsrc is-live=true ! opusenc ! rtpopuspay ! web.audio_sink \
 +
web.video_src ! rtpvp8depay ! avdec_vp8 ! autovideosink \
 +
web.audio_src ! rtpopusdepay ! opusdec ! autoaudiosink
 +
</syntaxhighlight>
  
−
# Type a unique name in the top text bar.
 
−
# Type the pipeline name in the bottom text bar.
 
−
# Select video and audio options: Disable, Send only, Receive only or Send-Receive.
 
−
# Select Data: Send-Receive or Disable
 
−
# Select Register button.
 
−
# Start the call from the pipeline or selecting the call button on the Webpage.
 
  
−
}}
+
{{GstWebRTC/Foot|previous=Audio + Video Examples - x86|next=AppRTC Signaler Examples - x86}}

Latest revision as of 05:49, 21 March 2023



Previous: Audio + Video Examples - x86 Index Next: AppRTC Signaler Examples - x86


GstWebRTC
Ridgerun-logo.svg
WebRTC Fundamentals
GstWebRTC Basics
Signaling
Plugin Elements
Evaluating GstWebRTC
Getting the code
Building GstWebRTC
Examples
x86
iMX6
iMX8
TX1/TX2/Xavier
MCU Demo Application
Contact Us



This page shows a series of pipelines to try out the experimental PubNub support on x86 platform.

Error something wrong.jpg Problems running the pipelines shown on this page?
Please see our GStreamer Debugging guide for help.

PubNub Demo Pages

PubNub offers a few test web pages to try out the WebRTC signalers. 

These examples are such that audio+video is required in both ways.

PubNub's WebRTC page

WebRTC provides a PubNub page that does not require audio+video streaming in both ways. It allows the selection of sending or receiving (or both): only video, only audio and audio+video. You can access the PubNub WebRTC page from here https://webrtc.ridgerun.com:7443/. Also you can access using your localhost like in the following example, the port is defined as 8080: 

cd gst-webrtc/tests/examples/signalers/pubnub
python3 -m http.server 8080

The following show how to establish a call using the PubNub's WebRTC page in https://localhost:8080 (Select the port you defined)

Establish a WebRTC call with https://localhost:8080


  1. Type a unique name in the top text bar.
  2. Type the pipeline name in the bottom text bar.
  3. Select video and audio options: Disable, Send only, Receive only or Send-Receive.
  4. Select Data: Send-Receive or Disable
  5. Select Register button.
  6. Start the call from the pipeline or selecting the call button on the Webpage.

Note: In the following examples, the start-call property on the pipeline is set to false, thus you have to start the call from the website pressing the correct button. If start-call is set to true, the pipeline starts the call.

SimpleRTC WebPage

The following figure show how to establish a call using the SimpleRTC web page in https://kevingleason.me/SimpleRTC/minivid.html

Establish a WebRTC call with https://kevingleason.me/SimpleRTC/minivid.html


  1. Type a unique name in the top text bar.
  2. Register that unique name to PubNub
  3. Type the pipeline name in the bottom text bar. In the examples 123 this would be $USER_CHANNEL or 123
  4. Start the call

PubNub Official Demo

The following figure show hows to establish a call using the official PubNub's WebRTC demo in https://www.pubnub.com/developers/demos/webrtc/

Establish a WebRTC call with https://www.pubnub.com/developers/demos/webrtc/


Follow these steps

  1. Make sure to type the number above the message "this is your phone number" in the pipeline description
  2. Just type the pipeline's name in the bottom text bar. In the examples 123 this would be $USER_CHANNEL or 123, don't press any of the other buttons
  3. Launch the pipeline, the call should start right away (in Chrome), a couple of seconds at most (in Firefox).

VP8

Send/receive (VP8) 

GST_DEBUG=3 gst-launch-1.0 rrwebrtcbin rtcp-mux=true start-call=true signaler::user-channel=$USER_CHANNEL signaler::peer-channel=$PEER_CHANNEL name=web videotestsrc is-live=true ! "video/x-raw, width=(int)640, height=(int)480, format=(string)I420, framerate=(fraction)30/1" ! vp8enc ! rtpvp8pay ! web.video_sink web.video_src ! rtpvp8depay ! avdec_vp8 ! xvimagesink

Send only (VP8) 

GST_DEBUG=3 gst-launch-1.0 rrwebrtcbin rtcp-mux=true start-call=true signaler::user-channel=$USER_CHANNEL signaler::peer-channel=$PEER_CHANNEL name=web videotestsrc is-live=true ! "video/x-raw, width=(int)640, height=(int)480, format=(string)I420, framerate=(fraction)30/1" ! vp8enc ! rtpvp8pay ! web.video_sink

Receive only (VP8) 

GST_DEBUG=3 gst-launch-1.0 rrwebrtcbin rtcp-mux=true start-call=true signaler::user-channel=$USER_CHANNEL signaler::peer-channel=$PEER_CHANNEL name=web web.video_src ! rtpvp8depay ! avdec_vp8 ! xvimagesink

H.264

Send/receive (H.264) 

GST_DEBUG=3 gst-launch-1.0 rrwebrtcbin rtcp-mux=true start-call=true signaler::user-channel=$USER_CHANNEL signaler::peer-channel=$PEER_CHANNEL name=web videotestsrc is-live=true ! x264enc aud=false key-int-max=1 tune=zerolatency intra-refresh=true ! rtph264pay ! web.video_sink web.video_src ! rtph264depay ! h264parse ! avdec_h264 ! autovideosink

Send only (H.264) 

GST_DEBUG=3 gst-launch-1.0 rrwebrtcbin rtcp-mux=true start-call=true signaler::user-channel=123 signaler::peer-channel=471 name=web videotestsrc is-live=true ! x264enc aud=false key-int-max=1 tune=zerolatency intra-refresh=true ! rtph264pay ! web.video_sink

Receive only (H.264) 

GST_DEBUG=3 gst-launch-1.0 rrwebrtcbin rtcp-mux=true start-call=true signaler::user-channel=123 signaler::peer-channel=683 name=web web.video_src ! rtph264depay ! h264parse ! avdec_h264 ! autovideosink

H264+Opus Send+Receive

Example

This pipeline will encode a video and audio streams to H264 and OPUS accordingly and send them to the demo web page. Additionally, it will receive the web page's video and audio feeds, in the same format.

x264

It seems that browsers do not get along with x264 because of SEI NAL units sent with the stream. As a workaround, we set key-int-max=1 and avoid the SEI insertions.

USER_CHANNEL=123
gst-launch-1.0 rrwebrtcbin rtcp-mux=true start-call=false signaler::user-channel=$USER_CHANNEL name=web \
videotestsrc is-live=true ! x264enc aud=false key-int-max=1 tune=zerolatency intra-refresh=true ! "video/x-h264,profile=constrained-baseline,level=(string)3.1" ! \
rtph264pay ! web.video_sink \
audiotestsrc is-live=true ! opusenc ! rtpopuspay ! web.audio_sink \
web.video_src ! rtph264depay ! h264parse ! avdec_h264 ! autovideosink \
web.audio_src ! rtpopusdepay ! opusdec ! autoaudiosink

OpenH264

USER_CHANNEL=123
gst-launch-1.0 rrwebrtcbin rtcp-mux=true start-call=false signaler::user-channel=$USER_CHANNEL name=web \
videotestsrc is-live=true ! openh264enc ! \
rtph264pay ! web.video_sink \
audiotestsrc is-live=true ! opusenc ! rtpopuspay ! web.audio_sink \
web.video_src ! rtph264depay ! h264parse ! avdec_h264 ! autovideosink \
web.audio_src ! rtpopusdepay ! opusdec ! autoaudiosink

VP8+Opus Send+Receive

Example

This pipeline will encode a video and audio streams to VP8 and OPUS respectively and send them to the demo web page. Additionally, it will receive the web page's video and audio feeds, in the same format. 

USER_CHANNEL=123
gst-launch-1.0 rrwebrtcbin rtcp-mux=true start-call=false signaler::user-channel=$USER_CHANNEL name=web \
videotestsrc is-live=true ! vp8enc ! rtpvp8pay ! web.video_sink \
audiotestsrc is-live=true ! opusenc ! rtpopuspay ! web.audio_sink \
web.video_src ! rtpvp8depay ! avdec_vp8 ! autovideosink \
web.audio_src ! rtpopusdepay ! opusdec ! autoaudiosink



Previous: Audio + Video Examples - x86 Index Next: AppRTC Signaler Examples - x86


Retrieved from "http://developer.ridgerun.com/wiki/index.php?title=GstWebRTC_-_PubNub_Web_Pages_-_x86&oldid=48121"