| | |
|---|
| | | margin-top: 10px; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| | | <!-- 导入 ECMAScript 模块 --> |
|---|
| | | <script th:type="module" th:src="@{/js/WHEPClient.js}"></script> |
|---|
| | | <!-- 内联脚本块，可以使用模块中的内容 --> |
|---|
| | | <script th:inline="javascript"> |
|---|
| | | /*<![CDATA[*/ |
|---|
| | | // 在这里使用 WHEPClient 模块中的内容 |
|---|
| | | $("#play").click(function webrtcClient(){ |
|---|
| | | const url = "http://127.0.0.1:8889/165"; // add the webRTC URL from your live input here |
|---|
| | | console.log(url) |
|---|
| | | const videoElement = document.getElementById("remote-video"); |
|---|
| | | const client = new WHEPClient(url, videoElement); |
|---|
| | | }) |
|---|
| | | /*]]>*/ |
|---|
| | | </script> |
|---|
| | | <body> |
|---|
| | | <div class="container"> |
|---|
| | | <div class="row "> |
|---|
| | |
|---|
| | | <div class="row top-buffer"> |
|---|
| | | <video id="video" muted autoplay loop controls style="width: 800px; height: 100%; object-fit: fill;"/> |
|---|
| | | </div> |
|---|
| | | <div class="row top-buffer"> |
|---|
| | | <button id="play" type="button" class="btn btn-default" >播放</button> |
|---|
| | | <video id="remote-video" controls autoplay muted></video> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <script th:inline="javascript"> |
|---|
| | | <script th:inline="javascript" th:type="module"> |
|---|
| | | |
|---|
| | | var cameraId, opt,optOpen,optClose, token; |
|---|
| | | window.onload = function () { |
|---|
| | | $.ajax({ |
|---|
| | |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | |
|---|
| | | opt = {"username": "admin", "password": "admin123"}; |
|---|
| | | $.ajax({ |
|---|
| | | headers: { |
|---|
| | |
|---|
| | | webRtcServer.disconnect(); |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | </body> |
|---|
| | | </html> |
|---|
