kurento_rails 0.1.1 → 0.1.4
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +1 -0
- data/Rakefile +2 -1
- data/docs/docco.css +518 -0
- data/docs/kurento-rails.html +709 -0
- data/docs/public/fonts/aller-bold.eot +0 -0
- data/docs/public/fonts/aller-bold.ttf +0 -0
- data/docs/public/fonts/aller-bold.woff +0 -0
- data/docs/public/fonts/aller-light.eot +0 -0
- data/docs/public/fonts/aller-light.ttf +0 -0
- data/docs/public/fonts/aller-light.woff +0 -0
- data/docs/public/fonts/roboto-black.eot +0 -0
- data/docs/public/fonts/roboto-black.ttf +0 -0
- data/docs/public/fonts/roboto-black.woff +0 -0
- data/docs/public/stylesheets/normalize.css +375 -0
- data/lib/generators/kurento_rails/templates/javascript/kurento-rails-js/kurento-rails.js +11 -5
- data/lib/kurento_rails/version.rb +1 -1
- data/src/kurento-rails.coffee +8 -2
- metadata +14 -2
|
@@ -0,0 +1,709 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
|
|
3
|
+
<html>
|
|
4
|
+
<head>
|
|
5
|
+
<title>Kurento Rails Javascript Client</title>
|
|
6
|
+
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
|
7
|
+
<meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
|
|
8
|
+
<link rel="stylesheet" media="all" href="docco.css" />
|
|
9
|
+
</head>
|
|
10
|
+
<body>
|
|
11
|
+
<div id="container">
|
|
12
|
+
<div id="background"></div>
|
|
13
|
+
|
|
14
|
+
<ul class="sections">
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
<li id="section-1">
|
|
19
|
+
<div class="annotation">
|
|
20
|
+
|
|
21
|
+
<div class="pilwrap ">
|
|
22
|
+
<a class="pilcrow" href="#section-1">¶</a>
|
|
23
|
+
</div>
|
|
24
|
+
<h1 id="kurento-rails-javascript-client">Kurento Rails Javascript Client</h1>
|
|
25
|
+
<p>Notes:</p>
|
|
26
|
+
<pre><code>- Make sure that the url you pass to store video files <span class="hljs-keyword">in</span> has sufficient space <span class="hljs-keyword">for</span> the videos. Digital Ocean servers aren<span class="hljs-string">'t going to cut it under heavy load.
|
|
27
|
+
- All of the functions in the StreamingHelper class take a callback with the signature function(error, object). Error will be null if the function call was successful.</span>
|
|
28
|
+
</code></pre>
|
|
29
|
+
</div>
|
|
30
|
+
|
|
31
|
+
<div class="content"><div class='highlight'><pre>
|
|
32
|
+
|
|
33
|
+
kurentoRailsHelpers = {}
|
|
34
|
+
|
|
35
|
+
kurentoRailsHelpers.getRailsUrlFromBrowser = <span class="hljs-function"><span class="hljs-params">()</span> =></span> <span class="hljs-string">"<span class="hljs-subst">#{location.hostname + (<span class="hljs-keyword">if</span> location.port <span class="hljs-keyword">then</span> <span class="hljs-string">':'</span> + location.port <span class="hljs-keyword">else</span> <span class="hljs-string">''</span>)}</span>/websocket"</span>
|
|
36
|
+
|
|
37
|
+
kurentoRailsHelpers.generateKurentoVideoUrl = <span class="hljs-function"><span class="hljs-params">(baseFileLocation, videoName)</span> =></span>
|
|
38
|
+
date = <span class="hljs-keyword">new</span> Date()
|
|
39
|
+
dateString = <span class="hljs-string">"<span class="hljs-subst">#{date.getMonth() + <span class="hljs-number">1</span>}</span>-<span class="hljs-subst">#{date.getDate()}</span>-<span class="hljs-subst">#{date.getFullYear()}</span>_<span class="hljs-subst">#{date.getHours()}</span>:<span class="hljs-subst">#{date.getMinutes()}</span>:<span class="hljs-subst">#{date.getSeconds()}</span>"</span>
|
|
40
|
+
<span class="hljs-keyword">return</span> <span class="hljs-string">"<span class="hljs-subst">#{baseFileLocation}</span>/<span class="hljs-subst">#{encodeURIComponent(videoName.toLowerCase().replace(<span class="hljs-regexp">/\s/g</span>, <span class="hljs-string">'-'</span>))}</span>-<span class="hljs-subst">#{dateString}</span>.webm"</span>
|
|
41
|
+
|
|
42
|
+
kurentoRailsHelpers.onIceCandidate = <span class="hljs-function"><span class="hljs-params">(webRtcEndpoint, webRtcPeer, onError)</span> =></span>
|
|
43
|
+
webRtcPeer.<span class="hljs-literal">on</span> <span class="hljs-string">'icecandidate'</span>, <span class="hljs-function"><span class="hljs-params">(candidate)</span> =></span>
|
|
44
|
+
candidate = kurentoClient.register.complexTypes.IceCandidate(candidate)
|
|
45
|
+
webRtcEndpoint.addIceCandidate candidate, onError
|
|
46
|
+
webRtcEndpoint.<span class="hljs-literal">on</span> <span class="hljs-string">'OnIceCandidate'</span>, <span class="hljs-function"><span class="hljs-params">(event)</span> =></span>
|
|
47
|
+
webRtcPeer.addIceCandidate event.candidate, onError
|
|
48
|
+
|
|
49
|
+
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">StreamingHelper</span></span></pre></div></div>
|
|
50
|
+
|
|
51
|
+
</li>
|
|
52
|
+
|
|
53
|
+
|
|
54
|
+
<li id="section-2">
|
|
55
|
+
<div class="annotation">
|
|
56
|
+
|
|
57
|
+
<div class="pilwrap ">
|
|
58
|
+
<a class="pilcrow" href="#section-2">¶</a>
|
|
59
|
+
</div>
|
|
60
|
+
<h2 id="constructor-give-the-urls-for-the-rails-server-this-page-was-served-from-as-well-as-the-kurento-server-we-will-be-streaming-to-and-from">Constructor - give the urls for the rails server this page was served from, as well as the kurento server we will be streaming to and from</h2>
|
|
61
|
+
|
|
62
|
+
</div>
|
|
63
|
+
|
|
64
|
+
<div class="content"><div class='highlight'><pre> constructor: <span class="hljs-function"><span class="hljs-params">(@kurentoUrl, @railsUrl = kurentoRailsHelpers.getRailsUrlFromBrowser())</span> -></span>
|
|
65
|
+
@kurento = kurentoClient @kurentoUrl
|
|
66
|
+
@rails_websocket_dispatcher = <span class="hljs-keyword">new</span> WebSocketRails @railsUrl
|
|
67
|
+
@broadcast = {}
|
|
68
|
+
@view = {}</pre></div></div>
|
|
69
|
+
|
|
70
|
+
</li>
|
|
71
|
+
|
|
72
|
+
|
|
73
|
+
<li id="section-3">
|
|
74
|
+
<div class="annotation">
|
|
75
|
+
|
|
76
|
+
<div class="pilwrap ">
|
|
77
|
+
<a class="pilcrow" href="#section-3">¶</a>
|
|
78
|
+
</div>
|
|
79
|
+
<h2 id="broadcasting-functions-and-members">BROADCASTING FUNCTIONS AND MEMBERS</h2>
|
|
80
|
+
|
|
81
|
+
</div>
|
|
82
|
+
|
|
83
|
+
<div class="content"><div class='highlight'><pre> @broadcast.kurentoObjects = {}
|
|
84
|
+
@broadcast.kurentoObjects.pipeline = <span class="hljs-literal">null</span>
|
|
85
|
+
@broadcast.kurentoObjects.webRtcPeer = <span class="hljs-literal">null</span>
|
|
86
|
+
@broadcast.kurentoObjects.recorder = <span class="hljs-literal">null</span>
|
|
87
|
+
@broadcast.kurentoObjects.webRtcEndpoint = <span class="hljs-literal">null</span>
|
|
88
|
+
@broadcast.kurentoObjects.videoStreamId = <span class="hljs-literal">null</span>
|
|
89
|
+
@broadcast.kurentoObjects.currentCallback = <span class="hljs-literal">null</span>
|
|
90
|
+
<span class="hljs-function">
|
|
91
|
+
<span class="hljs-title">onBroadcastingError</span> = <span class="hljs-params">(error)</span> =></span>
|
|
92
|
+
<span class="hljs-keyword">if</span> error
|
|
93
|
+
<span class="hljs-built_in">console</span>.log <span class="hljs-string">"Broadcasting error:"</span>, error
|
|
94
|
+
@broadcast.stopBroadcasting()
|
|
95
|
+
@broadcast.kurentoObjects.currentCallback(error) <span class="hljs-keyword">if</span> @broadcast.kurentoObjects.currentCallback
|
|
96
|
+
<span class="hljs-function">
|
|
97
|
+
<span class="hljs-title">onBroadcastingOffer</span> = <span class="hljs-params">(error, offer)</span> =></span>
|
|
98
|
+
<span class="hljs-keyword">return</span> onBroadcastingError(error) <span class="hljs-keyword">if</span> error
|
|
99
|
+
@kurento.create <span class="hljs-string">'MediaPipeline'</span>, <span class="hljs-function"><span class="hljs-params">(error, pipeline)</span> =></span>
|
|
100
|
+
<span class="hljs-keyword">return</span> onBroadcastingError(error) <span class="hljs-keyword">if</span> error <span class="hljs-keyword">or</span> <span class="hljs-keyword">not</span> @broadcast.kurentoObjects.webRtcPeer
|
|
101
|
+
@broadcast.kurentoObjects.pipeline = pipeline
|
|
102
|
+
file_url = kurentoRailsHelpers.generateKurentoVideoUrl(@broadcast.kurentoObjects.baseFileLocation, @broadcast.kurentoObjects.videoName)
|
|
103
|
+
mediaElements = [
|
|
104
|
+
{type: <span class="hljs-string">'WebRtcEndpoint'</span>, params: {}}
|
|
105
|
+
{type: <span class="hljs-string">'RecorderEndpoint'</span>, params: {uri: file_url}}
|
|
106
|
+
]
|
|
107
|
+
pipeline.create mediaElements, <span class="hljs-function"><span class="hljs-params">(error, elements)</span> =></span>
|
|
108
|
+
<span class="hljs-keyword">return</span> onBroadcastingError(error) <span class="hljs-keyword">if</span> error <span class="hljs-keyword">or</span> <span class="hljs-keyword">not</span> @broadcast.kurentoObjects.pipeline
|
|
109
|
+
[@broadcast.kurentoObjects.webRtcEndpoint, @broadcast.kurentoObjects.recorder] = elements
|
|
110
|
+
kurentoRailsHelpers.onIceCandidate @broadcast.kurentoObjects.webRtcEndpoint, @broadcast.kurentoObjects.webRtcPeer, onBroadcastingError
|
|
111
|
+
@broadcast.kurentoObjects.webRtcEndpoint.processOffer offer, <span class="hljs-function"><span class="hljs-params">(error, answer)</span> =></span>
|
|
112
|
+
<span class="hljs-keyword">return</span> onBroadcastingError(error) <span class="hljs-keyword">if</span> error <span class="hljs-keyword">or</span> <span class="hljs-keyword">not</span> @broadcast.kurentoObjects.pipeline
|
|
113
|
+
@broadcast.kurentoObjects.webRtcEndpoint.gatherCandidates onBroadcastingError
|
|
114
|
+
@broadcast.kurentoObjects.webRtcPeer.processAnswer answer, onBroadcastingError
|
|
115
|
+
@broadcast.kurentoObjects.webRtcEndpoint.connect @broadcast.kurentoObjects.recorder, <span class="hljs-function"><span class="hljs-params">(error)</span> =></span>
|
|
116
|
+
<span class="hljs-keyword">return</span> onBroadcastingError(error) <span class="hljs-keyword">if</span> error <span class="hljs-keyword">or</span> <span class="hljs-keyword">not</span> @broadcast.kurentoObjects.pipeline
|
|
117
|
+
@broadcast.kurentoObjects.recorder.record (error) =>
|
|
118
|
+
<span class="hljs-keyword">return</span> onBroadcastingError(error) <span class="hljs-keyword">if</span> error <span class="hljs-keyword">or</span> <span class="hljs-keyword">not</span> @broadcast.kurentoObjects.pipeline
|
|
119
|
+
<span class="hljs-function"> <span class="hljs-title">save_to_rails_success</span> = <span class="hljs-params">(stream)</span> =></span>
|
|
120
|
+
@broadcast.kurentoObjects.videoStreamId = stream.id
|
|
121
|
+
@broadcast.kurentoObjects.currentCallback(<span class="hljs-literal">null</span>, stream) <span class="hljs-keyword">if</span> @broadcast.kurentoObjects.currentCallback
|
|
122
|
+
<span class="hljs-function"> <span class="hljs-title">save_to_rails_failure</span> = <span class="hljs-params">(stream)</span> =></span>
|
|
123
|
+
@broadcast.kurentoObjects.currentCallback(<span class="hljs-string">"Failed to save the data to rails"</span>, stream) <span class="hljs-keyword">if</span> @broadcast.kurentoObjects.currentCallback
|
|
124
|
+
streamToBroadcast =
|
|
125
|
+
name: @broadcast.kurentoObjects.videoName
|
|
126
|
+
pipeline: @broadcast.kurentoObjects.pipeline.id
|
|
127
|
+
file_url: file_url
|
|
128
|
+
sender_rtc: @broadcast.kurentoObjects.webRtcEndpoint.id
|
|
129
|
+
streaming: <span class="hljs-literal">true</span>
|
|
130
|
+
@rails_websocket_dispatcher.trigger <span class="hljs-string">'streams.broadcast'</span>, streamToBroadcast, save_to_rails_success, save_to_rails_failure</pre></div></div>
|
|
131
|
+
|
|
132
|
+
</li>
|
|
133
|
+
|
|
134
|
+
|
|
135
|
+
<li id="section-4">
|
|
136
|
+
<div class="annotation">
|
|
137
|
+
|
|
138
|
+
<div class="pilwrap ">
|
|
139
|
+
<a class="pilcrow" href="#section-4">¶</a>
|
|
140
|
+
</div>
|
|
141
|
+
<h3 id="broadcast-broadcast-">Broadcast (broadcast)</h3>
|
|
142
|
+
<p>This function can be used to send video to the kurento server. Users listening for new streams will also be notified of the new streams creation:</p>
|
|
143
|
+
<p>Parameters: </p>
|
|
144
|
+
<ul>
|
|
145
|
+
<li>videoName: string; The name of the video stream</li>
|
|
146
|
+
<li>videoElement: DOMElement; A DOM element representing an html 5 video tag</li>
|
|
147
|
+
<li>baseFileLocation: string; The file location on the kurento server (or an external file server) where files should be saved when streaming</li>
|
|
148
|
+
<li>callback: function(error, object); a function you wish to have called upon either successful completion of the streaming setup process, or on the occurence of any errors</li>
|
|
149
|
+
</ul>
|
|
150
|
+
<p>It should probably be noted that this function not only broadcasts, but also records the stream</p>
|
|
151
|
+
|
|
152
|
+
</div>
|
|
153
|
+
|
|
154
|
+
<div class="content"><div class='highlight'><pre> @broadcast.broadcast = <span class="hljs-function"><span class="hljs-params">(videoName, videoElement, baseFileLocation = <span class="hljs-string">"file:///kurento"</span>, callback = <span class="hljs-literal">null</span>)</span> =></span>
|
|
155
|
+
@broadcast.kurentoObjects.currentCallback = callback
|
|
156
|
+
@broadcast.kurentoObjects.baseFileLocation = baseFileLocation
|
|
157
|
+
@broadcast.kurentoObjects.videoName = videoName
|
|
158
|
+
<span class="hljs-keyword">return</span> onBroadcastingError(<span class="hljs-string">"You must pass in a valid video tag"</span>) <span class="hljs-keyword">if</span> videoElement <span class="hljs-keyword">is</span> <span class="hljs-literal">null</span> <span class="hljs-keyword">or</span> $(videoElement).prop(<span class="hljs-string">"tagName"</span>).toLowerCase().trim() <span class="hljs-keyword">is</span> <span class="hljs-keyword">not</span> <span class="hljs-string">"video"</span>
|
|
159
|
+
videoElement = $(videoElement)[<span class="hljs-number">0</span>] <span class="hljs-comment"># a little fix to make this work if they used jquery to get the element</span>
|
|
160
|
+
options = { localVideo: videoElement }
|
|
161
|
+
@broadcast.kurentoObjects.webRtcPeer = kurentoUtils.WebRtcPeer.WebRtcPeerSendonly options, <span class="hljs-function"><span class="hljs-params">(error)</span> -></span>
|
|
162
|
+
<span class="hljs-keyword">return</span> onBroadcastingError(error) <span class="hljs-keyword">if</span> error
|
|
163
|
+
<span class="hljs-keyword">this</span>.generateOffer(onBroadcastingOffer)</pre></div></div>
|
|
164
|
+
|
|
165
|
+
</li>
|
|
166
|
+
|
|
167
|
+
|
|
168
|
+
<li id="section-5">
|
|
169
|
+
<div class="annotation">
|
|
170
|
+
|
|
171
|
+
<div class="pilwrap ">
|
|
172
|
+
<a class="pilcrow" href="#section-5">¶</a>
|
|
173
|
+
</div>
|
|
174
|
+
<h3 id="stop-broadcasting-stopbroadcasting-">Stop Broadcasting (stopBroadcasting)</h3>
|
|
175
|
+
<p>This function can be used to stop transmitting video to the kurento server. Users listening for stream changes will be notified of its completion, as will users listening for changes on this stream.</p>
|
|
176
|
+
<p>Parameters:</p>
|
|
177
|
+
<ul>
|
|
178
|
+
<li>callback: function(error, object); a function you wish for us to call when we stop broadcasting successfully, or when an error occurs</li>
|
|
179
|
+
</ul>
|
|
180
|
+
|
|
181
|
+
</div>
|
|
182
|
+
|
|
183
|
+
<div class="content"><div class='highlight'><pre> @broadcast.stopBroadcasting = <span class="hljs-function"><span class="hljs-params">(callback = <span class="hljs-literal">null</span>)</span> =></span>
|
|
184
|
+
<span class="hljs-function"> <span class="hljs-title">successfully_notified_rails</span> = <span class="hljs-params">(stream)</span> =></span>
|
|
185
|
+
@broadcast.kurentoObjects.videoStreamId = <span class="hljs-literal">null</span>
|
|
186
|
+
callback() <span class="hljs-keyword">if</span> callback
|
|
187
|
+
<span class="hljs-function"> <span class="hljs-title">failed_to_notify_rails</span> = <span class="hljs-params">(stream)</span> =></span>
|
|
188
|
+
<span class="hljs-built_in">console</span>.log <span class="hljs-string">"Unable to update video stream status in rails"</span>
|
|
189
|
+
callback(<span class="hljs-string">"Unable to update video stream status in rails"</span>) <span class="hljs-keyword">if</span> callback
|
|
190
|
+
<span class="hljs-keyword">if</span> @broadcast.kurentoObjects.recorder
|
|
191
|
+
@broadcast.kurentoObjects.recorder.stop()
|
|
192
|
+
@broadcast.kurentoObjects.recorder = <span class="hljs-literal">null</span>
|
|
193
|
+
<span class="hljs-keyword">if</span> @broadcast.kurentoObjects.webRtcEndpoint
|
|
194
|
+
@broadcast.kurentoObjects.webRtcEndpoint.release()
|
|
195
|
+
@broadcast.kurentoObjects.webRtcEndpoint = <span class="hljs-literal">null</span>
|
|
196
|
+
<span class="hljs-keyword">if</span> @broadcast.kurentoObjects.currentCallback
|
|
197
|
+
@broadcast.kurentoObjects.currentCallback = <span class="hljs-literal">null</span>
|
|
198
|
+
<span class="hljs-keyword">if</span> @broadcast.kurentoObjects.webRtcPeer
|
|
199
|
+
@broadcast.kurentoObjects.webRtcPeer.dispose()
|
|
200
|
+
@broadcast.kurentoObjects.webRtcPeer = <span class="hljs-literal">null</span>
|
|
201
|
+
<span class="hljs-keyword">if</span> @broadcast.kurentoObjects.pipeline
|
|
202
|
+
@broadcast.kurentoObjects.pipeline.release()
|
|
203
|
+
@broadcast.kurentoObjects.pipeline = <span class="hljs-literal">null</span>
|
|
204
|
+
<span class="hljs-keyword">if</span> @broadcast.kurentoObjects.videoStreamId
|
|
205
|
+
@rails_websocket_dispatcher.trigger <span class="hljs-string">'streams.stop_broadcasting'</span>, <span class="hljs-string">''</span>, successfully_notified_rails, failed_to_notify_rails
|
|
206
|
+
<span class="hljs-keyword">else</span>
|
|
207
|
+
callback() <span class="hljs-keyword">if</span> callback</pre></div></div>
|
|
208
|
+
|
|
209
|
+
</li>
|
|
210
|
+
|
|
211
|
+
|
|
212
|
+
<li id="section-6">
|
|
213
|
+
<div class="annotation">
|
|
214
|
+
|
|
215
|
+
<div class="pilwrap ">
|
|
216
|
+
<a class="pilcrow" href="#section-6">¶</a>
|
|
217
|
+
</div>
|
|
218
|
+
<h2 id="end-broadcasting-functions-and-members">END BROADCASTING FUNCTIONS AND MEMBERS</h2>
|
|
219
|
+
|
|
220
|
+
</div>
|
|
221
|
+
|
|
222
|
+
</li>
|
|
223
|
+
|
|
224
|
+
|
|
225
|
+
<li id="section-7">
|
|
226
|
+
<div class="annotation">
|
|
227
|
+
|
|
228
|
+
<div class="pilwrap ">
|
|
229
|
+
<a class="pilcrow" href="#section-7">¶</a>
|
|
230
|
+
</div>
|
|
231
|
+
<h2 id="viewing-functions-and-members">VIEWING FUNCTIONS AND MEMBERS</h2>
|
|
232
|
+
|
|
233
|
+
</div>
|
|
234
|
+
|
|
235
|
+
<div class="content"><div class='highlight'><pre> @view.live = {}
|
|
236
|
+
@view.recorded = {}
|
|
237
|
+
@view.live.kurentoObjects = {}
|
|
238
|
+
@view.recorded.kurentoObjects = {}</pre></div></div>
|
|
239
|
+
|
|
240
|
+
</li>
|
|
241
|
+
|
|
242
|
+
|
|
243
|
+
<li id="section-8">
|
|
244
|
+
<div class="annotation">
|
|
245
|
+
|
|
246
|
+
<div class="pilwrap ">
|
|
247
|
+
<a class="pilcrow" href="#section-8">¶</a>
|
|
248
|
+
</div>
|
|
249
|
+
<h3 id="get-active-streams-view-live-activestreams-">Get Active Streams (view.live.activeStreams)</h3>
|
|
250
|
+
<p>This function gets an array of all of the currently active streams and passes them back in the callback you supply
|
|
251
|
+
Parameters: </p>
|
|
252
|
+
<ul>
|
|
253
|
+
<li>callback: function(error, streamObjectArray); this function will be called once either the streams are retrieved, or an error occurs</li>
|
|
254
|
+
</ul>
|
|
255
|
+
|
|
256
|
+
</div>
|
|
257
|
+
|
|
258
|
+
<div class="content"><div class='highlight'><pre> @view.live.activeStreams = <span class="hljs-function"><span class="hljs-params">(callback = <span class="hljs-literal">null</span>, searchParams = {})</span> =></span>
|
|
259
|
+
<span class="hljs-function"> <span class="hljs-title">success</span> = <span class="hljs-params">(streams)</span> =></span>
|
|
260
|
+
callback(<span class="hljs-literal">null</span>, streams) <span class="hljs-keyword">if</span> callback
|
|
261
|
+
<span class="hljs-function"> <span class="hljs-title">error</span> = <span class="hljs-params">(streams)</span> =></span>
|
|
262
|
+
callback(<span class="hljs-string">"There was an error getting the streams"</span>, streams) <span class="hljs-keyword">if</span> callback
|
|
263
|
+
@rails_websocket_dispatcher.trigger <span class="hljs-string">'streams.active_streams'</span>, searchParams, success, error</pre></div></div>
|
|
264
|
+
|
|
265
|
+
</li>
|
|
266
|
+
|
|
267
|
+
|
|
268
|
+
<li id="section-9">
|
|
269
|
+
<div class="annotation">
|
|
270
|
+
|
|
271
|
+
<div class="pilwrap ">
|
|
272
|
+
<a class="pilcrow" href="#section-9">¶</a>
|
|
273
|
+
</div>
|
|
274
|
+
<h3 id="subscribe-to-streams-channel-view-live-subscribetostreams-">Subscribe to streams channel (view.live.subscribeToStreams)</h3>
|
|
275
|
+
<p>This function will subscribe you to the streams channel on the rails server. Every time a new stream becomes active, the new stream handler you pass in will be called. Every time a stream terminates, the stream deactivated handler you pass in will be called. Both handlers should take the form of function(streamObject)</p>
|
|
276
|
+
|
|
277
|
+
</div>
|
|
278
|
+
|
|
279
|
+
<div class="content"><div class='highlight'><pre> @view.live.subscribeToStreams = <span class="hljs-function"><span class="hljs-params">(newStreamHandler, streamDeactivatedHandler)</span> =></span>
|
|
280
|
+
@view.live.createChannel <span class="hljs-string">'video_streams'</span>, {<span class="hljs-string">'new'</span>: newStreamHandler, <span class="hljs-string">'remove'</span>: streamDeactivatedHandler}</pre></div></div>
|
|
281
|
+
|
|
282
|
+
</li>
|
|
283
|
+
|
|
284
|
+
|
|
285
|
+
<li id="section-10">
|
|
286
|
+
<div class="annotation">
|
|
287
|
+
|
|
288
|
+
<div class="pilwrap ">
|
|
289
|
+
<a class="pilcrow" href="#section-10">¶</a>
|
|
290
|
+
</div>
|
|
291
|
+
<h3 id="create-custom-channel-view-live-createchannel-">Create custom channel (view.live.createChannel)</h3>
|
|
292
|
+
<p>This function will create a channel and subscribe you to it. The events parameter should be an object, where all of the keys are the names of the events (use quotes around these so that the keys work correctly with underscores and dashes and such), and the values are the handler function to be called when that event is triggered. Each handler should have have the appropriate number of arguments, for however you plan to trigger it.</p>
|
|
293
|
+
|
|
294
|
+
</div>
|
|
295
|
+
|
|
296
|
+
<div class="content"><div class='highlight'><pre> @view.live.createChannel = <span class="hljs-function"><span class="hljs-params">(channelName, events)</span> =></span>
|
|
297
|
+
channel = @rails_websocket_dispatcher.subscribe channelName
|
|
298
|
+
channel.bind eventName, eventHandler <span class="hljs-keyword">for</span> own eventName, eventHandler <span class="hljs-keyword">of</span> events</pre></div></div>
|
|
299
|
+
|
|
300
|
+
</li>
|
|
301
|
+
|
|
302
|
+
|
|
303
|
+
<li id="section-11">
|
|
304
|
+
<div class="annotation">
|
|
305
|
+
|
|
306
|
+
<div class="pilwrap ">
|
|
307
|
+
<a class="pilcrow" href="#section-11">¶</a>
|
|
308
|
+
</div>
|
|
309
|
+
<h3 id="trigger-channel-event-view-live-triggerchannelevent-">Trigger channel event (view.live.triggerChannelEvent)</h3>
|
|
310
|
+
<p>This function allows you to manually trigger a channel event from the client on any channel you would like. Any other clients who are subscribed to that event will receive the event and handle it however they’ve registered to do so. </p>
|
|
311
|
+
|
|
312
|
+
</div>
|
|
313
|
+
|
|
314
|
+
<div class="content"><div class='highlight'><pre> @view.live.triggerChannelEvent = <span class="hljs-function"><span class="hljs-params">(channelName, eventName, objectToSend)</span> =></span>
|
|
315
|
+
channel = @rails_websocket_dispatcher.subscribe channelName
|
|
316
|
+
channel.trigger eventName, objectToSend</pre></div></div>
|
|
317
|
+
|
|
318
|
+
</li>
|
|
319
|
+
|
|
320
|
+
|
|
321
|
+
<li id="section-12">
|
|
322
|
+
<div class="annotation">
|
|
323
|
+
|
|
324
|
+
<div class="pilwrap ">
|
|
325
|
+
<a class="pilcrow" href="#section-12">¶</a>
|
|
326
|
+
</div>
|
|
327
|
+
<h3 id="subscribe-to-the-channel-for-a-particular-video-stream-view-live-onendofstream-">Subscribe to the channel for a particular video stream (view.live.onEndOfStream)</h3>
|
|
328
|
+
<p>This function allows you to receive notifications when a video stream ends. When the stream ends, your endOfStreamHandler function (which should have the signature of function(streamObject)) will be called.</p>
|
|
329
|
+
<p>Parameters:</p>
|
|
330
|
+
<ul>
|
|
331
|
+
<li>stream: streamObject; This is the same thing that is returned by the active streams method. Alternatively, you can pass in a regular old javascript object, so long as it has an id property.</li>
|
|
332
|
+
<li>endOfStreamHandler: function(streamObject); This function will be called when the specified stream ends.</li>
|
|
333
|
+
</ul>
|
|
334
|
+
|
|
335
|
+
</div>
|
|
336
|
+
|
|
337
|
+
<div class="content"><div class='highlight'><pre> @view.live.onEndOfStream = <span class="hljs-function"><span class="hljs-params">(stream, endOfStreamHandler)</span> =></span>
|
|
338
|
+
channel = @rails_websocket_dispatcher.subscribe <span class="hljs-string">"stream-<span class="hljs-subst">#{stream.id}</span>"</span>
|
|
339
|
+
channel.bind <span class="hljs-string">'end-of-stream'</span>, <span class="hljs-function"><span class="hljs-params">(updated_stream)</span> =></span>
|
|
340
|
+
@view.live.stopViewing()
|
|
341
|
+
endOfStreamHandler(updated_stream)
|
|
342
|
+
<span class="hljs-function">
|
|
343
|
+
<span class="hljs-title">onLiveViewError</span> = <span class="hljs-params">(error)</span> =></span>
|
|
344
|
+
<span class="hljs-keyword">if</span> error
|
|
345
|
+
<span class="hljs-built_in">console</span>.log <span class="hljs-string">"Error!"</span>, error
|
|
346
|
+
@view.live.stopViewing()
|
|
347
|
+
@view.live.kurentoObjects.callback(error) <span class="hljs-keyword">if</span> @view.live.kurentoObjects.callback
|
|
348
|
+
<span class="hljs-function">
|
|
349
|
+
<span class="hljs-title">onLiveViewOffer</span> = <span class="hljs-params">(error, offer)</span> =></span>
|
|
350
|
+
<span class="hljs-keyword">return</span> onLiveViewError(error) <span class="hljs-keyword">if</span> error
|
|
351
|
+
<span class="hljs-keyword">if</span> @view.live.kurentoObjects.pipeline <span class="hljs-keyword">and</span> @view.live.kurentoObjects.presenterWebRtcEndpoint
|
|
352
|
+
[pipeline, presenterEndpoint] = [@view.live.kurentoObjects.pipeline, @view.live.kurentoObjects.presenterWebRtcEndpoint]
|
|
353
|
+
pipeline.create <span class="hljs-string">'WebRtcEndpoint'</span>, <span class="hljs-function"><span class="hljs-params">(error, endpoint)</span> =></span>
|
|
354
|
+
<span class="hljs-keyword">return</span> onLiveViewError(error) <span class="hljs-keyword">if</span> error <span class="hljs-keyword">or</span> <span class="hljs-keyword">not</span> @view.live.kurentoObjects.pipeline
|
|
355
|
+
@view.live.kurentoObjects.viewerWebRtcEndpoint = endpoint
|
|
356
|
+
kurentoRailsHelpers.onIceCandidate endpoint, @view.live.kurentoObjects.webRtcPeer, <span class="hljs-function">=></span>
|
|
357
|
+
endpoint.<span class="hljs-literal">on</span> <span class="hljs-string">'OnIceCandidate'</span>, <span class="hljs-function"><span class="hljs-params">(event)</span> =></span>
|
|
358
|
+
candidate = kurentoClient.register.complexTypes.IceCandidate event.candidate
|
|
359
|
+
|
|
360
|
+
endpoint.processOffer offer, <span class="hljs-function"><span class="hljs-params">(error, answer)</span> =></span>
|
|
361
|
+
<span class="hljs-keyword">return</span> onLiveViewError(error) <span class="hljs-keyword">if</span> error <span class="hljs-keyword">or</span> <span class="hljs-keyword">not</span> @view.live.kurentoObjects.pipeline
|
|
362
|
+
@view.live.kurentoObjects.webRtcPeer.processAnswer answer, <span class="hljs-function"><span class="hljs-params">(error)</span> =></span>
|
|
363
|
+
<span class="hljs-keyword">return</span> onLiveViewError(error) <span class="hljs-keyword">if</span> error
|
|
364
|
+
endpoint.gatherCandidates (error) =>
|
|
365
|
+
<span class="hljs-keyword">return</span> onLiveViewError(error) <span class="hljs-keyword">if</span> error
|
|
366
|
+
@view.live.kurentoObjects.presenterWebRtcEndpoint.connect endpoint, <span class="hljs-function"><span class="hljs-params">(error)</span> =></span>
|
|
367
|
+
<span class="hljs-keyword">return</span> onLiveViewError(error) <span class="hljs-keyword">if</span> error <span class="hljs-keyword">or</span> <span class="hljs-keyword">not</span> @view.live.kurentoObjects.pipeline
|
|
368
|
+
@view.live.kurentoObjects.callback(<span class="hljs-literal">null</span>, <span class="hljs-string">"Successfully started stream!"</span>) <span class="hljs-keyword">if</span> @view.live.kurentoObjects.callback</pre></div></div>
|
|
369
|
+
|
|
370
|
+
</li>
|
|
371
|
+
|
|
372
|
+
|
|
373
|
+
<li id="section-13">
|
|
374
|
+
<div class="annotation">
|
|
375
|
+
|
|
376
|
+
<div class="pilwrap ">
|
|
377
|
+
<a class="pilcrow" href="#section-13">¶</a>
|
|
378
|
+
</div>
|
|
379
|
+
<h3 id="start-viewing-view-live-startviewing-">Start Viewing (view.live.startViewing)</h3>
|
|
380
|
+
<p>This function accesses a live stream and starts it viewing. There is no error checking for if the stream is actually live, so make sure you know that it is before you start it viewing.</p>
|
|
381
|
+
|
|
382
|
+
</div>
|
|
383
|
+
|
|
384
|
+
</li>
|
|
385
|
+
|
|
386
|
+
|
|
387
|
+
<li id="section-14">
|
|
388
|
+
<div class="annotation">
|
|
389
|
+
|
|
390
|
+
<div class="pilwrap ">
|
|
391
|
+
<a class="pilcrow" href="#section-14">¶</a>
|
|
392
|
+
</div>
|
|
393
|
+
<p>Parameters:</p>
|
|
394
|
+
<ul>
|
|
395
|
+
<li>stream: streamObject; This MUST contain at the very least the fields for sender_rtc and pipeline, though a full stream object is acceptable as well.</li>
|
|
396
|
+
<li>videoElement: DOM Element; This should be an html 5 video tag
|
|
397
|
+
callback: function(error, object); The function you want to be called upon successful completion of the playback initiation process, or on error</li>
|
|
398
|
+
</ul>
|
|
399
|
+
|
|
400
|
+
</div>
|
|
401
|
+
|
|
402
|
+
<div class="content"><div class='highlight'><pre> @view.live.startViewing = <span class="hljs-function"><span class="hljs-params">(stream, videoElement, callback = <span class="hljs-literal">null</span>)</span> =></span>
|
|
403
|
+
@view.live.kurentoObjects.callback = callback
|
|
404
|
+
<span class="hljs-keyword">return</span> onLiveViewError(<span class="hljs-string">"You must pass in a valid video tag"</span>) <span class="hljs-keyword">if</span> videoElement <span class="hljs-keyword">is</span> <span class="hljs-literal">null</span> <span class="hljs-keyword">or</span> $(videoElement).prop(<span class="hljs-string">"tagName"</span>).toLowerCase().trim() <span class="hljs-keyword">is</span> <span class="hljs-keyword">not</span> <span class="hljs-string">"video"</span>
|
|
405
|
+
videoElement = $(videoElement)[<span class="hljs-number">0</span>]
|
|
406
|
+
@kurento.getMediaobjectById stream.sender_rtc, <span class="hljs-function"><span class="hljs-params">(error, webRtcEndpoint)</span> =></span>
|
|
407
|
+
<span class="hljs-keyword">return</span> onLiveViewError(error) <span class="hljs-keyword">if</span> error
|
|
408
|
+
@view.live.kurentoObjects.presenterWebRtcEndpoint = webRtcEndpoint
|
|
409
|
+
@kurento.getMediaobjectById stream.pipeline, <span class="hljs-function"><span class="hljs-params">(error, pipeline)</span> =></span>
|
|
410
|
+
<span class="hljs-keyword">return</span> onLiveViewError(error) <span class="hljs-keyword">if</span> error <span class="hljs-keyword">or</span> <span class="hljs-keyword">not</span> @view.live.kurentoObjects.presenterWebRtcEndpoint
|
|
411
|
+
@view.live.kurentoObjects.pipeline = pipeline
|
|
412
|
+
options = {remoteVideo: videoElement}
|
|
413
|
+
@view.live.kurentoObjects.webRtcPeer = kurentoUtils.WebRtcPeer.WebRtcPeerRecvonly options, <span class="hljs-function"><span class="hljs-params">(error)</span> -></span>
|
|
414
|
+
<span class="hljs-keyword">return</span> onLiveViewError(error) <span class="hljs-keyword">if</span> error
|
|
415
|
+
<span class="hljs-keyword">this</span>.generateOffer(onLiveViewOffer)</pre></div></div>
|
|
416
|
+
|
|
417
|
+
</li>
|
|
418
|
+
|
|
419
|
+
|
|
420
|
+
<li id="section-15">
|
|
421
|
+
<div class="annotation">
|
|
422
|
+
|
|
423
|
+
<div class="pilwrap ">
|
|
424
|
+
<a class="pilcrow" href="#section-15">¶</a>
|
|
425
|
+
</div>
|
|
426
|
+
<h3 id="stop-viewing-view-live-stopviewing-">Stop viewing (view.live.stopViewing)</h3>
|
|
427
|
+
<p>This function stops whatever live stream is currently playing, then calls the callback when it has successfully stopped playback. </p>
|
|
428
|
+
|
|
429
|
+
</div>
|
|
430
|
+
|
|
431
|
+
<div class="content"><div class='highlight'><pre> @view.live.stopViewing = <span class="hljs-function"><span class="hljs-params">(callback = <span class="hljs-literal">null</span>)</span> =></span>
|
|
432
|
+
<span class="hljs-keyword">if</span> @view.live.kurentoObjects.callback
|
|
433
|
+
@view.live.kurentoObjects.callback = <span class="hljs-literal">null</span>
|
|
434
|
+
<span class="hljs-keyword">if</span> @view.live.kurentoObjects.viewerWebRtcEndpoint
|
|
435
|
+
@view.live.kurentoObjects.viewerWebRtcEndpoint.release()
|
|
436
|
+
@view.live.kurentoObjects.viewerWebRtcEndpoint = <span class="hljs-literal">null</span>
|
|
437
|
+
<span class="hljs-keyword">if</span> @view.live.kurentoObjects.webRtcPeer
|
|
438
|
+
@view.live.kurentoObjects.webRtcPeer.dispose()
|
|
439
|
+
@view.live.kurentoObjects.webRtcPeer = <span class="hljs-literal">null</span>
|
|
440
|
+
@view.live.kurentoObjects.pipeline = <span class="hljs-literal">null</span> <span class="hljs-keyword">if</span> @view.live.kurentoObjects.pipeline
|
|
441
|
+
@view.live.kurentoObjects.presenterWebRtcEndpoint = <span class="hljs-literal">null</span> <span class="hljs-keyword">if</span> @view.live.kurentoObjects.presenterWebRtcEndpoint
|
|
442
|
+
callback() <span class="hljs-keyword">if</span> callback</pre></div></div>
|
|
443
|
+
|
|
444
|
+
</li>
|
|
445
|
+
|
|
446
|
+
|
|
447
|
+
<li id="section-16">
|
|
448
|
+
<div class="annotation">
|
|
449
|
+
|
|
450
|
+
<div class="pilwrap ">
|
|
451
|
+
<a class="pilcrow" href="#section-16">¶</a>
|
|
452
|
+
</div>
|
|
453
|
+
<h3 id="get-available-recorded-streams-view-recorded-availablestreams-">Get Available Recorded Streams (view.recorded.availableStreams)</h3>
|
|
454
|
+
<p>This function returns an array of all of the available stream objects. If you want to search for more specific streams, you can also do that by using the option search params object. The callback you provide will be called when either the streams are successfully retrieved, or an error occurs. Your callback should take the form of function(error, streamsArray)</p>
|
|
455
|
+
|
|
456
|
+
</div>
|
|
457
|
+
|
|
458
|
+
<div class="content"><div class='highlight'><pre> @view.recorded.availableStreams = <span class="hljs-function"><span class="hljs-params">(callback = <span class="hljs-literal">null</span>, searchParams = {})</span> =></span>
|
|
459
|
+
<span class="hljs-function"> <span class="hljs-title">success</span> = <span class="hljs-params">(streams)</span> =></span>
|
|
460
|
+
callback(<span class="hljs-literal">null</span>, streams) <span class="hljs-keyword">if</span> callback
|
|
461
|
+
<span class="hljs-function"> <span class="hljs-title">error</span> = <span class="hljs-params">(streams)</span> =></span>
|
|
462
|
+
callback(<span class="hljs-string">"There was an error getting the streams"</span>, streams) <span class="hljs-keyword">if</span> callback
|
|
463
|
+
@rails_websocket_dispatcher.trigger <span class="hljs-string">'streams.recorded_streams'</span>, searchParams, success, error
|
|
464
|
+
<span class="hljs-function">
|
|
465
|
+
<span class="hljs-title">onRecordedError</span> = <span class="hljs-params">(error)</span> =></span>
|
|
466
|
+
<span class="hljs-built_in">console</span>.log <span class="hljs-string">"Error: "</span>, error <span class="hljs-keyword">if</span> error
|
|
467
|
+
@view.recorded.stopViewing()
|
|
468
|
+
@view.recorded.kurentoObjects.callback(error) <span class="hljs-keyword">if</span> @view.recorded.kurentoObjects.callback
|
|
469
|
+
<span class="hljs-function">
|
|
470
|
+
<span class="hljs-title">onRecordedOffer</span> = <span class="hljs-params">(error, offer)</span> =></span>
|
|
471
|
+
<span class="hljs-built_in">console</span>.log <span class="hljs-string">"In the offer function"</span>
|
|
472
|
+
onRecordedError(error) <span class="hljs-keyword">if</span> error
|
|
473
|
+
@kurento.create <span class="hljs-string">'MediaPipeline'</span>, <span class="hljs-function"><span class="hljs-params">(error, pipeline)</span> =></span>
|
|
474
|
+
<span class="hljs-keyword">return</span> onRecordedError(error) <span class="hljs-keyword">if</span> error
|
|
475
|
+
@view.recorded.kurentoObjects.pipeline = pipeline
|
|
476
|
+
pipeline.create <span class="hljs-string">'WebRtcEndpoint'</span>, <span class="hljs-function"><span class="hljs-params">(error, endpoint)</span> =></span>
|
|
477
|
+
<span class="hljs-keyword">return</span> onRecordedError(error) <span class="hljs-keyword">if</span> error <span class="hljs-keyword">or</span> <span class="hljs-keyword">not</span> @view.recorded.kurentoObjects.pipeline
|
|
478
|
+
@view.recorded.kurentoObjects.webRtcEndpoint = endpoint
|
|
479
|
+
kurentoRailsHelpers.onIceCandidate endpoint, @view.recorded.kurentoObjects.webRtcPeer, <span class="hljs-function">=></span>
|
|
480
|
+
endpoint.processOffer offer, <span class="hljs-function"><span class="hljs-params">(error, answer)</span> =></span>
|
|
481
|
+
<span class="hljs-keyword">return</span> onRecordedError(error) <span class="hljs-keyword">if</span> error <span class="hljs-keyword">or</span> <span class="hljs-keyword">not</span> @view.recorded.kurentoObjects.pipeline
|
|
482
|
+
endpoint.gatherCandidates =>
|
|
483
|
+
@view.recorded.kurentoObjects.webRtcPeer.processAnswer answer
|
|
484
|
+
|
|
485
|
+
options = {uri: @view.recorded.kurentoObjects.fileUrl}
|
|
486
|
+
pipeline.create <span class="hljs-string">'PlayerEndpoint'</span>, options, <span class="hljs-function"><span class="hljs-params">(error, player)</span> =></span>
|
|
487
|
+
<span class="hljs-keyword">return</span> onRecordedError(error) <span class="hljs-keyword">if</span> error <span class="hljs-keyword">or</span> <span class="hljs-keyword">not</span> @view.recorded.kurentoObjects.pipeline
|
|
488
|
+
player.<span class="hljs-literal">on</span> <span class="hljs-string">'EndOfStream'</span>, <span class="hljs-function"><span class="hljs-params">(event)</span> =></span>
|
|
489
|
+
channel = @rails_websocket_dispatcher.subscribe <span class="hljs-string">"recorded-stream-<span class="hljs-subst">#{@view.recorded.kurentoObjects.streamId}</span>"</span>
|
|
490
|
+
channel.trigger <span class="hljs-string">'end-of-stream'</span>, @view.recorded.kurentoObjects.streamId
|
|
491
|
+
@view.recorded.stopViewing()
|
|
492
|
+
player.connect endpoint, <span class="hljs-function"><span class="hljs-params">(error)</span> =></span>
|
|
493
|
+
<span class="hljs-keyword">return</span> onRecordedError(error) <span class="hljs-keyword">if</span> error <span class="hljs-keyword">or</span> <span class="hljs-keyword">not</span> @view.recorded.kurentoObjects.pipeline
|
|
494
|
+
player.play (error) =>
|
|
495
|
+
<span class="hljs-keyword">return</span> onRecordedError(error) <span class="hljs-keyword">if</span> error <span class="hljs-keyword">or</span> <span class="hljs-keyword">not</span> @view.recorded.kurentoObjects.pipeline
|
|
496
|
+
@view.recorded.kurentoObjects.callback() <span class="hljs-keyword">if</span> @view.recorded.kurentoObjects.callback</pre></div></div>
|
|
497
|
+
|
|
498
|
+
</li>
|
|
499
|
+
|
|
500
|
+
|
|
501
|
+
<li id="section-17">
|
|
502
|
+
<div class="annotation">
|
|
503
|
+
|
|
504
|
+
<div class="pilwrap ">
|
|
505
|
+
<a class="pilcrow" href="#section-17">¶</a>
|
|
506
|
+
</div>
|
|
507
|
+
<h3 id="start-viewng-view-recorded-startviewing-">Start Viewng (view.recorded.startViewing)</h3>
|
|
508
|
+
<p>This function will allow you to start viewing a recorded video stream</p>
|
|
509
|
+
<p>Parameters:</p>
|
|
510
|
+
<ul>
|
|
511
|
+
<li>stream: streamObject; must contain at least the file url and the stream id. </li>
|
|
512
|
+
<li>videoElement: dom element; must be an html 5 video tag</li>
|
|
513
|
+
<li>callback: function(error, object)</li>
|
|
514
|
+
</ul>
|
|
515
|
+
|
|
516
|
+
</div>
|
|
517
|
+
|
|
518
|
+
<div class="content"><div class='highlight'><pre> @view.recorded.startViewing = <span class="hljs-function"><span class="hljs-params">(stream, videoElement, callback = <span class="hljs-literal">null</span>)</span> =></span>
|
|
519
|
+
<span class="hljs-built_in">console</span>.log <span class="hljs-string">"Stream"</span>, stream
|
|
520
|
+
@view.recorded.kurentoObjects.fileUrl = stream.file_url
|
|
521
|
+
@view.recorded.kurentoObjects.streamId = stream.id
|
|
522
|
+
@view.recorded.kurentoObjects.videoElement = videoElement
|
|
523
|
+
@view.recorded.kurentoObjects.callback = callback
|
|
524
|
+
<span class="hljs-keyword">return</span> onRecordedError(<span class="hljs-string">"You must pass in a valid video tag"</span>) <span class="hljs-keyword">if</span> videoElement <span class="hljs-keyword">is</span> <span class="hljs-literal">null</span> <span class="hljs-keyword">or</span> $(videoElement).prop(<span class="hljs-string">"tagName"</span>).toLowerCase().trim() <span class="hljs-keyword">is</span> <span class="hljs-keyword">not</span> <span class="hljs-string">"video"</span>
|
|
525
|
+
videoElement = $(videoElement)[<span class="hljs-number">0</span>]
|
|
526
|
+
options = {remoteVideo: videoElement}
|
|
527
|
+
@view.recorded.kurentoObjects.webRtcPeer = kurentoUtils.WebRtcPeer.WebRtcPeerRecvonly options, <span class="hljs-function"><span class="hljs-params">(error)</span> -></span>
|
|
528
|
+
<span class="hljs-keyword">return</span> onRecordedError(error) <span class="hljs-keyword">if</span> error
|
|
529
|
+
<span class="hljs-built_in">console</span>.log <span class="hljs-string">"About to generate an offer."</span>
|
|
530
|
+
<span class="hljs-keyword">this</span>.generateOffer(onRecordedOffer)</pre></div></div>
|
|
531
|
+
|
|
532
|
+
</li>
|
|
533
|
+
|
|
534
|
+
|
|
535
|
+
<li id="section-18">
|
|
536
|
+
<div class="annotation">
|
|
537
|
+
|
|
538
|
+
<div class="pilwrap ">
|
|
539
|
+
<a class="pilcrow" href="#section-18">¶</a>
|
|
540
|
+
</div>
|
|
541
|
+
<h3 id="stop-viewing-view-recorded-stopviewing-">Stop viewing (view.recorded.stopViewing)</h3>
|
|
542
|
+
<p>This function will stop playback of whatever video file is currently playing
|
|
543
|
+
It is safe to call even if no video file is playing</p>
|
|
544
|
+
|
|
545
|
+
</div>
|
|
546
|
+
|
|
547
|
+
<div class="content"><div class='highlight'><pre> @view.recorded.stopViewing = <span class="hljs-function"><span class="hljs-params">(callback = <span class="hljs-literal">null</span>)</span> =></span>
|
|
548
|
+
@view.recorded.kurentoObjects.fileUrl = <span class="hljs-literal">null</span> <span class="hljs-keyword">if</span> @view.recorded.kurentoObjects.fileUrl
|
|
549
|
+
@view.recorded.kurentoObjects.streamId = <span class="hljs-literal">null</span> <span class="hljs-keyword">if</span> @view.recorded.kurentoObjects.streamId
|
|
550
|
+
@view.recorded.kurentoObjects.callback = <span class="hljs-literal">null</span> <span class="hljs-keyword">if</span> @view.recorded.kurentoObjects.callback
|
|
551
|
+
@view.recorded.kurentoObjects.player = <span class="hljs-literal">null</span> <span class="hljs-keyword">if</span> @view.recorded.kurentoObjects.player
|
|
552
|
+
<span class="hljs-keyword">if</span> @view.recorded.kurentoObjects.videoElement
|
|
553
|
+
$(@view.recorded.kurentoObjects.videoElement).attr <span class="hljs-string">'src'</span>, <span class="hljs-string">''</span>
|
|
554
|
+
@view.recorded.kurentoObjects.videoElement = <span class="hljs-literal">null</span>
|
|
555
|
+
<span class="hljs-keyword">if</span> @view.recorded.kurentoObjects.webRtcEndpoint
|
|
556
|
+
@view.recorded.kurentoObjects.webRtcEndpoint.release()
|
|
557
|
+
@view.recorded.kurentoObjects.webRtcEndpoint = <span class="hljs-literal">null</span>
|
|
558
|
+
<span class="hljs-keyword">if</span> @view.recorded.kurentoObjects.pipeline
|
|
559
|
+
@view.recorded.kurentoObjects.pipeline.release()
|
|
560
|
+
@view.recorded.kurentoObjects.pipeline = <span class="hljs-literal">null</span>
|
|
561
|
+
callback() <span class="hljs-keyword">if</span> callback</pre></div></div>
|
|
562
|
+
|
|
563
|
+
</li>
|
|
564
|
+
|
|
565
|
+
|
|
566
|
+
<li id="section-19">
|
|
567
|
+
<div class="annotation">
|
|
568
|
+
|
|
569
|
+
<div class="pilwrap ">
|
|
570
|
+
<a class="pilcrow" href="#section-19">¶</a>
|
|
571
|
+
</div>
|
|
572
|
+
<h3 id="on-end-of-stream-view-recorded-onendofstream-">On End Of Stream (view.recorded.onEndOfStream)</h3>
|
|
573
|
+
<p>This function can be used to register an end of stream handler function for a video. The stream parameter must contain at least an id, and the endOfStreamHandler should have the signature function(streamId)</p>
|
|
574
|
+
|
|
575
|
+
</div>
|
|
576
|
+
|
|
577
|
+
<div class="content"><div class='highlight'><pre> @view.recorded.onEndOfStream = <span class="hljs-function"><span class="hljs-params">(stream, endOfStreamHandler)</span> =></span>
|
|
578
|
+
channel = @rails_websocket_dispatcher.subscribe <span class="hljs-string">"recorded-stream-<span class="hljs-subst">#{stream.id}</span>"</span>
|
|
579
|
+
channel.bind <span class="hljs-string">'end-of-stream'</span>, <span class="hljs-function"><span class="hljs-params">(streamId)</span> =></span>
|
|
580
|
+
endOfStreamHandler(streamId)</pre></div></div>
|
|
581
|
+
|
|
582
|
+
</li>
|
|
583
|
+
|
|
584
|
+
|
|
585
|
+
<li id="section-20">
|
|
586
|
+
<div class="annotation">
|
|
587
|
+
|
|
588
|
+
<div class="pilwrap ">
|
|
589
|
+
<a class="pilcrow" href="#section-20">¶</a>
|
|
590
|
+
</div>
|
|
591
|
+
<h3 id="start-viewing-view-startviewing-">Start Viewing (view.startViewing)</h3>
|
|
592
|
+
<p>This is a helper function that makes no distinction about whether the stream you want to play is live or recorded. It will determine whether it is live for you, then call the appropriate handler function. However, an additional database call is made to determine if the stream is live, so in cases where you actually know whether the stream is live or not, you should call view.live.startViewing and view.recorded.startViewing directly. The video element should be an html5 video tag, which your video will be displayed in upon successfull completion of the viewing. As usual, your callback should take the form function(error, object)</p>
|
|
593
|
+
|
|
594
|
+
</div>
|
|
595
|
+
|
|
596
|
+
<div class="content"><div class='highlight'><pre> @view.startViewing = <span class="hljs-function"><span class="hljs-params">(stream, videoElement, callback = <span class="hljs-literal">null</span>)</span> =></span>
|
|
597
|
+
<span class="hljs-function"> <span class="hljs-title">live</span> = =></span> @view.live.startViewing(stream, videoElement, callback)
|
|
598
|
+
<span class="hljs-function"> <span class="hljs-title">recorded</span> = =></span> @view.recorded.startViewing(stream, videoElement, callback)
|
|
599
|
+
@rails_websocket_dispatcher.trigger <span class="hljs-string">'streams.view'</span>, <span class="hljs-string">''</span>, live, recorded</pre></div></div>
|
|
600
|
+
|
|
601
|
+
</li>
|
|
602
|
+
|
|
603
|
+
|
|
604
|
+
<li id="section-21">
|
|
605
|
+
<div class="annotation">
|
|
606
|
+
|
|
607
|
+
<div class="pilwrap ">
|
|
608
|
+
<a class="pilcrow" href="#section-21">¶</a>
|
|
609
|
+
</div>
|
|
610
|
+
<h3 id="stop-viewing-view-stopviewing-">Stop Viewing (view.stopViewing)</h3>
|
|
611
|
+
<p>This is a helper function that makes no distinction about whether the currently playing stream is live or recorded (or even if you have one of each playing). It will stop the streams either way.</p>
|
|
612
|
+
|
|
613
|
+
</div>
|
|
614
|
+
|
|
615
|
+
<div class="content"><div class='highlight'><pre> @view.stopViewing = <span class="hljs-function"><span class="hljs-params">(callback = <span class="hljs-literal">null</span>)</span> =></span>
|
|
616
|
+
@view.live.stopViewing(callback)
|
|
617
|
+
@view.recorded.stopViewing(callback)</pre></div></div>
|
|
618
|
+
|
|
619
|
+
</li>
|
|
620
|
+
|
|
621
|
+
|
|
622
|
+
<li id="section-22">
|
|
623
|
+
<div class="annotation">
|
|
624
|
+
|
|
625
|
+
<div class="pilwrap ">
|
|
626
|
+
<a class="pilcrow" href="#section-22">¶</a>
|
|
627
|
+
</div>
|
|
628
|
+
<h3 id="on-end-of-stream-view-onendofstream-">On End of Stream (view.onEndOfStream)</h3>
|
|
629
|
+
<p>This is a helper function that makes no distinction about whether a stream is live or recorded. It will determine whether the stream is live or recorded for you, then call the correct endOfStream handler registration function. Note that this function does make an extra database call, though, so if you already know whether the stream is live or not, it will be faster to use view.live.onEndOfStream and view.recorded.endOfStream</p>
|
|
630
|
+
|
|
631
|
+
</div>
|
|
632
|
+
|
|
633
|
+
<div class="content"><div class='highlight'><pre> @view.onEndOfStream = <span class="hljs-function"><span class="hljs-params">(stream, endOfStreamHandler)</span> =></span>
|
|
634
|
+
<span class="hljs-function"> <span class="hljs-title">live</span> = =></span> @view.live.onEndOfStream(stream, endOfStreamHandler)
|
|
635
|
+
<span class="hljs-function"> <span class="hljs-title">recorded</span> = =></span> @view.recorded.onEndOfStream(stream, endOfStreamHandler)
|
|
636
|
+
@rails_websocket_dispatcher.trigger <span class="hljs-string">'streams.view'</span>, <span class="hljs-string">''</span>, live, recorded</pre></div></div>
|
|
637
|
+
|
|
638
|
+
</li>
|
|
639
|
+
|
|
640
|
+
|
|
641
|
+
<li id="section-23">
|
|
642
|
+
<div class="annotation">
|
|
643
|
+
|
|
644
|
+
<div class="pilwrap ">
|
|
645
|
+
<a class="pilcrow" href="#section-23">¶</a>
|
|
646
|
+
</div>
|
|
647
|
+
<h3 id="currently-viewing">Currently Viewing</h3>
|
|
648
|
+
<p>This is just a simple boolean function to determine if something is currently playing
|
|
649
|
+
It returns true if the user is currently viewing either a live stream or a recorded one.
|
|
650
|
+
If the optional stream object is provided, the function will return true only if THAT specific stream is currently playing (it compares it based off of pipeline id and sender_rtc id, so make sure to pass that in).</p>
|
|
651
|
+
|
|
652
|
+
</div>
|
|
653
|
+
|
|
654
|
+
<div class="content"><div class='highlight'><pre> @view.currentlyViewing = <span class="hljs-function"><span class="hljs-params">(stream = <span class="hljs-literal">null</span>)</span> =></span>
|
|
655
|
+
<span class="hljs-keyword">if</span> stream
|
|
656
|
+
<span class="hljs-keyword">if</span> @view.live.kurentoObjects.pipeline <span class="hljs-keyword">and</span> @view.live.kurentoObjects.presenterWebRtcEndpoint
|
|
657
|
+
<span class="hljs-keyword">return</span> @view.live.kurentoObjects.pipeline.id <span class="hljs-keyword">is</span> stream.pipeline <span class="hljs-keyword">and</span> @view.live.kurentoObjects.presenterWebRtcEndpoint.id <span class="hljs-keyword">is</span> stream.sender_rtc
|
|
658
|
+
<span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> @view.recorded.kurentoObjects.pipeline
|
|
659
|
+
<span class="hljs-keyword">return</span> @view.recorded.kurentoObjects.pipeline.id <span class="hljs-keyword">is</span> stream.pipeline
|
|
660
|
+
<span class="hljs-keyword">else</span>
|
|
661
|
+
<span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>
|
|
662
|
+
<span class="hljs-keyword">return</span> @view.live.kurentoObjects.pipeline <span class="hljs-keyword">or</span> @view.recorded.kurentoObjects.pipeline</pre></div></div>
|
|
663
|
+
|
|
664
|
+
</li>
|
|
665
|
+
|
|
666
|
+
|
|
667
|
+
<li id="section-24">
|
|
668
|
+
<div class="annotation">
|
|
669
|
+
|
|
670
|
+
<div class="pilwrap ">
|
|
671
|
+
<a class="pilcrow" href="#section-24">¶</a>
|
|
672
|
+
</div>
|
|
673
|
+
<h2 id="end-viewing-functions-and-members">END VIEWING FUNCTIONS AND MEMBERS</h2>
|
|
674
|
+
|
|
675
|
+
</div>
|
|
676
|
+
|
|
677
|
+
</li>
|
|
678
|
+
|
|
679
|
+
|
|
680
|
+
<li id="section-25">
|
|
681
|
+
<div class="annotation">
|
|
682
|
+
|
|
683
|
+
<div class="pilwrap ">
|
|
684
|
+
<a class="pilcrow" href="#section-25">¶</a>
|
|
685
|
+
</div>
|
|
686
|
+
<h2 id="and-finally-a-universal-page-unload-handler">AND FINALLY, A UNIVERSAL PAGE UNLOAD HANDLER</h2>
|
|
687
|
+
<p>I put this on a timeout of like 2 seconds so that if the user decides to register any page unload handlers, we won’t be interfering with those, and they won’t be overwriting our handlers</p>
|
|
688
|
+
|
|
689
|
+
</div>
|
|
690
|
+
|
|
691
|
+
<div class="content"><div class='highlight'><pre><span class="hljs-function"> <span class="hljs-title">timeoutFunction</span> = =></span>
|
|
692
|
+
<span class="hljs-built_in">window</span>.addEventListener(<span class="hljs-string">'unload'</span>, <span class="hljs-function">=></span>
|
|
693
|
+
@broadcast.stopBroadcasting()
|
|
694
|
+
@view.stopViewing()
|
|
695
|
+
@kurento.close() <span class="hljs-keyword">if</span> @kurento
|
|
696
|
+
@rails_websocket_dispatcher.disconnect() <span class="hljs-keyword">if</span> @rails_websocket_dispatcher
|
|
697
|
+
)
|
|
698
|
+
setTimeout timeoutFunction, <span class="hljs-number">2000</span>
|
|
699
|
+
<span class="hljs-keyword">return</span> @
|
|
700
|
+
|
|
701
|
+
<span class="hljs-built_in">window</span>.createStreamingHelper = <span class="hljs-function"><span class="hljs-params">(kurento_url, rails_url)</span> =></span>
|
|
702
|
+
<span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> StreamingHelper(kurento_url, rails_url)</pre></div></div>
|
|
703
|
+
|
|
704
|
+
</li>
|
|
705
|
+
|
|
706
|
+
</ul>
|
|
707
|
+
</div>
|
|
708
|
+
</body>
|
|
709
|
+
</html>
|