gstreamer/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">
      <button onclick="onConnectClicked();">Connect</button>
    </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">`
			`<button onclick="onConnectClicked();">Connect</button>`
			`</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>`