pascal
/
pas2js
mirror of https://gitlab.com/freepascal.org/fpc/pas2js.git


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192
							<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="shortcut icon" href="img/kurento.png" type="image/png" />

    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="css/kurento.css">

    <script src="https://code.jquery.com/jquery-3.4.1.js" ></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/webrtc-adapter/7.4.0/adapter.min.js"></script>
    <script src="js/kurento-client.js"></script>
    <script src="js/kurento-utils.js"></script>

    <script src="helloworld.js"></script>
    <title>Pas2Js Kurento Tutorial 1: Hello World</title>
  </head>
  <body>

    <header>
      <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"></button>
            <a class="navbar-brand" href=".">Kurento Tutorial in Pas2JS</a>
          </div>
          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
              <li>
                <a href="helloworld.lpr"><span class="glyphicon glyphicon-file"></span> Source Code</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </header>

    <div class="container">
      <div class="page-header">
        <h1>Tutorial 1: Hello World (WebRTC in loopback)</h1>
        <ol>
          <li>Open this page with a browser compliant with WebRTC (Chrome, Firefox).</li>
          <li>Click on <i>Start</i> button.</li>
          <li>Grant the access to the camera and microphone. After the SDP negotiation the loopback should start.</li>
          <li>Click on <i>Stop</i> to finish the communication.</li>
        </ol>
      </div>
      <div class="row">
        <div class="col-md-5">
                <div class="form-group">
                  <label for="edtServer">Kurento Media Server URL</label>
                  <input type="text" class="form-control" id="edtServer" aria-describedby="lblServer" placeholder="Kurento media server"  value="wss://yourserver:8888/kurento">
                  <small id="lblServer" class="form-text text-muted">Kurento Media Server websocket wss:// URL.</small>
                </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-5">
          <h3>Local stream</h3>
          <video id="videoInput" autoplay width="480px" height="360px" poster="img/webrtc.png"></video>
        </div>
        <div class="col-md-2">
          <a id="start" href="#" class="btn btn-success">
            <span class="glyphicon glyphicon-play"></span> Start</a>
          <br/>
          <br/>
          <a id="stop" href="#" class="btn btn-danger">
            <span class="glyphicon glyphicon-stop"></span> Stop</a>
        </div>
        <div class="col-md-5">
          <h3>Remote stream</h3>
          <div id="cam1">
          <video id="videoOutput" autoplay width="480px" height="360px" poster="img/webrtc.png"></video>
          </div>
        </div>
      </div>
      <div class="row">
        <div id="pasjsconsole" class="col-md-5">
        </div>
      </div>
    </div>
    <script type="application/javascript">
     rtl.showUncaughtExceptions=true;
     rtl.run();
    </script>
  </body>
</html>