mirror of
https://gitlab.com/freepascal.org/fpc/pas2js.git
synced 2025-04-05 04:17:54 +02:00
93 lines
3.7 KiB
HTML
93 lines
3.7 KiB
HTML
<!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>
|