├── .bowerrc
├── .gitignore
├── API.md
├── DEMOS.md
├── GETTING_STARTED.md
├── LICENSE
├── PRICING.md
├── README.md
├── bower.json
├── demos
    ├── README.md
    ├── castify-duration
    │   └── castify-duration.html
    ├── castify-icons
    │   └── castify-icons.html
    ├── castify-recorder
    │   └── castify-recorder.html
    ├── castify-share-player
    │   └── castify-share-player.html
    ├── castify-start-button
    │   └── castify-start-button.html
    ├── in-site
    │   ├── README.md
    │   └── in-site.html
    └── simple
    │   ├── README.md
    │   └── simple.html
├── publish.sh
└── screencastify-logo-large.png


/.bowerrc:
--------------------------------------------------------------------------------
1 | {
2 |     "directory": "demos/bower_components"
3 | }
4 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | *.swp
2 | .idea
3 | demos/bower_components/
4 | 


--------------------------------------------------------------------------------
/API.md:
--------------------------------------------------------------------------------
  1 | # ![](screencastify-logo-large.png)API Reference
  2 | [About](README.md) / [Getting started](GETTING_STARTED.md) / [**API**](API.md) / [Demos](DEMOS.md) / [Pricing](PRICING.md)
  3 | <a name="screencastify"></a>
  4 | 
  5 | ## screencastify
  6 | 
  7 | * [screencastify](#screencastify)
  8 |     * _static_
  9 |         * [.isAppConnected](#screencastify.isAppConnected) ⇒ <code>Promise</code>
 10 |         * [.setUserExpiryDate](#screencastify.setUserExpiryDate) ⇒ <code>Promise</code>
 11 |         * [.setUserShareUrl](#screencastify.setUserShareUrl) ⇒ <code>Promise</code>
 12 |         * [.storeFileInLibrary](#screencastify.storeFileInLibrary) ⇒ <code>Promise</code>
 13 |         * [.getFile](#screencastify.getFile) ⇒ <code>Promise</code>
 14 |         * [.connectApp](#screencastify.connectApp) ⇒ <code>Promise</code>
 15 |         * [.isInstalled](#screencastify.isInstalled) ⇒ <code>Promise</code>
 16 |         * [.Recorder()](#screencastify.Recorder)
 17 |             * [.state](#screencastify.Recorder+state) : <code>String</code>
 18 |             * [.time](#screencastify.Recorder+time) : <code>number</code>
 19 |             * [.onStateChanged](#screencastify.Recorder+onStateChanged) : <code>function</code>
 20 |             * [.onTimeChanged](#screencastify.Recorder+onTimeChanged) : <code>function</code>
 21 |             * [.start](#screencastify.Recorder+start) ⇒ <code>Promise</code>
 22 |             * [.stop](#screencastify.Recorder+stop) ⇒ <code>Promise</code>
 23 |             * [.pause](#screencastify.Recorder+pause) ⇒ <code>Promise</code>
 24 |             * [.resume](#screencastify.Recorder+resume) ⇒ <code>Promise</code>
 25 |         * [.isBrowserSupported()](#screencastify.isBrowserSupported) ⇒ <code>boolean</code>
 26 |         * [.decodeStateQuery([search])](#screencastify.decodeStateQuery) ⇒ <code>Object</code>
 27 |         * [.setAppId(id)](#screencastify.setAppId)
 28 |     * _inner_
 29 |         * [~AudioConfig](#screencastify..AudioConfig) : <code>Object</code>
 30 |         * [~SizeConfig](#screencastify..SizeConfig) : <code>Object</code>
 31 |         * [~DrawingToolsConfig](#screencastify..DrawingToolsConfig) : <code>Object</code>
 32 |         * [~RecordConfig](#screencastify..RecordConfig) : <code>Object</code>
 33 |         * [~StartConfig](#screencastify..StartConfig) : <code>Object</code>
 34 | 
 35 | <a name="screencastify.isAppConnected"></a>
 36 | 
 37 | ### screencastify.isAppConnected ⇒ <code>Promise</code>
 38 | Check if App is connected. Returns false if platform is unsupported or extension not
 39 | installed.
 40 | 
 41 | **Returns**: <code>Promise</code> - that resolves with boolean result.  
 42 | <a name="screencastify.setUserExpiryDate"></a>
 43 | 
 44 | ### screencastify.setUserExpiryDate ⇒ <code>Promise</code>
 45 | Set expiry date for user of paid App.
 46 | If you set the expiry date to zero (or null), the paid version will never expire for the
 47 | current user. This is the default value for all users.
 48 | For any other number, the user will fall back to the trial version after the expiry date.
 49 | Calling this function for a free app always fails.
 50 | 
 51 | **Returns**: <code>Promise</code> - resolves when done.  
 52 | **Params**
 53 | 
 54 | - date <code>Number</code> - date in ms since 1 January 1970 00:00:00 UTC or null.
 55 | 
 56 | <a name="screencastify.setUserShareUrl"></a>
 57 | 
 58 | ### screencastify.setUserShareUrl ⇒ <code>Promise</code>
 59 | Set default shareUrl for the current user. If set, the provided url overrides the shareUrl
 60 | configured in the API console for the current user.
 61 | Setting the url to null reverts the default shareUrl to the value configured in the API
 62 | console.
 63 | 
 64 | **Returns**: <code>Promise</code> - resolves when done.  
 65 | **Params**
 66 | 
 67 | - url <code>String</code> - shareUrl for current user or null.
 68 | 
 69 | <a name="screencastify.storeFileInLibrary"></a>
 70 | 
 71 | ### screencastify.storeFileInLibrary ⇒ <code>Promise</code>
 72 | Store given file in Screencastify user library.
 73 | By default recordings initiated via the API, or automatically shared recordings are not
 74 | shown in the users "Your Recordings" library.
 75 | Call this function to store such a recording there.
 76 | 
 77 | **Returns**: <code>Promise</code> - resolves when done.  
 78 | **Params**
 79 | 
 80 | - fileId <code>String</code> - file id.
 81 | - [openFile] <code>boolean</code> - open file in Screencastify when done.
 82 | 
 83 | <a name="screencastify.getFile"></a>
 84 | 
 85 | ### screencastify.getFile ⇒ <code>Promise</code>
 86 | Get metadata of given file id.
 87 | 
 88 | **Returns**: <code>Promise</code> - resolves with object.  
 89 | **Params**
 90 | 
 91 | - fileId <code>String</code> - file id.
 92 | 
 93 | **Example**  
 94 | ```js
 95 | screencastify.getFile('shared-file-id').then(function(fileInfo) {
 96 |  fileInfo = {
 97 |   duration: 150.4,  // in seconds, undefined if unknown
 98 |   file: File,
 99 |   height: 600,  // undefined if unknown
100 |   width: 800,  // undefined if unknown
101 |   id: 'shared-file-id',
102 |   title: 'Test Name',  // file title set by user
103 |   payload: 'some string',  // string set with recorder.start()
104 |   inLibrary: false  // whether file is stored in user library
105 | });
106 | ```
107 | <a name="screencastify.connectApp"></a>
108 | 
109 | ### screencastify.connectApp ⇒ <code>Promise</code>
110 | Connect your App to Screencastify.
111 | This opens a popup window, so only call this in event handlers.
112 | It takes care of installing Screencastify first, if it is not installed yet.
113 | 
114 | **Returns**: <code>Promise</code> - it returns a Promise that resolves on success or rejects on error.  
115 | <a name="screencastify.isInstalled"></a>
116 | 
117 | ### screencastify.isInstalled ⇒ <code>Promise</code>
118 | Check if extension is installed.
119 | 
120 | **Returns**: <code>Promise</code> - that resolves with a version string if installed, false else.  
121 | <a name="screencastify.Recorder"></a>
122 | 
123 | ### screencastify.Recorder()
124 | Recorder controller.
125 | 
126 | 
127 | * [.Recorder()](#screencastify.Recorder)
128 |     * [.state](#screencastify.Recorder+state) : <code>String</code>
129 |     * [.time](#screencastify.Recorder+time) : <code>number</code>
130 |     * [.onStateChanged](#screencastify.Recorder+onStateChanged) : <code>function</code>
131 |     * [.onTimeChanged](#screencastify.Recorder+onTimeChanged) : <code>function</code>
132 |     * [.start](#screencastify.Recorder+start) ⇒ <code>Promise</code>
133 |     * [.stop](#screencastify.Recorder+stop) ⇒ <code>Promise</code>
134 |     * [.pause](#screencastify.Recorder+pause) ⇒ <code>Promise</code>
135 |     * [.resume](#screencastify.Recorder+resume) ⇒ <code>Promise</code>
136 | 
137 | <a name="screencastify.Recorder+state"></a>
138 | 
139 | #### recorder.state : <code>String</code>
140 | Current recorder state. String out of ['inactive', 'recording', 'paused'].
141 | 
142 | <a name="screencastify.Recorder+time"></a>
143 | 
144 | #### recorder.time : <code>number</code>
145 | Current recorder time in seconds.
146 | 
147 | <a name="screencastify.Recorder+onStateChanged"></a>
148 | 
149 | #### recorder.onStateChanged : <code>function</code>
150 | Set this property to a function to get notified when the recorder state changed.
151 | It's called with the new state as the only argument.
152 | 
153 | **Example**  
154 | ```js
155 | recorder.onStateChanged = function(state) {
156 |    console.log('state changed to', state);
157 |  }
158 | ```
159 | <a name="screencastify.Recorder+onTimeChanged"></a>
160 | 
161 | #### recorder.onTimeChanged : <code>function</code>
162 | Set this property to a function to get notified when the recorder time changed.
163 | It's called with the new time as the only argument.
164 | 
165 | **Example**  
166 | ```js
167 | recorder.onTimeChanged = function(time) {
168 |    console.log('time changed to', time);
169 |  }
170 | ```
171 | <a name="screencastify.Recorder+start"></a>
172 | 
173 | #### recorder.start ⇒ <code>Promise</code>
174 | Start recording.
175 | 
176 | **Returns**: <code>Promise</code> - resolves when recording has been started / rejects on errors.  
177 | **Params**
178 | 
179 | - config <code>StartConfig</code> - recording configuration.
180 | 
181 | **Example**  
182 | ```js
183 | var recorder = new screencastify.Recorder();
184 | recorder.start({
185 |     shareUrl: location.href,  // handle shared file on same page
186 |     payload: 'some string',
187 |     recordConfig: {
188 |       audio: {mic: true}
189 |     }
190 |   }).then(function() {
191 |   console.log('recording started');
192 | });
193 | ```
194 | **Example**  
195 | ```js
196 | var recorder = new screencastify.Recorder();
197 | recorder.start({
198 |     shareUrl: location.href,  // handle shared file on same page
199 |     // Record the entire screen
200 |     captureSource: 'screen',
201 |     recordConfig: {
202 |       // 3 seconds countdown
203 |       startDelay: 3,
204 |       // Limit frame rate to 15 fps
205 |       maxFps: 15,
206 |       // screen resolution will be scaled down to fit in a box of this size
207 |       maxResolution: {width: 640, height: 480},
208 |       audio: {mic: true}
209 |     }
210 |   }).then(function() {
211 |   console.log('recording started');
212 | });
213 | ```
214 | <a name="screencastify.Recorder+stop"></a>
215 | 
216 | #### recorder.stop ⇒ <code>Promise</code>
217 | Stop recording.
218 | 
219 | **Returns**: <code>Promise</code> - resolves when recording has been stopped / rejects on errors.  
220 | <a name="screencastify.Recorder+pause"></a>
221 | 
222 | #### recorder.pause ⇒ <code>Promise</code>
223 | Pause recording.
224 | 
225 | **Returns**: <code>Promise</code> - resolves when recording has been paused / rejects on errors.  
226 | <a name="screencastify.Recorder+resume"></a>
227 | 
228 | #### recorder.resume ⇒ <code>Promise</code>
229 | Resume recording after it has been paused.
230 | 
231 | **Returns**: <code>Promise</code> - resolves when recording has been resumed / rejects on errors.  
232 | <a name="screencastify.isBrowserSupported"></a>
233 | 
234 | ### screencastify.isBrowserSupported() ⇒ <code>boolean</code>
235 | Check if browser is supported.
236 | 
237 | **Returns**: <code>boolean</code> - true if supported.  
238 | <a name="screencastify.decodeStateQuery"></a>
239 | 
240 | ### screencastify.decodeStateQuery([search]) ⇒ <code>Object</code>
241 | Get decoded state query parameter.
242 | 
243 | **Returns**: <code>Object</code> - decoded state object or null.  
244 | **Params**
245 | 
246 | - [search] <code>String</code> - query string, defaults to location.search.
247 | 
248 | <a name="screencastify.setAppId"></a>
249 | 
250 | ### screencastify.setAppId(id)
251 | Set your AppId (as shown in the API Console on screencastify.com) before using any other
252 | library function.
253 | 
254 | **Params**
255 | 
256 | - id <code>String</code> - app id.
257 | 
258 | **Example**  
259 | ```js
260 | screencastify.setAppId(YOUR_APP_ID);
261 | ```
262 | <a name="screencastify..AudioConfig"></a>
263 | 
264 | ### screencastify~AudioConfig : <code>Object</code>
265 | Recording options
266 | 
267 | **Properties**
268 | 
269 | - mic <code>boolean</code> - Enable microphone recording.  
270 | - system <code>boolean</code> - Enable system/tab audio recording. Only
271 | supported on windows and ChromeOS with captureSource: 'screen'.
272 | Supported on all platforms with captureSource: 'tab_picker'.  
273 | 
274 | <a name="screencastify..SizeConfig"></a>
275 | 
276 | ### screencastify~SizeConfig : <code>Object</code>
277 | Size config object
278 | 
279 | **Properties**
280 | 
281 | - width <code>number</code> - width in pixels.  
282 | - height <code>number</code> - height in pixels.  
283 | 
284 | <a name="screencastify..DrawingToolsConfig"></a>
285 | 
286 | ### screencastify~DrawingToolsConfig : <code>Object</code>
287 | Drawing tools config
288 | 
289 | **Properties**
290 | 
291 | - showToolbox <code>boolean</code> - show drawing tools toolbar,
292 | defaults to false. Users can still toggle it with the keyboard shortcut
293 | if disabled.  
294 | 
295 | <a name="screencastify..RecordConfig"></a>
296 | 
297 | ### screencastify~RecordConfig : <code>Object</code>
298 | Recording options
299 | 
300 | **Properties**
301 | 
302 | - audio <code>AudioConfig</code> - Audio options.  
303 | - captureSource <code>String</code> - One of ['screen' or 'desktop',
304 | 'tab_picker']. 'desktop' allows the user to pick the complete screen or
305 | any window, 'screen' only allows to pick the complete screen,
306 | 'tab_picker' allows to pick a Chrome tab.  
307 | - startDelay <code>number</code> - Countdown [0, 10] in seconds before starting
308 | recording. Defaults to 0.  
309 | - maxFps <code>number</code> - FPS limit [1, 60] to use for recording.
310 | Defaults to the user setting in the extension.  
311 | - maxResolution <code>SizeConfig</code> - Resolution limit in
312 | pixels ([64, 4096] for both dimensions). Note that this is an upper limit, the actual
313 | resolution will scaled to fit into the given size. So it will usually be
314 | lower, depending on the actual, native screen resolution. Defaults to the user
315 | setting in the extension.  
316 | - audibleCountdown <code>boolean</code> - Enable audio countdown. Defaults to true.  
317 | - visualCountdown <code>boolean</code> - Enable visual countdown on
318 | drawing tools. Defaults to true.  
319 | - draw <code>DrawingToolsConfig</code> - Enable drawing tools (pen, mouse
320 | highlighting etc.) if set. Do not use drawing tools if not set.  
321 | 
322 | <a name="screencastify..StartConfig"></a>
323 | 
324 | ### screencastify~StartConfig : <code>Object</code>
325 | Start recording configuration.
326 | 
327 | **Properties**
328 | 
329 | - recordConfig <code>RecordConfig</code> - recording options.  
330 | - payload <code>String</code> - any string with a length of up to 1024 characters.  
331 | - shareUrl <code>String</code> - URL that is opened to share the resulting file.
332 | Defaults to the shareUrl configured in the API console. Required if no default is
333 | configured.  
334 | 
335 | 


--------------------------------------------------------------------------------
/DEMOS.md:
--------------------------------------------------------------------------------
1 | # ![](screencastify-logo-large.png)Demos:
2 | [About](README.md) / [Getting started](GETTING_STARTED.md) / [API](API.md) / [**Demos**](DEMOS.md) / [Pricing](PRICING.md)
3 | * [Simple API Demo](https://w69b.github.io/castify-api-docs/demos/simple/simple.html)
4 | * [In-Site Recorder Demo](https://w69b.github.io/castify-api-docs/demos/in-site/in-site.html)
5 | 


--------------------------------------------------------------------------------
/GETTING_STARTED.md:
--------------------------------------------------------------------------------
 1 | # ![](screencastify-logo-large.png)Getting started
 2 | [About](README.md) / [**Getting started**](GETTING_STARTED.md) / [API](API.md) / [Demos](DEMOS.md) / [Pricing](PRICING.md)
 3 | * Configure a new App in the
 4 | [API Console](https://www.screencastify.com/user/api_console) to get an AppId. If you only want
 5 | to control recording from your App directly and don't want your App to appear as a share option
 6 | inside Screencastify, leave the share Url empty.
 7 | * Add the API library to your page:
 8 | ```html
 9 | <script src="https://www.screencastify.com/libs-api/castify-api.js"></script>
10 | ```
11 | * Set your AppId before using any other library function:
12 | ```javascript
13 | screencastify.setAppId(YOUR_APP_ID);
14 | ```
15 | * Check if the user has your App connected/added to Screencastify:
16 | ```javascript
17 | screencastify.isAppConnected().then(function(isConnected) {
18 |   console.log('App is ' + (isConnected ? 'connected' : 'not connected'));
19 | });
20 | ```
21 | * To connect your App, call `screencastify.connectApp();` it returns a Promise
22 |   that resolves on success. This opens a popup window, so only call this in
23 |   event handlers. It takes care of installing Screencastify first, if it is
24 | not installed yet.
25 | 
26 | * When a user shares a recording with an App, Screencastify opens the share URL
27 | configured for the App in a new tab and passes the shared file ids in a
28 | JSON-encoded `state` query parameter:
29 | ```javascript
30 | // Decode the 'state' query parameter yourself or use this helper:
31 | screencastify.decodeStateQuery();
32 | > {ids: ['shared-file-id']}
33 | ```
34 | * Retrieve shared file from Screencastify:
35 | ```javascript
36 | screencastify.getFile('shared-file-id').then(function(fileInfo) {
37 |   // fileInfo = {
38 |   //   duration: 150.4,  // in seconds, undefined if unknown
39 |   //   file: File,
40 |   //   height: 600,  // undefined if unknown
41 |   //   width: 800,  // undefined if unknown
42 |   //   id: 'shared-file-id',
43 |   //   title: 'Test Name'  // file title set by user
44 |   //   payload: 'some string '  // string set with recorder.start()
45 |   // };
46 | });
47 | ```
48 | * Process file like any regular file upload.
49 | 
50 | See demos for working examples.
51 | 
52 | ## Handling shared files in a single tab.
53 | _________________________________________
54 | By default Screencastify opens the configured share URL when a file is shared
55 | with an App. In some cases you might want to avoid having a separate tab opened
56 | each time a file is shared with your app, but handle the files in an already
57 | loaded instance of your App instead. This can be achieved by returning true
58 | from the `onSharedFiles` handler. In this case Screencastify will not open a
59 | new tab but focus your Apps' tab that is already loaded instead.
60 | ```javascript
61 | screencastify.onSharedFiles = function(fileIds) {
62 |   // fileIds = ['shared-file-id'];
63 |   // Return true (or a Promise that resolves to true) from this handler to
64 |   // indicate that you handle the shared files here.
65 |   return true;
66 | }
67 | ```
68 | 
69 | ## Controlling recording
70 | ________________________
71 | Initiating recording is only available for desktop recording mode (not for cam or tab recording).
72 | ```javascript
73 | var recorder = new screencastify.Recorder();
74 | recorder.start({
75 |   recordConfig: {  // optional
76 |     captureSource: 'desktop',  // for window picker, use 'screen' for screen picker
77 |     audio: {
78 |       mic: true,
79 |       system: false
80 |     }
81 |   },
82 |   shareUrl: 'https://your page',  // URL of your page that handles shared files.
83 |   payload: 'optional arbitrary string'  // Can be retrieved in share handler.
84 | }).then(function() {
85 |   // recording has been started
86 | });
87 | ```
88 | For more details, please refer to the API reference or in site recorder demo.
89 | 
90 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
  1 |                                  Apache License
  2 |                            Version 2.0, January 2004
  3 |                         http://www.apache.org/licenses/
  4 | 
  5 |    TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
  6 | 
  7 |    1. Definitions.
  8 | 
  9 |       "License" shall mean the terms and conditions for use, reproduction,
 10 |       and distribution as defined by Sections 1 through 9 of this document.
 11 | 
 12 |       "Licensor" shall mean the copyright owner or entity authorized by
 13 |       the copyright owner that is granting the License.
 14 | 
 15 |       "Legal Entity" shall mean the union of the acting entity and all
 16 |       other entities that control, are controlled by, or are under common
 17 |       control with that entity. For the purposes of this definition,
 18 |       "control" means (i) the power, direct or indirect, to cause the
 19 |       direction or management of such entity, whether by contract or
 20 |       otherwise, or (ii) ownership of fifty percent (50%) or more of the
 21 |       outstanding shares, or (iii) beneficial ownership of such entity.
 22 | 
 23 |       "You" (or "Your") shall mean an individual or Legal Entity
 24 |       exercising permissions granted by this License.
 25 | 
 26 |       "Source" form shall mean the preferred form for making modifications,
 27 |       including but not limited to software source code, documentation
 28 |       source, and configuration files.
 29 | 
 30 |       "Object" form shall mean any form resulting from mechanical
 31 |       transformation or translation of a Source form, including but
 32 |       not limited to compiled object code, generated documentation,
 33 |       and conversions to other media types.
 34 | 
 35 |       "Work" shall mean the work of authorship, whether in Source or
 36 |       Object form, made available under the License, as indicated by a
 37 |       copyright notice that is included in or attached to the work
 38 |       (an example is provided in the Appendix below).
 39 | 
 40 |       "Derivative Works" shall mean any work, whether in Source or Object
 41 |       form, that is based on (or derived from) the Work and for which the
 42 |       editorial revisions, annotations, elaborations, or other modifications
 43 |       represent, as a whole, an original work of authorship. For the purposes
 44 |       of this License, Derivative Works shall not include works that remain
 45 |       separable from, or merely link (or bind by name) to the interfaces of,
 46 |       the Work and Derivative Works thereof.
 47 | 
 48 |       "Contribution" shall mean any work of authorship, including
 49 |       the original version of the Work and any modifications or additions
 50 |       to that Work or Derivative Works thereof, that is intentionally
 51 |       submitted to Licensor for inclusion in the Work by the copyright owner
 52 |       or by an individual or Legal Entity authorized to submit on behalf of
 53 |       the copyright owner. For the purposes of this definition, "submitted"
 54 |       means any form of electronic, verbal, or written communication sent
 55 |       to the Licensor or its representatives, including but not limited to
 56 |       communication on electronic mailing lists, source code control systems,
 57 |       and issue tracking systems that are managed by, or on behalf of, the
 58 |       Licensor for the purpose of discussing and improving the Work, but
 59 |       excluding communication that is conspicuously marked or otherwise
 60 |       designated in writing by the copyright owner as "Not a Contribution."
 61 | 
 62 |       "Contributor" shall mean Licensor and any individual or Legal Entity
 63 |       on behalf of whom a Contribution has been received by Licensor and
 64 |       subsequently incorporated within the Work.
 65 | 
 66 |    2. Grant of Copyright License. Subject to the terms and conditions of
 67 |       this License, each Contributor hereby grants to You a perpetual,
 68 |       worldwide, non-exclusive, no-charge, royalty-free, irrevocable
 69 |       copyright license to reproduce, prepare Derivative Works of,
 70 |       publicly display, publicly perform, sublicense, and distribute the
 71 |       Work and such Derivative Works in Source or Object form.
 72 | 
 73 |    3. Grant of Patent License. Subject to the terms and conditions of
 74 |       this License, each Contributor hereby grants to You a perpetual,
 75 |       worldwide, non-exclusive, no-charge, royalty-free, irrevocable
 76 |       (except as stated in this section) patent license to make, have made,
 77 |       use, offer to sell, sell, import, and otherwise transfer the Work,
 78 |       where such license applies only to those patent claims licensable
 79 |       by such Contributor that are necessarily infringed by their
 80 |       Contribution(s) alone or by combination of their Contribution(s)
 81 |       with the Work to which such Contribution(s) was submitted. If You
 82 |       institute patent litigation against any entity (including a
 83 |       cross-claim or counterclaim in a lawsuit) alleging that the Work
 84 |       or a Contribution incorporated within the Work constitutes direct
 85 |       or contributory patent infringement, then any patent licenses
 86 |       granted to You under this License for that Work shall terminate
 87 |       as of the date such litigation is filed.
 88 | 
 89 |    4. Redistribution. You may reproduce and distribute copies of the
 90 |       Work or Derivative Works thereof in any medium, with or without
 91 |       modifications, and in Source or Object form, provided that You
 92 |       meet the following conditions:
 93 | 
 94 |       (a) You must give any other recipients of the Work or
 95 |           Derivative Works a copy of this License; and
 96 | 
 97 |       (b) You must cause any modified files to carry prominent notices
 98 |           stating that You changed the files; and
 99 | 
100 |       (c) You must retain, in the Source form of any Derivative Works
101 |           that You distribute, all copyright, patent, trademark, and
102 |           attribution notices from the Source form of the Work,
103 |           excluding those notices that do not pertain to any part of
104 |           the Derivative Works; and
105 | 
106 |       (d) If the Work includes a "NOTICE" text file as part of its
107 |           distribution, then any Derivative Works that You distribute must
108 |           include a readable copy of the attribution notices contained
109 |           within such NOTICE file, excluding those notices that do not
110 |           pertain to any part of the Derivative Works, in at least one
111 |           of the following places: within a NOTICE text file distributed
112 |           as part of the Derivative Works; within the Source form or
113 |           documentation, if provided along with the Derivative Works; or,
114 |           within a display generated by the Derivative Works, if and
115 |           wherever such third-party notices normally appear. The contents
116 |           of the NOTICE file are for informational purposes only and
117 |           do not modify the License. You may add Your own attribution
118 |           notices within Derivative Works that You distribute, alongside
119 |           or as an addendum to the NOTICE text from the Work, provided
120 |           that such additional attribution notices cannot be construed
121 |           as modifying the License.
122 | 
123 |       You may add Your own copyright statement to Your modifications and
124 |       may provide additional or different license terms and conditions
125 |       for use, reproduction, or distribution of Your modifications, or
126 |       for any such Derivative Works as a whole, provided Your use,
127 |       reproduction, and distribution of the Work otherwise complies with
128 |       the conditions stated in this License.
129 | 
130 |    5. Submission of Contributions. Unless You explicitly state otherwise,
131 |       any Contribution intentionally submitted for inclusion in the Work
132 |       by You to the Licensor shall be under the terms and conditions of
133 |       this License, without any additional terms or conditions.
134 |       Notwithstanding the above, nothing herein shall supersede or modify
135 |       the terms of any separate license agreement you may have executed
136 |       with Licensor regarding such Contributions.
137 | 
138 |    6. Trademarks. This License does not grant permission to use the trade
139 |       names, trademarks, service marks, or product names of the Licensor,
140 |       except as required for reasonable and customary use in describing the
141 |       origin of the Work and reproducing the content of the NOTICE file.
142 | 
143 |    7. Disclaimer of Warranty. Unless required by applicable law or
144 |       agreed to in writing, Licensor provides the Work (and each
145 |       Contributor provides its Contributions) on an "AS IS" BASIS,
146 |       WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
147 |       implied, including, without limitation, any warranties or conditions
148 |       of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
149 |       PARTICULAR PURPOSE. You are solely responsible for determining the
150 |       appropriateness of using or redistributing the Work and assume any
151 |       risks associated with Your exercise of permissions under this License.
152 | 
153 |    8. Limitation of Liability. In no event and under no legal theory,
154 |       whether in tort (including negligence), contract, or otherwise,
155 |       unless required by applicable law (such as deliberate and grossly
156 |       negligent acts) or agreed to in writing, shall any Contributor be
157 |       liable to You for damages, including any direct, indirect, special,
158 |       incidental, or consequential damages of any character arising as a
159 |       result of this License or out of the use or inability to use the
160 |       Work (including but not limited to damages for loss of goodwill,
161 |       work stoppage, computer failure or malfunction, or any and all
162 |       other commercial damages or losses), even if such Contributor
163 |       has been advised of the possibility of such damages.
164 | 
165 |    9. Accepting Warranty or Additional Liability. While redistributing
166 |       the Work or Derivative Works thereof, You may choose to offer,
167 |       and charge a fee for, acceptance of support, warranty, indemnity,
168 |       or other liability obligations and/or rights consistent with this
169 |       License. However, in accepting such obligations, You may act only
170 |       on Your own behalf and on Your sole responsibility, not on behalf
171 |       of any other Contributor, and only if You agree to indemnify,
172 |       defend, and hold each Contributor harmless for any liability
173 |       incurred by, or claims asserted against, such Contributor by reason
174 |       of your accepting any such warranty or additional liability.
175 | 
176 |    END OF TERMS AND CONDITIONS
177 | 
178 |    APPENDIX: How to apply the Apache License to your work.
179 | 
180 |       To apply the Apache License to your work, attach the following
181 |       boilerplate notice, with the fields enclosed by brackets "{}"
182 |       replaced with your own identifying information. (Don't include
183 |       the brackets!)  The text should be enclosed in the appropriate
184 |       comment syntax for the file format. We also recommend that a
185 |       file or class name and description of purpose be included on the
186 |       same "printed page" as the copyright notice for easier
187 |       identification within third-party archives.
188 | 
189 |    Copyright {yyyy} {name of copyright owner}
190 | 
191 |    Licensed under the Apache License, Version 2.0 (the "License");
192 |    you may not use this file except in compliance with the License.
193 |    You may obtain a copy of the License at
194 | 
195 |        http://www.apache.org/licenses/LICENSE-2.0
196 | 
197 |    Unless required by applicable law or agreed to in writing, software
198 |    distributed under the License is distributed on an "AS IS" BASIS,
199 |    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
200 |    See the License for the specific language governing permissions and
201 |    limitations under the License.
202 | 
203 | 


--------------------------------------------------------------------------------
/PRICING.md:
--------------------------------------------------------------------------------
 1 | # ![](screencastify-logo-large.png)Pricing
 2 | [About](README.md) / [Getting started](GETTING_STARTED.md) / [API](API.md) / [Demos](DEMOS.md) / [**Pricing**](PRICING.md)
 3 | 
 4 | This API can be used for free.
 5 | For recordings made by users that did not purchase Screencastify, restrictions of Screencastify
 6 | Lite apply (max recording length 10 min., branded videos).
 7 | 
 8 | ## Flat pricing
 9 | The restrictions of Screencastify Lite can be removed for a flat fee for all your users. Contact
10 | sales@screencastify.com for details.
11 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Note: this API is no longer supported as of April 1st, 2021.
 2 | 
 3 | 
 4 | 
 5 | # ![](screencastify-logo-large.png)Overview
 6 | [**About**](README.md) / [Getting started](GETTING_STARTED.md) / [API](API.md) / [Demos](DEMOS.md) / [Pricing](PRICING.md)
 7 | 
 8 | 
 9 | The Screencastify API allows users to share recordings with third-party Applications/Sites from
10 | within Screencastify or (optionally) control recording from the site.
11 | 
12 | ## Sharing from within Screencastify
13 | ___
14 | Apps are shown as an additional upload target in Screencastify's share dialog.
15 | 
16 | Screencastify can also be configured to "Record for an App". This automatically shares
17 | all new recordings with the configured App. It's the responsibility of the App to handle
18 | and store such recordings.
19 | [Record for App Flow Demo Video](https://www.youtube.com/watch?v=jQMSXJE8O_s)
20 | 
21 | This is a pure client-side API, recordings are passed to Apps as regular
22 | [File](https://developer.mozilla.org/en/docs/Web/API/File) objects (like from
23 | a file picker) locally.
24 | 
25 | ## Controlling recording from the site
26 | ___
27 | The recording API allows to initiate and control record from a site. To get an idea how this
28 | works, try the
29 | [In-Site Recorder Demo.](https://w69b.github.io/castify-api-docs/demos/in-site/in-site.html)
30 | 
31 | The resulting video is shared in the same way as recordings made with the "Record for an App"
32 | feature.
33 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "castify-api-docs",
 3 |   "version": "0.1",
 4 |   "homepage": "https://github.com/screencastify/castify-api-docs",
 5 |   "authors": [
 6 |     "mb@w69b.com"
 7 |   ],
 8 |   "description": "Screencastify API Docs and Examples",
 9 |   "keywords": [
10 |     "screenrecording",
11 |     "video",
12 |     "recorder"
13 |   ],
14 |   "license": "MIT",
15 |   "ignore": [
16 |     "**/.*",
17 |     "node_modules",
18 |     "bower_components",
19 |     "test",
20 |     "tests"
21 |   ],
22 |   "dependencies": {
23 |     "iron-flex-layout": "PolymerElements/iron-flex-layout#~1.0.3",
24 |     "paper-icon-button": "PolymerElements/paper-icon-button#~1.0.3",
25 |     "paper-toolbar": "PolymerElements/paper-toolbar#~1.0.4",
26 |     "polymer": "Polymer/polymer#^1.0.0",
27 |     "iron-iconset-svg": "PolymerElements/iron-iconset-svg#^1.0.9"
28 |   }
29 | }
30 | 


--------------------------------------------------------------------------------
/demos/README.md:
--------------------------------------------------------------------------------
1 | # Demos
2 | 
3 | See `simple` and `in-site` folders for demos.
4 | 
5 | The castify-* folders contain web components used in the in-site demo.
6 | 
7 | 


--------------------------------------------------------------------------------
/demos/castify-duration/castify-duration.html:
--------------------------------------------------------------------------------
 1 | <link rel="import" href="../bower_components/polymer/polymer.html">
 2 | 
 3 | <!--
 4 | An element to renders a duration in seconds as MM:SS string.
 5 | -->
 6 | <dom-module id="castify-duration">
 7 | 
 8 |   <style>
 9 |     :host {
10 |       display: inline-block;
11 |     }
12 |   </style>
13 | 
14 |   <template>{{_format(seconds)}}</template>
15 | 
16 | </dom-module>
17 | 
18 | <script>
19 |   Polymer({
20 | 
21 |     is: 'castify-duration',
22 |     properties: {
23 |       seconds: Number
24 |     },
25 | 
26 |     /**
27 |      * Formats seconds as human time.
28 |      * @param {number=} seconds number of seconds.
29 |      * @return {string} HH:mm:ss string.
30 |      */
31 |     _format: function(seconds) {
32 |       if (typeof(seconds) !== 'number' || isNaN(seconds))
33 |         seconds = 0;
34 |       function pad(num) {
35 |         if (num < 10) return '0' + num;
36 |         else return num;
37 |       }
38 | 
39 |       var sec = Math.floor(seconds % 60);
40 |       var min = Math.floor((seconds / 60) % 60);
41 |       var result = [pad(min), pad(sec)];
42 |       var hours = Math.floor(seconds / 3600);
43 |       if (hours)
44 |         result.unshift(hours);
45 |       return result.join(':');
46 |     }
47 |   });
48 | </script>
49 | 


--------------------------------------------------------------------------------
/demos/castify-icons/castify-icons.html:
--------------------------------------------------------------------------------
 1 | <link rel="import" href="../bower_components/iron-iconset-svg/iron-iconset-svg.html">
 2 | <iron-iconset-svg name="castify" size="24">
 3 |   <svg>
 4 |     <defs>
 5 |       <g id="record">
 6 |         <circle fill="none" stroke="currentColor" stroke-width="2" cx="12" cy="12" r="11"/>
 7 |         <circle cx="12" cy="12" r="6"/>
 8 |       </g>
 9 | 
10 |       <g id="pause">
11 |         <path
12 |           d="m 4.4577017,3.0500277e-6 c 2.4695698,0 4.457706,1.0835926499723 4.457706,2.4295837499723 l 0,19.1408302 c 0,1.345991 -1.9881362,2.429588 -4.457706,2.429588 C 1.9881362,24.000005 5.3273602e-8,22.916408 5.3273602e-8,21.570417 l 0,-19.1408302 C 5.3273602e-8,1.0835957 1.9881362,3.0500277e-6 4.4577017,3.0500277e-6 Z"/>
13 |         <path
14 |           d="m 19.542296,3.0500277e-6 c 2.46957,0 4.457706,1.0835926499723 4.457706,2.4295837499723 l 0,19.1408302 c 0,1.345991 -1.988136,2.429588 -4.457706,2.429588 -2.469566,0 -4.457702,-1.083597 -4.457702,-2.429588 l 0,-19.1408302 c 0,-1.3459911 1.988136,-2.4295837499723 4.457702,-2.4295837499723 z"/>
15 |       </g>
16 | 
17 |       <g id="stop">
18 |         <rect width="24" height="24" x="0" y="0" ry="5"/>
19 |       </g>
20 |       <g id="resume">
21 |         <path d="M 3.0000002,0.16039991 24.000001,12.040001 3.0000002,23.919189 Z"/>
22 |       </g>
23 | 
24 | 
25 |     </defs>
26 |   </svg>
27 | </iron-iconset-svg>
28 | 
29 | 


--------------------------------------------------------------------------------
/demos/castify-recorder/castify-recorder.html:
--------------------------------------------------------------------------------
  1 | <link rel="import" href="../bower_components/polymer/polymer.html">
  2 | <link rel="import" href="../bower_components/paper-styles/paper-styles.html">
  3 | <link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
  4 | <link rel="import" href="../bower_components/paper-styles/color.html">
  5 | <link rel="import" href="../bower_components/iron-flex-layout/iron-flex-layout.html">
  6 | 
  7 | <link rel="import" href="../castify-start-button/castify-start-button.html">
  8 | <link rel="import" href="../castify-icons/castify-icons.html">
  9 | <link rel="import" href="../castify-duration/castify-duration.html">
 10 | 
 11 | 
 12 | <!--
 13 | An element providing a simple recorder UI.
 14 | -->
 15 | <dom-module id="castify-recorder">
 16 |   <style>
 17 | 
 18 |     :host {
 19 |       @apply(--layout-horizontal);
 20 |       @apply(--layout-center);
 21 |     }
 22 | 
 23 |     #duration {
 24 |       padding: 8px;
 25 |       text-align: center;
 26 |     }
 27 | 
 28 |     #start {
 29 |       color: var(--castify-recorder-start-color);
 30 |     }
 31 | 
 32 |     :host(:not([state="inactive"])) #start {
 33 |       display: none;
 34 |     }
 35 | 
 36 |     :host([state="inactive"]) #duration {
 37 |       display: none;
 38 |     }
 39 | 
 40 |     :host(:not([state="recording"])) #pause {
 41 |       display: none;
 42 |     }
 43 | 
 44 |     :host(:not([state="paused"])) #resume {
 45 |       display: none;
 46 |     }
 47 | 
 48 |     :host(:not([state="recording"]):not([state="paused"])) #stop {
 49 |       display: none;
 50 |     }
 51 |   </style>
 52 |   <template>
 53 |     <castify-duration id="duration"
 54 |                       seconds="{{time}}"></castify-duration>
 55 |     <paper-icon-button id="pause" icon="castify:pause"
 56 |                        on-tap="pause"
 57 |                        alt="pause recording"></paper-icon-button>
 58 |     <paper-icon-button id="resume" icon="castify:resume"
 59 |                        on-tap="resume"
 60 |                        alt="resume recording"></paper-icon-button>
 61 |     <paper-icon-button id="stop" icon="castify:stop"
 62 |                        on-tap="stop"
 63 |                        alt="stop recording"></paper-icon-button>
 64 |     <castify-start-button id="start" on-start="start"></castify-start-button>
 65 |   </template>
 66 |   <em>{{_recorder.time}}</em>
 67 | </dom-module>
 68 | 
 69 | <script>
 70 | 
 71 |   Polymer({
 72 | 
 73 |     is: 'castify-recorder',
 74 |     properties: {
 75 |       /**
 76 |        * Recorder state. This is set to the screencastify.Recorder
 77 |        * state (a value out of ['inactive', 'paused', 'recording']).
 78 |        */
 79 |       state: {
 80 |         type: String,
 81 |         reflectToAttribute: true,
 82 |         readOnly: true
 83 |       },
 84 |       time: {
 85 |         type: Number,
 86 |         readOnly: true
 87 |       },
 88 |       shareUrl: {
 89 |         type: String,
 90 |         value: location.href  // handle shared videos on same page
 91 |       },
 92 |       captureSource: {
 93 |         type: String,
 94 |         value: 'desktop'
 95 |       },
 96 |       micAudio: Boolean,
 97 |       /**
 98 |        * Enable system audio recording. Only supported on Windows.
 99 |        */
100 |       systemAudio: Boolean,
101 |       payload: String
102 |     },
103 | 
104 |     ready: function() {
105 |       this._recorder = new screencastify.Recorder();
106 |       // Publish state and time directly as element properties.
107 |       this._setState(this._recorder.state);
108 |       this._recorder.onStateChanged = function(state) {
109 |         this._setState(state);
110 |       }.bind(this);
111 | 
112 |       this._setTime(this._recorder.time);
113 |       this._recorder.onTimeChanged = function(time) {
114 |         this._setTime(time);
115 |       }.bind(this);
116 |     },
117 | 
118 |     start: function() {
119 |       this._recorder.start({
120 |         recordConfig: {
121 |           captureSource: this.captureSource,
122 |           audio: {
123 |             mic: this.micAudio,
124 |             system: this.systemAudio
125 |           }
126 |         },
127 |         shareUrl: this.shareUrl,
128 |         payload: this.payload
129 |       });
130 |     },
131 | 
132 |     stop: function() {
133 |       this._recorder.stop();
134 |     },
135 | 
136 |     pause: function() {
137 |       this._recorder.pause();
138 |     },
139 | 
140 |     resume: function() {
141 |       this._recorder.resume();
142 |     }
143 | 
144 |   });
145 | 
146 | </script>
147 | 


--------------------------------------------------------------------------------
/demos/castify-share-player/castify-share-player.html:
--------------------------------------------------------------------------------
 1 | <link rel="import" href="../bower_components/polymer/polymer.html">
 2 | 
 3 | <!--
 4 | A element that handles shared files by showing them in a video element.
 5 | -->
 6 | <dom-module id="castify-share-player">
 7 | 
 8 |   <style>
 9 |     :host {
10 |       display: flex;
11 |     }
12 | 
13 |     video {
14 |       width: 100%;
15 |     }
16 |   </style>
17 | 
18 |   <template>
19 |     <video controls id="video" hidden></video>
20 |   </template>
21 | 
22 | </dom-module>
23 | 
24 | <script>
25 | 
26 |   Polymer({
27 | 
28 |     is: 'castify-share-player',
29 | 
30 |     attached: function() {
31 |       var state = screencastify.decodeStateQuery();
32 |       if (state && state.ids && state.ids.length) {
33 |         this.playFile(state.ids);
34 |       }
35 |       if (screencastify.onSharedFiles)
36 |         throw new Error('There can only be one a screencastify.onSharedFiles handler');
37 |       screencastify.onSharedFiles = function(fileIds) {
38 |         this.playFile(fileIds);
39 |         return true;
40 |       }.bind(this);
41 |     },
42 | 
43 |     detached: function() {
44 |       delete screencastify.onSharedFiles;
45 |     },
46 | 
47 |     playFile: function(fileIds) {
48 |       return screencastify.getFile(fileIds[0]).then(function(fileInfo) {
49 |         console.log('castify-share-player: playing file', fileInfo);
50 |         var video = this.$.video;
51 |         video.src = URL.createObjectURL(fileInfo.file);
52 |         video.removeAttribute('hidden');
53 |       }.bind(this));
54 |     }
55 |   });
56 | 
57 | </script>
58 | 
59 | 


--------------------------------------------------------------------------------
/demos/castify-start-button/castify-start-button.html:
--------------------------------------------------------------------------------
 1 | <link rel="import" href="../bower_components/polymer/polymer.html">
 2 | <link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
 3 | <link rel="import" href="../castify-icons/castify-icons.html">
 4 | 
 5 | <!--
 6 | A simple to use start recording button.
 7 | Shows a start recording button. The button is disabled while the App connection state is
 8 | unclear. Clicking on the record button connects the app first, if it is not connected yet.
 9 | It then fires a 'start' event. If the App is already connected it immediately fires a 'start'
10 | event.
11 | -->
12 | <dom-module id="castify-start-button">
13 | 
14 |   <style>
15 |     :host {
16 |       display: inline-block;
17 |       box-sizing: border-box;
18 |       position: relative;
19 |     }
20 |   </style>
21 | 
22 |   <template>
23 |     <paper-icon-button class="record" icon="castify:record"
24 |                        disabled$="[[loading]]"
25 |                        on-click="connectOrStart"
26 |                        alt="start recording"></paper-icon-button>
27 |   </template>
28 | 
29 | </dom-module>
30 | 
31 | <script>
32 | 
33 |   Polymer({
34 | 
35 |     is: 'castify-start-button',
36 | 
37 |     ready: function() {
38 |       this._setLoading(true);
39 |       screencastify.isAppConnected().then(function(connected) {
40 |         this._setLoading(false);
41 |         this._isConnected = connected;
42 |       }.bind(this));
43 |     },
44 | 
45 |     connectOrStart: function() {
46 |       if (this._isConnected) {
47 |         this.fire('start');
48 |       } else {
49 |         screencastify.connectApp().then(function() {
50 |           this._isConnected = true;
51 |           this.fire('start');
52 |         }.bind(this));
53 |       }
54 |     },
55 | 
56 |     properties: {
57 |        /**
58 |        * True while connection state is still unclear.
59 |        */
60 |       loading: {
61 |         type: Boolean,
62 |         readOnly: true
63 |       }
64 |     }
65 | 
66 |   });
67 | 
68 | </script>
69 | 


--------------------------------------------------------------------------------
/demos/in-site/README.md:
--------------------------------------------------------------------------------
 1 | #
 2 | A simple in-site recorder build with Polymer.
 3 | 
 4 | Feel free to use this demo or its custom elements as a baseline.
 5 | 
 6 | To this demo locally, clone this repository and install dependencies with:
 7 | ```
 8 | bower install
 9 | ```
10 | To run it locally, You'll also need to configure your own App and replace the
11 | `screencastify.setAppId()` call.
12 | 
13 | 


--------------------------------------------------------------------------------
/demos/in-site/in-site.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head lang="en">
 4 |   <meta charset="UTF-8">
 5 |   <title>Screencastify In-Site Recorder API Demo</title>
 6 |   <script src="https://www.screencastify.com/libs-api/castify-api.js"></script>
 7 | 
 8 |   <script src="../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
 9 |   <link rel="import" href="../bower_components/paper-styles/classes/global.html">
10 |   <link rel="import" href="../bower_components/paper-toolbar/paper-toolbar.html">
11 | 
12 |   <link rel="import" href="../castify-recorder/castify-recorder.html">
13 |   <link rel="import" href="../castify-share-player/castify-share-player.html">
14 | 
15 |   <style is="custom-style">
16 |     castify-recorder {
17 |       --castify-recorder-start-color: var(--accent-color);
18 |     }
19 |     paper-toolbar .title {
20 |       margin-left: 0 !important;
21 |     }
22 |     castify-share-player {
23 |       @apply(--layout-flex);
24 |     }
25 |   </style>
26 |   <script>
27 |     screencastify.setAppId(5129887237013504);
28 |   </script>
29 | </head>
30 | <body class="fullbleed layout vertical">
31 |   <paper-toolbar>
32 |       <span class="title">In-Site Recorder Demo</span>
33 |      <!-- Custom element with recorder control UI -->
34 |      <castify-recorder mic-audio="true" payload="some payload" capture-source="screen">
35 |      </castify-recorder>
36 |   </paper-toolbar>
37 |   <!-- Custom element that shows shared videos in a video tag-->
38 |   <castify-share-player></castify-share-player>
39 | </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/demos/simple/README.md:
--------------------------------------------------------------------------------
1 | # Simple Screencastify API Demo
2 | This demo plays shared files in a html5 video tag.
3 | 
4 | On page load it checks if it is connected with Screencastify. If it is not
5 | connected, it shows a button to connect itself.
6 | 


--------------------------------------------------------------------------------
/demos/simple/simple.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |   <head lang="en">
  4 |     <meta charset="UTF-8">
  5 |     <title>Simple Screencastify API Demo</title>
  6 |     <script src="https://www.screencastify.com/libs-api/castify-api.js"></script>
  7 |     <style>
  8 |       video {
  9 |         max-width: 100%;
 10 |         max-height: 100%;
 11 |       }
 12 |       .hidden {
 13 |         display: none;
 14 |       }
 15 |       /*
 16 |       * Just some simple show-hide logic
 17 |       */
 18 |       body.loading * {
 19 |         display: none;
 20 |       }
 21 |       body.loading > .loadingSpinner {
 22 |         display: block;
 23 |       }
 24 |       body:not(.loading) > .loadingSpinner {
 25 |         display: none;
 26 |       }
 27 |       #connectStatus > * {
 28 |         display: none;
 29 |       }
 30 |       #connectStatus.isConnected > .connected {
 31 |         display: block;
 32 |       }
 33 |       #connectStatus:not(.isConnected) > .notConnected {
 34 |         display: block;
 35 |       }
 36 |     </style>
 37 |   </head>
 38 |   <body class="loading">
 39 |     <div class="loadingSpinner">Loading...</div>
 40 |     <div id="connectStatus" class="hidden">
 41 |       <div class="notConnected">
 42 |         App is not connected with Screencastify.
 43 |         <button id="connectBtn">Connect it!</button>
 44 |       </div>
 45 |       <div class="connected">
 46 |         App is connected with Screencastify.
 47 |         Use the Share button in Screencastify to share a file with this App,
 48 |         or <button id="startBtn">Start recording from this site</button>
 49 |       </div>
 50 |     </div>
 51 |     <div class="videoPlayer" hidden>
 52 |       <h2></h2>
 53 |       <p>
 54 |         <button id="storeBtn" hidden>Store File In Library</button>
 55 |       </p>
 56 |       <video autoplay controls></video>
 57 |     </div>
 58 | 
 59 |     <script>
 60 |       var connectStatusEl, playingFileId;
 61 | 
 62 |       /**
 63 |        * Show video element and play recording.
 64 |        * It's a regular file that you could upload to your backend instead.
 65 |        */
 66 |       function playFile(fileId) {
 67 |         return screencastify.getFile(fileId).then(function(fileInfo) {
 68 |           playingFileId = fileId;
 69 |           document.querySelector('.videoPlayer').removeAttribute('hidden');
 70 |           var videoEl = document.querySelector('video');
 71 |           console.log('playing file', fileInfo);
 72 |           // fileInfo.file is a regular File/Blob.
 73 |           videoEl.src = URL.createObjectURL(fileInfo.file);
 74 |           // Show file title in heading.
 75 |           document.querySelector('h2').innerText = fileInfo.title;
 76 | 
 77 |           if (!fileInfo.inLibrary)
 78 |             document.querySelector('#storeBtn').removeAttribute('hidden');
 79 |           }, function(err) {
 80 |             console.error('failed to load file', err);
 81 |         });
 82 |       }
 83 | 
 84 |       function checkIfConnected() {
 85 |         // Hide connect button if connected, show it else.
 86 |         return screencastify.isAppConnected().then(function(isConnected) {
 87 |           console.log('connected status', isConnected);
 88 |           connectStatusEl.classList.remove('hidden');
 89 |           connectStatusEl.classList.toggle('isConnected', isConnected);
 90 |         });
 91 |       }
 92 | 
 93 |       function onConnectClicked() {
 94 |         screencastify.connectApp().then(function() {
 95 |           console.log('App is connected now');
 96 |           connectStatusEl.classList.toggle('isConnected', true);
 97 |           }, function(err) {
 98 |             console.error('failed to connect App', err);
 99 |         });
100 |       }
101 | 
102 |       function onStartClicked() {
103 |         var recorder = new screencastify.Recorder();
104 |         recorder.start({shareUrl: location.href}).then(function() {
105 |           console.log('recording started');
106 |         }, function(err) {
107 |           console.error('recorder.start() failed', err);
108 |         });
109 |       }
110 | 
111 |       /**
112 |        * Store recording in "Your Recordings" view in Screencastify.
113 |        */
114 |       function onStoreClicked() {
115 |         screencastify.storeFileInLibrary(playingFileId, true).then(function() {
116 |           console.log('file was stored in library');
117 |         }, function(err) {
118 |           console.log('failed to store file in library');
119 |         });
120 |       }
121 | 
122 |       function initialize() {
123 |         screencastify.setAppId(6302638895267840);
124 |         connectStatusEl = document.getElementById('connectStatus');
125 |         // The state query parameter is a json-encoded object that looks like this
126 |         // {
127 |         //  ids: ['shared-file-id']
128 |         // }
129 |         var state = screencastify.decodeStateQuery();
130 |         var loadingPromise;
131 |         if (state && state.ids && state.ids.length) {
132 |           loadingPromise = playFile(state.ids[0]);
133 |         } else {
134 |           loadingPromise = checkIfConnected();
135 |         }
136 |         loadingPromise.then(function() {
137 |           document.querySelector('body').classList.remove('loading');
138 |         });
139 | 
140 |         document.getElementById('connectBtn')
141 |           .addEventListener('click', onConnectClicked);
142 | 
143 |         document.getElementById('startBtn')
144 |           .addEventListener('click', onStartClicked);
145 | 
146 |         document.getElementById('storeBtn')
147 |           .addEventListener('click', onStoreClicked);
148 |       }
149 | 
150 |       initialize();
151 | 
152 |     </script>
153 |   </body>
154 | </html>
155 | 


--------------------------------------------------------------------------------
/publish.sh:
--------------------------------------------------------------------------------
1 | #!/bin/bash
2 | mv demos demos_new && \
3 |   git checkout gh-pages && \
4 |   git rm -r demos && \
5 |   mv demos_new demos && \
6 |   git add demos && \
7 |   git commit -am "Update gh-pages"
8 | 


--------------------------------------------------------------------------------
/screencastify-logo-large.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/screencastify/castify-api-docs/e1b85182b97c9cd50a30934adf901a43c837add8/screencastify-logo-large.png


--------------------------------------------------------------------------------