jsmpeg/view_stream.html at develop · Advantech-EdgeX/jsmpeg · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html>
<html>
<head>
	<title>JSMpeg Stream Client</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="mqttws31.js" type="text/javascript"></script>
    <script src="jquery.min.js" type="text/javascript"></script>
	  <script type="text/javascript" src="jsmpeg.min.js"></script>

    <style>
     .grid-container {
         display: grid;
         grid-template-columns: auto auto;
         background-color: #FFFF;
         padding: 3px;
     }
     .grid-item1 {
         margin: 0;
         position: absolute;
         top: 0%;
         left: 0%;
         -ms-transform: translate(0%, 0%);
         transform: translate(0%, 0%);
     }
     .grid-item2 {
         //background-color: rgba(255, 255, 255, 0.8);
         //border: 1px solid rgba(0, 0, 0, 0.8);
         //padding: 20px;
         font-size: 12px;
         text-align: left;
     }
     </style>
</head>
<body>
  <div class="grid-container">
    <div class="grid-item1">
	    <script type="text/javascript" src="jsmpeg.min.js"></script>
	    <canvas id="video-canvas" style="width: 100%"></canvas>
    	<script type="text/javascript">
        var canvas = document.getElementById('video-canvas');
        var url = 'ws://'+document.location.hostname+':7882/';
        var player = new JSMpeg.Player(url, {canvas: canvas});
      </script>
    </div>
    <div class="grid-item1 grid-item2">
      <text id='ws' style="font-family: 'Courier New', Courier, monospace;"></text>
    </div>
  </div>
</body>
</html>