gstreamer/subprojects/gst-examples/webrtc/sendrecv/js/index.html

<!DOCTYPE html>
<!--
  vim: set sts=2 sw=2 et :


  Demo Javascript app for negotiating and streaming a sendrecv webrtc stream
  with a GStreamer app. Runs only in passive mode, i.e., responds to offers
  with answers, exchanges ICE candidates, and streams.

  Author: Nirbheek Chauhan <nirbheek@centricular.com>
-->
<html>
  <head>
    <meta charset="utf-8"/>
    <style>
      .error { color: red; }
    </style>
    <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
    <script src="webrtc.js"></script>
    <script>
      window.onload = websocketServerConnect;
    </script>
  </head>

  <body>
    <div><video id="stream" autoplay playsinline>Your browser doesn't support video</video></div>
    <div>Status: <span id="status">unknown</span></div>
    <div><textarea id="text" cols=40 rows=4></textarea></div>
    <br/>
    <div>
      <label for="peer-connect">Enter peer id</label>
      <input id="peer-connect" type="text" name="text">
      <input id="peer-connect-button" onclick="onConnectClicked();" type="button" value="Connect">
      <!-- Request the peer to send the offer by sending the OFFER_REQUEST message.
        Same as the --remote-offerer flag in the sendrecv C example -->
      <input id="remote-offerer" type="checkbox" autocomplete="off"><span>Remote offerer</span>
    </div>

    <div>Our id is <b id="peer-id">unknown</b></div>
    <br/>
    <div>
      <div>getUserMedia constraints being used:</div>
      <div><textarea id="constraints" cols=40 rows=4></textarea></div>
    </div>
  </body>
</html>
-												Add sendrecv implementation in js and gst webrtc

JS code runs on the browser and uses the browser's webrtc
implementation.

C code uses gstreamer's webrtc implementation, for which you need the
following repositories:

https://github.com/ystreet/gstreamer/tree/promise
https://github.com/ystreet/gst-plugins-bad/tree/webrtc

You can build these with either Autotools gst-uninstalled:

https://arunraghavan.net/2014/07/quick-start-guide-to-gst-uninstalled-1-x/

Or with Meson gst-build:

https://cgit.freedesktop.org/gstreamer/gst-build/

											
										
										
											2017-10-21 14:27:29 +00:00
+								<!DOCTYPE html>
 								<!--
 								  vim: set sts=2 sw=2 et :
 								  Demo Javascript app for negotiating and streaming a sendrecv webrtc stream
 								  with a GStreamer app. Runs only in passive mode, i.e., responds to offers
 								  with answers, exchanges ICE candidates, and streams.
 								  Author: Nirbheek Chauhan <nirbheek@centricular.com>
 								-->
 								<html>
 								  <head>
-												html: charset

Avoid warning:
The character encoding of the HTML document was not declared.
The document will render with garbled text in some browser configurations
if the document contains characters from outside the US-ASCII range.
The character encoding of the page must be declared in the document
or in the transfer protocol.

											
										
										
											2020-04-15 08:08:40 +00:00
+								    <meta charset="utf-8"/>
-												sendrecv/js: Make error statuses more prominent

Colour errors in red, and ensure that later status updates don't
overwrite existing error statuses.

											
										
										
											2018-03-31 16:54:15 +00:00
+								    <style>
 								      .error { color: red; }
 								    </style>
-												Add sendrecv implementation in js and gst webrtc

JS code runs on the browser and uses the browser's webrtc
implementation.

C code uses gstreamer's webrtc implementation, for which you need the
following repositories:

https://github.com/ystreet/gstreamer/tree/promise
https://github.com/ystreet/gst-plugins-bad/tree/webrtc

You can build these with either Autotools gst-uninstalled:

https://arunraghavan.net/2014/07/quick-start-guide-to-gst-uninstalled-1-x/

Or with Meson gst-build:

https://cgit.freedesktop.org/gstreamer/gst-build/

											
										
										
											2017-10-21 14:27:29 +00:00
+								    <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
 								    <script src="webrtc.js"></script>
 								    <script>
 								      window.onload = websocketServerConnect;
 								    </script>
 								  </head>
 								  <body>
-												Add video tag playsinline to enable autoplay in iOS Safari

											
										
										
											2019-04-12 07:35:38 +00:00
+								    <div><video id="stream" autoplay playsinline>Your browser doesn't support video</video></div>
-												Add sendrecv implementation in js and gst webrtc

JS code runs on the browser and uses the browser's webrtc
implementation.

C code uses gstreamer's webrtc implementation, for which you need the
following repositories:

https://github.com/ystreet/gstreamer/tree/promise
https://github.com/ystreet/gst-plugins-bad/tree/webrtc

You can build these with either Autotools gst-uninstalled:

https://arunraghavan.net/2014/07/quick-start-guide-to-gst-uninstalled-1-x/

Or with Meson gst-build:

https://cgit.freedesktop.org/gstreamer/gst-build/

											
										
										
											2017-10-21 14:27:29 +00:00
+								    <div>Status: <span id="status">unknown</span></div>
-												sendrecv: try to add a data channel

											
										
										
											2018-09-21 13:03:43 +00:00
+								    <div><textarea id="text" cols=40 rows=4></textarea></div>
-												sendrecv/js: Add an UI for connecting to specified peer id

Part-of: <https://gitlab.freedesktop.org/gstreamer/gst-examples/-/merge_requests/28>

											
										
										
											2020-11-27 09:16:52 +00:00
+								    <br/>
 								    <div>
 								      <label for="peer-connect">Enter peer id</label>
 								      <input id="peer-connect" type="text" name="text">
-												sendrecv/js: Implement state handling for Connect button

Part-of: <https://gitlab.freedesktop.org/gstreamer/gst-examples/-/merge_requests/31>

											
										
										
											2021-02-09 09:46:11 +00:00
+								      <input id="peer-connect-button" onclick="onConnectClicked();" type="button" value="Connect">
-												sendrecv: Implement remote-offerer option for JS example

Now you can check the "Remote offerer" checkbox in the JS example to
force the peer to send the SDP offer. This involved implementing
support for receiving the OFFER_REQUEST message in the C example.

As a side-effect of this, the C example will no longer send
OFFER_REQUEST automatically when the --our-id option is passed. It
will only do so when the --remote-offerer option is explicitly passed.

Part-of: <https://gitlab.freedesktop.org/gstreamer/gst-examples/-/merge_requests/31>

											
										
										
											2021-02-09 09:58:57 +00:00
+								      <!-- Request the peer to send the offer by sending the OFFER_REQUEST message.
 								        Same as the --remote-offerer flag in the sendrecv C example -->
 								      <input id="remote-offerer" type="checkbox" autocomplete="off"><span>Remote offerer</span>
-												sendrecv/js: Add an UI for connecting to specified peer id

Part-of: <https://gitlab.freedesktop.org/gstreamer/gst-examples/-/merge_requests/28>

											
										
										
											2020-11-27 09:16:52 +00:00
+								    </div>
-												Add sendrecv implementation in js and gst webrtc

JS code runs on the browser and uses the browser's webrtc
implementation.

C code uses gstreamer's webrtc implementation, for which you need the
following repositories:

https://github.com/ystreet/gstreamer/tree/promise
https://github.com/ystreet/gst-plugins-bad/tree/webrtc

You can build these with either Autotools gst-uninstalled:

https://arunraghavan.net/2014/07/quick-start-guide-to-gst-uninstalled-1-x/

Or with Meson gst-build:

https://cgit.freedesktop.org/gstreamer/gst-build/

											
										
										
											2017-10-21 14:27:29 +00:00
+								    <div>Our id is <b id="peer-id">unknown</b></div>
-												sendrecv/js: custom getUserMedia constraints

The html page now contains a text area in which the default
constraints will be added and can be edited.

Closes https://github.com/centricular/gstwebrtc-demos/issues/11

											
										
										
											2018-03-31 19:37:51 +00:00
+								    <br/>
 								    <div>
 								      <div>getUserMedia constraints being used:</div>
 								      <div><textarea id="constraints" cols=40 rows=4></textarea></div>
 								    </div>
-												Add sendrecv implementation in js and gst webrtc

JS code runs on the browser and uses the browser's webrtc
implementation.

C code uses gstreamer's webrtc implementation, for which you need the
following repositories:

https://github.com/ystreet/gstreamer/tree/promise
https://github.com/ystreet/gst-plugins-bad/tree/webrtc

You can build these with either Autotools gst-uninstalled:

https://arunraghavan.net/2014/07/quick-start-guide-to-gst-uninstalled-1-x/

Or with Meson gst-build:

https://cgit.freedesktop.org/gstreamer/gst-build/

											
										
										
											2017-10-21 14:27:29 +00:00
+								  </body>
 								</html>