webrtc-streamer 0.8.1 → 0.8.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/.devcontainer/devcontainer.json +6 -4
  2. package/html/apprtc.html +12 -18
  3. package/html/index.html +7 -3
  4. package/html/styles.css +24 -10
  5. package/html/webrtc-streamer.html +12 -10
  6. package/html/webrtcstreamer.html +13 -8
  7. package/package.json +1 -1
package/.devcontainer/devcontainer.json CHANGED
@@ -1,18 +1,20 @@
1
1
  {
2
2
  "name": "webrtc-streamer",
3
3
  "image": "ghcr.io/mpromonet/webrtc-streamer:dev",
4
- "runArgs": [ "--cap-add=SYS_PTRACE", "--security-opt", "seccomp=unconfined"],
4
+ "runArgs": [ "--cap-add=SYS_PTRACE", "--security-opt", "seccomp=unconfined", "--privileged"],
5
5
 
6
6
  "customizations": {
7
7
  "vscode": {
8
- "settings": {},
9
-
10
8
  "extensions": [
11
9
  "ms-vscode.cpptools"
12
10
  ]
13
11
  }
14
12
  },
15
-
13
+ "mounts": [
14
+ "source=profile,target=/home/dev,type=volume",
15
+ "source=webrtc,target=/webrtc/src/out,type=volume",
16
+ "target=/home/dev/.vscode-server,type=volume"
17
+ ],
16
18
  "remoteUser": "dev",
17
19
  "workspaceFolder": "/webrtc-streamer",
18
20
  "workspaceMount": "source=${localWorkspaceFolder},target=/webrtc-streamer,type=bind",
package/html/apprtc.html CHANGED
@@ -6,22 +6,16 @@
6
6
  <input type="button" value="connect" onclick="connect()" />
7
7
  <input type="button" value="disconnect" onclick="disconnect()" />
8
8
  </body>
9
- <script src="libs/request.min.js"></script>
10
9
  <script src="apprtc.json" ></script>
11
10
  <script>
12
- function sendRequest(request,method,headers,data,onSuccess,onFailure,scope) {
11
+ function sendRequest(url,headers,data,onSuccess,onFailure,scope) {
13
12
 
14
- console.log("HTTP call "+ method);
15
- var verb = "GET";
13
+ console.log("HTTP call "+ url);
14
+ let params = {};
16
15
  if (data) {
17
- verb = "POST";
18
- data = JSON.stringify(data);
16
+ params = { method: "POST", body: JSON.stringify(data)};
19
17
  }
20
- request(verb , method,
21
- {
22
- body: data,
23
- headers: headers
24
- }).done( function (response) {
18
+ fetch(url, {...params}).then( function (response) {
25
19
  if (response.statusCode === 200) {
26
20
  if (onSuccess) {
27
21
  onSuccess.call(scope,JSON.parse(response.body));
@@ -63,7 +57,7 @@
63
57
  var msg = JSON.parse(messages[i]);
64
58
  if (msg.type === "offer") {
65
59
  var webrtcStream = document.querySelector('#rtcstream').value;
66
- sendRequest(request, "/api/call?peerid="+ peerid+"&url="+encodeURIComponent(webrtcStream), null, msg, onCall, onError, this);
60
+ sendRequest("/api/call?peerid="+ peerid+"&url="+encodeURIComponent(webrtcStream), null, msg, onCall, onError, this);
67
61
  }
68
62
  }
69
63
  }
@@ -84,7 +78,7 @@
84
78
 
85
79
  var url = serverName + "/message/" + roomName + "/" + clientid;
86
80
  var body = { messages: candidates };
87
- sendRequest(request, url, null, body, null , onError, this);
81
+ sendRequest(url, null, body, null , onError, this);
88
82
  }
89
83
 
90
84
  function onCall(sdp) {
@@ -95,7 +89,7 @@
95
89
 
96
90
  var body = { messages: [ sdp ] };
97
91
  var url = serverName + "/message/" + roomName + "/" + clientid;
98
- sendRequest(request, url, null, body, null , onError, this);
92
+ sendRequest(url, null, body, null , onError, this);
99
93
 
100
94
 
101
95
  if (messages) {
@@ -103,11 +97,11 @@
103
97
  var msg = JSON.parse(messages[i]);
104
98
  if (msg.type === "candidate") {
105
99
  var mymsg = { "sdpMid": msg.id, "sdpMLineIndex": msg.label, "candidate": msg.candidate };
106
- sendRequest(request, "/api/addIceCandidate?peerid="+ peerid, null, mymsg, null, onError, this);
100
+ sendRequest("/api/addIceCandidate?peerid="+ peerid, null, mymsg, null, onError, this);
107
101
  }
108
102
  }
109
103
  }
110
- sendRequest(request, "/api/getIceCandidate?peerid="+ peerid, null, null, onGetIceCandidate, onError, this);
104
+ sendRequest("/api/getIceCandidate?peerid="+ peerid, null, null, onGetIceCandidate, onError, this);
111
105
  }
112
106
 
113
107
 
@@ -117,7 +111,7 @@
117
111
 
118
112
  var body = { messages: [""] };
119
113
  var url = serverName + "/join/" + roomName;
120
- sendRequest(request, url, null, body, onJoin , onError, this);
114
+ sendRequest(url, null, body, onJoin , onError, this);
121
115
  }
122
116
 
123
117
  function disconnect() {
@@ -126,7 +120,7 @@
126
120
  if (clientid) {
127
121
  var body = { messages: [] };
128
122
  var url = serverName + "/leave/" + roomName + "/" + clientid;
129
- sendRequest(request, url, null, body, null , onError, this);
123
+ sendRequest(url, null, body, null , onError, this);
130
124
  }
131
125
  }
132
126
 
package/html/index.html CHANGED
@@ -248,8 +248,12 @@
248
248
  </script>
249
249
  </head>
250
250
  <body>
251
- <nav id="menu"></nav>
252
- <div id="content"></div>
253
- <footer id="footer"></footer>
251
+ <div id="container">
252
+ <header>
253
+ <nav id="menu"></nav>
254
+ </header>
255
+ <div id="content"></div>
256
+ <footer id="footer"></footer>
257
+ </div>
254
258
  </body>
255
259
  </html>
package/html/styles.css CHANGED
@@ -1,22 +1,35 @@
1
1
  @import url('/nav.css');
2
- table {
3
- margin: 0 auto;
4
- }
5
2
  h2 {
6
- margin: 0 auto;
7
3
  text-align: center;
8
4
  }
9
- footer {
5
+
6
+ #footer {
10
7
  text-align: center;
8
+ flex-shrink: 0;
9
+ }
10
+
11
+ #container {
12
+ width: 100%;
13
+ height: 100%;
14
+ display: flex;
15
+ flex-direction: column;
16
+ flex-wrap: nowrap;
17
+ }
18
+
19
+ header {
20
+ flex-shrink: 0;
11
21
  }
22
+
23
+ #content {
24
+ flex-grow: 1;
25
+ overflow: auto;
26
+ min-height: 2em;
27
+ }
28
+
12
29
  div {
13
- margin: 0 auto;
14
30
  text-align: center;
15
31
  }
16
- button {
17
- margin: 0 auto;
18
- display: block;
19
- }
32
+
20
33
  video {
21
34
  margin: auto;
22
35
  left: 0;
@@ -24,6 +37,7 @@ video {
24
37
  position: relative;
25
38
  background: grey;
26
39
  }
40
+
27
41
  canvas {
28
42
  position: absolute;
29
43
  margin: auto;
package/html/webrtc-streamer.html CHANGED
@@ -1,19 +1,20 @@
1
1
  <html>
2
2
  <head>
3
3
  <link rel="icon" type="image/png" href="webrtc.png" />
4
- <style>
5
- h2 {
6
- margin: 0 auto;
7
- text-align: center;
8
- }
9
- </style>
4
+ <link rel="stylesheet" type="text/css" href="styles.css">
10
5
  <script type="module" src="webrtc-streamer-element.js"></script>
11
6
  <script type="module" src="webrtc-streamer-footer-element.js"></script>
12
7
  </head>
13
8
  <body>
14
- <h2 id="message"></h2>
15
- <webrtc-streamer id="stream" options="rtptransport=tcp&timeout=60&width=0&height=0&bitrate=0&rotation=0" style="display:none"></webrtc-streamer>
16
- <webrtc-streamer-footer></webrtc-streamer-footer>
9
+ <div id="container">
10
+ <header>
11
+ <h2 id="message"></h2>
12
+ </header>
13
+ <div id="content">
14
+ <webrtc-streamer id="stream" options="rtptransport=tcp&timeout=60&width=0&height=0&bitrate=0&rotation=0" style="display:none"></webrtc-streamer>
15
+ </div>
16
+ <webrtc-streamer-footer id="footer"></webrtc-streamer-footer>
17
+ </div>
17
18
  <script>
18
19
  let messageElement = document.getElementById("message");
19
20
  customElements.whenDefined('webrtc-streamer').then(() => {
@@ -28,7 +29,8 @@
28
29
  streamElement.setAttribute('url', JSON.stringify(url));
29
30
  streamElement.style.display = "block"
30
31
  } else {
31
- messageElement.innerHTML = "url should contains video or audio"
32
+ let url = prompt("WebRTC stream name to connect:")
33
+ window.location += (window.location.search ? "&" : "?") + `video=${encodeURI(url)}`;
32
34
  }
33
35
  }).catch( (e) => {
34
36
  messageElement.innerText = "webrtc-streamer webcomponent fails to initialize error:" + e
package/html/webrtcstreamer.html CHANGED
@@ -22,25 +22,30 @@
22
22
  document.getElementById("title").innerHTML=url.video;
23
23
  webRtcServer.connect(url.video,url.audio,options);
24
24
  fetch(webrtcConfig.url + "/api/version").then(r => r.text()).then( (response) => {
25
- document.getElementById("footer").innerHTML = "<p><a href='https://github.com/mpromonet/webrtc-streamer'>WebRTC-Streamer</a> " + JSON.parse(response).split(" ")[0] + "</p>";
25
+ document.getElementById("footer").innerHTML = "<p><a href='https://github.com/mpromonet/webrtc-streamer'>WebRTC-Streamer</a> " + response.split(" ")[0] + "</p>";
26
26
  });
27
27
  }
28
28
  window.onbeforeunload = function() { this.webRtcServer.disconnect() }
29
29
  } else {
30
+ let url = prompt("WebRTC stream name to connect:")
30
31
  if (typeof URLSearchParams != 'undefined') {
31
- alert("WebRTC stream name to connect is missing\n\nUsage :" + window.location + "?video=<WebRTC video stream name>&audio=<WebRTC audio stream name>&options=<WebRTC options>")
32
+ window.location += (window.location.search ? "&" : "?") + `video=${encodeURI(url)}`;
32
33
  } else {
33
- alert("WebRTC stream name to connect is missing\n\nUsage :" + window.location + "?<WebRTC video stream name>")
34
+ window.location += (window.location.search ? "&" : "?") + `${encodeURI(url)}`;
34
35
  }
35
36
  }
36
37
  </script>
37
38
  </head>
38
39
  <body>
39
- <h2 id="title"></h2>
40
- <div>
41
- <video id="video" muted playsinline controls></video>
42
- </div>
43
- <footer id="footer"></footer>
40
+ <div id="container">
41
+ <header>
42
+ <h2 id="title"></h2>
43
+ </header>
44
+ <div id="content">
45
+ <video id="video" muted playsinline controls></video>
46
+ </div>
47
+ <footer id="footer"></footer>
48
+ </div>
44
49
  </body>
45
50
  </html>
46
51
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "webrtc-streamer",
3
- "version": "0.8.1",
3
+ "version": "0.8.2",
4
4
  "description": "",
5
5
  "main": "joinjanusvideoroom.js",
6
6
  "dependencies": {