@flashphoner/websdk 2.0.259 → 2.0.261
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.
- package/docTemplate/README.md +1 -1
- package/examples/demo/streaming/stream-zoom/stream-zoom.css +23 -0
- package/examples/demo/streaming/stream-zoom/stream-zoom.html +59 -0
- package/examples/demo/streaming/stream-zoom/stream-zoom.js +166 -0
- package/flashphoner-no-flash.js +906 -63
- package/flashphoner-no-flash.min.js +2 -2
- package/flashphoner-no-webrtc.js +728 -9
- package/flashphoner-no-webrtc.min.js +2 -2
- package/flashphoner-no-wsplayer.js +905 -62
- package/flashphoner-no-wsplayer.min.js +2 -2
- package/flashphoner-room-api-webrtc-only.js +906 -63
- package/flashphoner-room-api-webrtc-only.min.js +1 -1
- package/flashphoner-room-api.js +616 -60
- package/flashphoner-room-api.min.js +2 -2
- package/flashphoner-temasys-flash-websocket-without-adapterjs.js +729 -10
- package/flashphoner-temasys-flash-websocket.js +729 -10
- package/flashphoner-temasys-flash-websocket.min.js +1 -1
- package/flashphoner-webrtc-only.js +905 -62
- package/flashphoner-webrtc-only.min.js +1 -1
- package/flashphoner.js +906 -63
- package/flashphoner.min.js +2 -2
- package/package.json +1 -1
- package/src/constants.d.ts +6 -0
- package/src/constants.js +6 -0
- package/src/flashphoner-core.js +105 -5
- package/src/stats-collector.js +318 -0
- package/src/util.js +61 -1
- package/src/webrtc-media-provider.js +119 -48
package/docTemplate/README.md
CHANGED
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
.fp-remoteVideo {
|
|
2
|
+
border: 1px double #777;
|
|
3
|
+
width: 322px;
|
|
4
|
+
height: 242px;
|
|
5
|
+
margin: 0 auto;
|
|
6
|
+
}
|
|
7
|
+
.fp-remoteVideo>video {
|
|
8
|
+
width: 320px;
|
|
9
|
+
height: 240px;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.fp-localVideo {
|
|
13
|
+
border: 1px double #777;
|
|
14
|
+
width: 322px;
|
|
15
|
+
height: 242px;
|
|
16
|
+
margin: 0 auto;
|
|
17
|
+
}
|
|
18
|
+
.fp-localVideo>video {
|
|
19
|
+
width: 320px;
|
|
20
|
+
height: 240px;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
6
|
+
<link rel="stylesheet" href="../../dependencies/bootstrap/css/bootstrap.css">
|
|
7
|
+
<link rel="stylesheet" href="../../dependencies/bootstrap/font-awesome/css/font-awesome.min.css">
|
|
8
|
+
<link rel="stylesheet" href="stream-zoom.css">
|
|
9
|
+
<title>Streaming with zooming</title>
|
|
10
|
+
<script type="text/javascript" src="../../../../flashphoner.js"></script>
|
|
11
|
+
<script type="text/javascript" src="../../dependencies/js/utils.js"></script>
|
|
12
|
+
|
|
13
|
+
<script type="text/javascript" src="stream-zoom.js"></script>
|
|
14
|
+
</head>
|
|
15
|
+
<body onload="init_page()">
|
|
16
|
+
<div class="container">
|
|
17
|
+
<div class="row">
|
|
18
|
+
|
|
19
|
+
<h2 class="text-center col-sm-9">Streaming with zooming</h2>
|
|
20
|
+
|
|
21
|
+
<h2 id="notifyFlash" class="text-danger"></h2>
|
|
22
|
+
<div class="col-sm-10 text-center">
|
|
23
|
+
<div class="col-sm-5">
|
|
24
|
+
<div id="localVideo" class="fp-localVideo"></div>
|
|
25
|
+
<div class="text-center text-muted">Local</div>
|
|
26
|
+
|
|
27
|
+
</div>
|
|
28
|
+
<div class="col-sm-1 text-center" style="margin: 8% auto">
|
|
29
|
+
<i class="fa fa-arrow-right" aria-hidden="true" style="font-size: 42px"></i>
|
|
30
|
+
</div>
|
|
31
|
+
<div class="col-sm-5">
|
|
32
|
+
<div id="remoteVideo" class="fp-remoteVideo"></div>
|
|
33
|
+
<div class="text-center text-muted">Preview</div>
|
|
34
|
+
</div>
|
|
35
|
+
</div>
|
|
36
|
+
<div class="col-sm-8 text-center col-sm-offset-2" style="margin-top: 20px">
|
|
37
|
+
<div class="col-sm-2 text-right">
|
|
38
|
+
<label for="zoom">Zoom</label>
|
|
39
|
+
</div>
|
|
40
|
+
<div class="col-sm-4 text-center">
|
|
41
|
+
<input type="range" id="zoom" class="form-control" />
|
|
42
|
+
</div>
|
|
43
|
+
</div>
|
|
44
|
+
<div class="col-sm-8 text-center col-sm-offset-2" style="margin-top: 20px">
|
|
45
|
+
<div class="col-sm-6">
|
|
46
|
+
<input type="text" class="form-control" id="url" placeholder="Enter url with stream name"/>
|
|
47
|
+
</div>
|
|
48
|
+
<div class="col-sm-3 text-left">
|
|
49
|
+
<button id="publishBtn" type="button" class="btn btn-default">Start</button>
|
|
50
|
+
</div>
|
|
51
|
+
</div>
|
|
52
|
+
<div class="col-sm-9 text-center" style="margin-top: 20px">
|
|
53
|
+
<div id="status"></div>
|
|
54
|
+
<div id="info"></div>
|
|
55
|
+
</div>
|
|
56
|
+
</div>
|
|
57
|
+
</div>
|
|
58
|
+
</body>
|
|
59
|
+
</html>
|
|
@@ -0,0 +1,166 @@
|
|
|
1
|
+
const SESSION_STATUS = Flashphoner.constants.SESSION_STATUS;
|
|
2
|
+
const STREAM_STATUS = Flashphoner.constants.STREAM_STATUS;
|
|
3
|
+
let currentSession;
|
|
4
|
+
let localVideo;
|
|
5
|
+
let remoteVideo;
|
|
6
|
+
|
|
7
|
+
const init_page = function() {
|
|
8
|
+
//init api
|
|
9
|
+
try {
|
|
10
|
+
Flashphoner.init();
|
|
11
|
+
} catch(e) {
|
|
12
|
+
setText("notifyFlash", "Your browser doesn't support WebRTC technology needed for this example");
|
|
13
|
+
return;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
//local and remote displays
|
|
17
|
+
localVideo = document.getElementById("localVideo");
|
|
18
|
+
remoteVideo = document.getElementById("remoteVideo");
|
|
19
|
+
|
|
20
|
+
setValue("url", setURL() + "/" + createUUID(8));
|
|
21
|
+
//set initial button callback
|
|
22
|
+
onStopped();
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
const onStarted = function(publishStream, previewStream) {
|
|
26
|
+
setHandler("publishBtn", "click", () => {stopBtnClick(previewStream);}, publishBtnClick);
|
|
27
|
+
setText("publishBtn", "Stop");
|
|
28
|
+
enableItem("publishBtn");
|
|
29
|
+
setUpZoom(publishStream);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
const onStopped = function() {
|
|
33
|
+
if (!currentSession) {
|
|
34
|
+
enableItem("url");
|
|
35
|
+
}
|
|
36
|
+
disableItem("zoom");
|
|
37
|
+
enableItem("publishBtn");
|
|
38
|
+
setHandler("publishBtn", "click", publishBtnClick, stopBtnClick);
|
|
39
|
+
setText("publishBtn", "Start");
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
const publishBtnClick = function() {
|
|
43
|
+
disableItem("publishBtn");
|
|
44
|
+
start();
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
const stopBtnClick = function(previewStream) {
|
|
48
|
+
disableItem("publishBtn");
|
|
49
|
+
disableItem("zoom");
|
|
50
|
+
if (previewStream) {
|
|
51
|
+
previewStream.stop();
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
const start = function() {
|
|
56
|
+
//check if we already have session
|
|
57
|
+
if (currentSession) {
|
|
58
|
+
startStreaming(currentSession);
|
|
59
|
+
} else {
|
|
60
|
+
//create session
|
|
61
|
+
let url = getValue("url");
|
|
62
|
+
console.log("Create new session with url " + url);
|
|
63
|
+
Flashphoner.createSession({urlServer: url}).on(SESSION_STATUS.ESTABLISHED, function(session){
|
|
64
|
+
//session connected, start streaming
|
|
65
|
+
currentSession = session;
|
|
66
|
+
startStreaming(session);
|
|
67
|
+
}).on(SESSION_STATUS.DISCONNECTED, function(){
|
|
68
|
+
setStatus(SESSION_STATUS.DISCONNECTED);
|
|
69
|
+
currentSession = null;
|
|
70
|
+
onStopped();
|
|
71
|
+
}).on(SESSION_STATUS.FAILED, function(){
|
|
72
|
+
setStatus(SESSION_STATUS.FAILED);
|
|
73
|
+
currentSession = null;
|
|
74
|
+
onStopped();
|
|
75
|
+
});
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
const startStreaming = function(session) {
|
|
80
|
+
let streamName = getValue("url").split('/')[3];
|
|
81
|
+
disableItem("url");
|
|
82
|
+
|
|
83
|
+
session.createStream({
|
|
84
|
+
name: streamName,
|
|
85
|
+
display: localVideo,
|
|
86
|
+
constraints: {
|
|
87
|
+
video: {
|
|
88
|
+
zoom: true
|
|
89
|
+
},
|
|
90
|
+
audio: true
|
|
91
|
+
}
|
|
92
|
+
}).on(STREAM_STATUS.PUBLISHING, function(publishStream){
|
|
93
|
+
setStatus(STREAM_STATUS.PUBLISHING);
|
|
94
|
+
//play preview
|
|
95
|
+
session.createStream({
|
|
96
|
+
name: streamName,
|
|
97
|
+
display: remoteVideo
|
|
98
|
+
}).on(STREAM_STATUS.PLAYING, function(previewStream){
|
|
99
|
+
//enable stop button
|
|
100
|
+
onStarted(publishStream, previewStream);
|
|
101
|
+
}).on(STREAM_STATUS.STOPPED, function(){
|
|
102
|
+
publishStream.stop();
|
|
103
|
+
}).on(STREAM_STATUS.FAILED, function(stream){
|
|
104
|
+
//preview failed, stop publishStream
|
|
105
|
+
if (publishStream.status() === STREAM_STATUS.PUBLISHING) {
|
|
106
|
+
setStatus(STREAM_STATUS.FAILED, stream);
|
|
107
|
+
publishStream.stop();
|
|
108
|
+
}
|
|
109
|
+
}).play();
|
|
110
|
+
}).on(STREAM_STATUS.UNPUBLISHED, function(){
|
|
111
|
+
setStatus(STREAM_STATUS.UNPUBLISHED);
|
|
112
|
+
//enable start button
|
|
113
|
+
onStopped();
|
|
114
|
+
}).on(STREAM_STATUS.FAILED, function(stream){
|
|
115
|
+
setStatus(STREAM_STATUS.FAILED, stream);
|
|
116
|
+
//enable start button
|
|
117
|
+
onStopped();
|
|
118
|
+
}).publish();
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
const setUpZoom = function(publishStream) {
|
|
122
|
+
// Check if zoom capabilities available
|
|
123
|
+
if (publishStream) {
|
|
124
|
+
let zoom = document.getElementById("zoom");
|
|
125
|
+
let zoomCapabilities = publishStream.getZoomCapabilities();
|
|
126
|
+
|
|
127
|
+
if (zoomCapabilities) {
|
|
128
|
+
// Set up zoom control
|
|
129
|
+
setText("info", "Zoom can be used with the camera");
|
|
130
|
+
setAttribute("info", "class", "text-muted");
|
|
131
|
+
zoom.min = zoomCapabilities.min;
|
|
132
|
+
zoom.max = zoomCapabilities.max;
|
|
133
|
+
zoom.step = zoomCapabilities.step;
|
|
134
|
+
zoom.value = zoomCapabilities.value;
|
|
135
|
+
zoom.oninput = async function(event) {
|
|
136
|
+
await publishStream.setZoom(event.target.value);
|
|
137
|
+
console.log("Zoom value: " + publishStream.getZoom());
|
|
138
|
+
};
|
|
139
|
+
enableItem("zoom");
|
|
140
|
+
} else {
|
|
141
|
+
setText("info", "Zoom can't be used with the camera");
|
|
142
|
+
setAttribute("info", "class", "text-danger");
|
|
143
|
+
}
|
|
144
|
+
}
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
// Display connection or local stream status
|
|
148
|
+
const setStatus = function(status, stream) {
|
|
149
|
+
setText("status", status);
|
|
150
|
+
setAttribute("status", "class", "")
|
|
151
|
+
if (status === "PUBLISHING") {
|
|
152
|
+
setAttribute("status","class", "text-success");
|
|
153
|
+
setAttribute("info","class", "text-muted");
|
|
154
|
+
setText("info", "");
|
|
155
|
+
} else if (status === "DISCONNECTED" || status === "UNPUBLISHED") {
|
|
156
|
+
setAttribute("info","class", "text-muted");
|
|
157
|
+
setAttribute("status","class", "text-muted");
|
|
158
|
+
setText("info", "");
|
|
159
|
+
} else if (status === "FAILED") {
|
|
160
|
+
setAttribute("status","class", "text-danger");
|
|
161
|
+
if (stream) {
|
|
162
|
+
setText("info", stream.getInfo());
|
|
163
|
+
setAttribute("info","class", "text-muted");
|
|
164
|
+
}
|
|
165
|
+
}
|
|
166
|
+
}
|