videomail-client 9.5.9 → 9.5.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (50) hide show
  1. package/README.md +21 -101
  2. package/dist/static/js/index.js +1 -0
  3. package/package.json +37 -54
  4. package/.browserslistrc +0 -5
  5. package/.github/workflows/push.yml +0 -42
  6. package/.storybook/main.ts +0 -25
  7. package/.storybook/manager.ts +0 -5
  8. package/.storybook/preview.ts +0 -16
  9. package/.storybook/theme.ts +0 -8
  10. package/.vscode/extensions.json +0 -3
  11. package/.vscode/settings.json +0 -44
  12. package/chromatic.config.json +0 -5
  13. package/etc/release.sh +0 -96
  14. package/etc/rsbuild/config.ts +0 -31
  15. package/etc/rsbuild/paths.ts +0 -11
  16. package/etc/ssl-certs/localhost.crt +0 -26
  17. package/etc/ssl-certs/localhost.key +0 -28
  18. package/etc/ssl-certs/regenerate_cert.sh +0 -15
  19. package/prettier.config.cjs +0 -9
  20. package/prototype/bad_browser.html +0 -22
  21. package/prototype/bad_ios.html +0 -28
  22. package/prototype/contact_form.html +0 -131
  23. package/prototype/correct_existing_videomail.html +0 -169
  24. package/prototype/correct_non_existing_videomail.html +0 -77
  25. package/prototype/direct_submit.html +0 -65
  26. package/prototype/entertain.html +0 -69
  27. package/prototype/error_handling.html +0 -23
  28. package/prototype/experimental_audio.html +0 -41
  29. package/prototype/facing_mode_button.html +0 -28
  30. package/prototype/form_without_email.html +0 -85
  31. package/prototype/high_quality.html +0 -37
  32. package/prototype/img/wait1.gif +0 -0
  33. package/prototype/img/wait2.gif +0 -0
  34. package/prototype/img/wait3.gif +0 -0
  35. package/prototype/img/wait4.gif +0 -0
  36. package/prototype/index.html +0 -511
  37. package/prototype/invalid_site_name.html +0 -33
  38. package/prototype/js/videomail-client.js +0 -23154
  39. package/prototype/js/videomail-client.min.js +0 -30
  40. package/prototype/js/videomail-client.min.js.map +0 -1
  41. package/prototype/player_only.html +0 -134
  42. package/prototype/player_only_with_form.html +0 -166
  43. package/prototype/predefined.html +0 -53
  44. package/prototype/simple.html +0 -20
  45. package/prototype/simple_jpegs.html +0 -30
  46. package/prototype/user_media_on_record.html +0 -32
  47. package/prototype/videomail_optional_form.html +0 -86
  48. package/prototype/with_cc_and_bcc.html +0 -115
  49. package/tsconfig.json +0 -34
  50. package/videomail-client.code-workspace +0 -25
package/README.md CHANGED
@@ -13,9 +13,10 @@
13
13
 
14
14
  Record videos in contact forms!
15
15
 
16
- Finally you can encode any webcam recordings from modern browsers and mobiles into MP4 + WebM within seconds. This without the need for Flash, Java nor any other plugins / addons. Just JavaScript written in ES6.
16
+ Finally you can encode any webcam recordings from modern browsers and mobiles into MP4 + WebM within seconds.
17
+ This without the need for Flash, Java nor any other plugins / addons. Just JavaScript written in ES6.
17
18
 
18
- - <a href="#prototype">Prototype (examples)</a>
19
+ - <a href="#storybook">Storybook (examples)</a>
19
20
  - <a href="#demo">Demo / Fully working version</a>
20
21
  - <a href="#options">Options</a>
21
22
  - <a href="#api">API</a>
@@ -23,58 +24,20 @@ Finally you can encode any webcam recordings from modern browsers and mobiles in
23
24
  - <a href="#whatisstored">What gets stored on the videomail server?</a>
24
25
  - <a href="#whitelist">Whitelist</a>
25
26
  - <a href="#compatibility">Backward compatibility</a>
26
- - <a href="#super-fast-cdn">Super fast global CDN</a>
27
27
  - <a href="#addons">Addons</a>
28
28
  - <a href="#notes">Notes</a>
29
29
 
30
- <a name="prototype"></a>
30
+ <a name="storybook"></a>
31
31
 
32
- ## Prototype (examples)
32
+ ## Storybook (examples)
33
33
 
34
- To run the prototype full of examples in your browser, just do:
34
+ To check out some examples in your browser, just do:
35
35
 
36
36
  1. `npm install`
37
- 2. `npm run watch` to ignite a static server and
38
- 3. open `https://localhost:8443` in your browser
39
-
40
- Best is to study `/prototype/contact_form.html` which demonstrates how easy it is to integrate the videomail client into your own contact form.
41
-
42
- Beware that all _must run over HTTPs_. Google Chrome and soon other browsers won't allow the use of `getUserMedia()` on insecure origins.
43
-
44
- If you haven't installed the local CA in your system trust store yet, you will have to run those commands only once before starting the prototype:
45
-
46
- 1. Install mkcert, see https://github.com/FiloSottile/mkcert#installation
47
- 2. Run command `mkcert -install`
37
+ 2. `npm run storybook`
48
38
 
49
39
  That's it. Easy as apple pie.
50
40
 
51
- ## Dead simple example (just record and replay)
52
-
53
- ```html
54
- <html>
55
- <body>
56
- <div id="videomail"></div>
57
- <script src="/js/videomail-client.js"></script>
58
- <script>
59
- var VideomailClient = require("videomail-client"), // load videomail client package
60
- videomailClient = new VideomailClient({
61
- // instantiate with some options
62
- verbose: true, // prints additional info to console
63
- disableSubmit: true, // disable submissions to keep example simple
64
- });
65
-
66
- // this will load your webcam, fill the placeholder containing
67
- // the `id="videomail"` with HTML and CSS code, place buttons and much more.
68
- videomailClient.show();
69
- </script>
70
- </body>
71
- </html>
72
- ```
73
-
74
- The included JS file `/prototype/js/videomail-client.js` is already browserified and lies in the `js` folder.
75
-
76
- If you remove `disableSubmit`, then you will see a submit button to post the video and make it persistent. This requires a bit more code, see prototype directory.
77
-
78
41
  <a name="demo"></a>
79
42
 
80
43
  ## Demo
@@ -85,19 +48,20 @@ A mirror of latest videomail-client can be seen on [videomail-client.netlify.com
85
48
 
86
49
  Check out the full version with all its features on [videomail.io](https://videomail.io) itself. Aim is to turn this into a stable product in the near future with some external assistance.
87
50
 
88
- On that site I just include `require('videomail-client')` in the app logic.
51
+ On that site I just include `import VideomailClient from "videomail-client"` in the app logic.
89
52
 
90
- Another live example would be https://seeflow.co.nz/contact/ or https://www.deaf.org.nz/contact/. There are plenty if you just ask us. And way more will follow, we are rolling ...
53
+ Another live example would be https://seeflow.co.nz/contact or https://www.deaf.org.nz/contact
54
+ There are plenty if you just ask us. And way more will follow, we are rolling ...
91
55
 
92
56
  <a name="options"></a>
93
57
 
94
58
  ## Options
95
59
 
96
- There are many options you can pass onto the VideomailClient constructor. Check out the annotated source code at [src/options.js](https://github.com/binarykitchen/videomail-client/blob/master/src/options.js)
60
+ There are many options you can pass onto the VideomailClient constructor. Check out the annotated source code at [src/options.ts](https://github.com/binarykitchen/videomail-client/blob/master/src/options.ts)
97
61
 
98
62
  In most cases, these defaults are good enough. But `siteName` should be changed when you deploy your own site, see <a href="#whitelist">Whitelist</a>.
99
63
 
100
- Looking at the examples in the `/prototype` folder should give you some ideas how to use these options.
64
+ Looking at the examples in the `/src/stories` folder should give you some ideas how to use these options.
101
65
 
102
66
  <a name="api"></a>
103
67
 
@@ -123,8 +87,8 @@ Looking at the examples in the `/prototype` folder should give you some ideas ho
123
87
 
124
88
  The constructor accepts a JSON with optional <a href="#options">options</a>. Example:
125
89
 
126
- ```js
127
- var videomailClient = new VideomailClient({ siteName: "my site name" });
90
+ ```ts
91
+ const videomailClient = new VideomailClient({ siteName: "my site name" });
128
92
  ```
129
93
 
130
94
  <a name="on"></a>
@@ -133,7 +97,7 @@ var videomailClient = new VideomailClient({ siteName: "my site name" });
133
97
 
134
98
  The VideomailClient class is inherited from EventEmitter and emits lots of useful events for your app. Here an example:
135
99
 
136
- ```js
100
+ ```ts
137
101
  videomailClient.on("FORM_READY", function () {
138
102
  // form is ready for recording
139
103
  });
@@ -141,20 +105,12 @@ videomailClient.on("FORM_READY", function () {
141
105
  videomailClient.on("SUBMITTED", function (videomail, response) {
142
106
  // continue with your own app logic in your javascript code if you want to process
143
107
  // something else further after form submission.
144
- //
145
- // check out /prototype/contact_form.html on how to integrate into your contact form
146
- // that videomail object has plenty of useful information,
147
- // i.E. the url or even the average fps it was recorded with.
148
- // for more info on videomail meta data, see chapter "What is stored on the server?" below
149
- //
150
- // but if you want all that videomail meta data to be submitted in the form already,
151
- // enable the `submitWithVideomail` option.
152
108
  });
153
109
  ```
154
110
 
155
111
  #### Supported events:
156
112
 
157
- Check them out at [src/events.js](https://github.com/binarykitchen/videomail-client/blob/master/src/events.js)
113
+ Check them out at [src/events.js](https://github.com/binarykitchen/videomail-client/blob/master/src/events.ts)
158
114
 
159
115
  They should be self-explanatory. If not, ask for better documentation. Then, some of these events may come with parameters.
160
116
 
@@ -172,7 +128,7 @@ Automatically fills the DOM with a form for video recording. By default the HTML
172
128
 
173
129
  ### videomailClient.replay(videomail[, parentElementId])
174
130
 
175
- Manually adds a video container for the given videomail inside the parent element. This is mostly called after a successful submission. See `/prototype/direct_submit.html` or `/prototype/contact_form.html` for some inspiration.
131
+ Manually adds a video container for the given videomail inside the parent element. See stories for some inspiration.
176
132
 
177
133
  If the `parentElement` is an ID (string), then it will be resolved into a DOM element internally. If no parent element is given, then a replay container within the containerId is automatically generated.
178
134
 
@@ -184,8 +140,6 @@ Also note that, when the parent element already contains a video container like
184
140
 
185
141
  then this will be used instead of adding a new dom element.
186
142
 
187
- Furthermore the `replay()` method also detects whether the parent element has placeholders to fill with form data. To understand this better, check out how the subject in the `/prototype/direct_submit.html` example is being displayed upon replay.
188
-
189
143
  <a name="startOver"></a>
190
144
 
191
145
  ### videomailClient.startOver()
@@ -211,11 +165,7 @@ An utility function which returns true if the current browser is capable of webc
211
165
 
212
166
  ### videomailClient.unload()
213
167
 
214
- Manually unloads the webcam and all other internal event listeners. Can be used in conjunction with single page apps, for example with AngularJS' destroy event:
215
-
216
- ```js
217
- $scope.$on("$destroy", videomailClient.unload.bind(videomailClient));
218
- ```
168
+ Manually unloads the webcam and all other internal event listeners.
219
169
 
220
170
  <a name="hide"></a>
221
171
 
@@ -240,7 +190,6 @@ Returns true when a video is currently being recorded.
240
190
  ### videomailClient.submit()
241
191
 
242
192
  For advanced use only: especially when the submit button is covered with other HTML layers and the videomail client fails to process the click event.
243
-
244
193
  Calling this function will manually trigger a submission of the recorded videomail. But only when everything else is valid. Nothing will happen when invalid.
245
194
 
246
195
  <a name="getLogLines"></a>
@@ -253,7 +202,8 @@ For advanced use only: returns you a collection of log lines that show what code
253
202
 
254
203
  ## What gets stored on the videomail server?
255
204
 
256
- Here is an example JSON showing what videomail meta data exists, gets stored on the server and you can grab yourself for further use. It's emitted in the SUBMITTED event under the videomail object:
205
+ Here is an example JSON showing what videomail meta data exists, gets stored on the server and you can grab yourself for further use.
206
+ It's emitted in the SUBMITTED event under the videomail object:
257
207
 
258
208
  ```json
259
209
  {
@@ -299,7 +249,7 @@ By default the videomail-client interrupts the form submission with `e.preventDe
299
249
 
300
250
  If this doesn't seem to work on your side, then this is mostly because the form and the submit button couldn't be found and the submission event is fired too late. To fix this, you'll need to correct the selectors under options. Here are the important ones regarding forms:
301
251
 
302
- ```json
252
+ ```js
303
253
  selectors: {
304
254
  "formId": null,
305
255
  "submitButtonId": null,
@@ -309,8 +259,6 @@ selectors: {
309
259
 
310
260
  When these are null (defaults), the videomail-client tries to detect these automatically. But it can happen that detection fails because the form is somewhere else under the DOM or the submit button does not have the `type=submit` etc.
311
261
 
312
- Here is a [working example](https://github.com/binarykitchen/videomail-client/blob/develop/prototype/contact_form.html#L55).
313
-
314
262
  ### Include videomail meta data in Form Submissions
315
263
 
316
264
  If you want to include videomail meta data in the form submission to your own server, enable the `submitWithVideomail` option.
@@ -343,22 +291,6 @@ Source: [http://caniuse.com/#search=getUserMedia](http://caniuse.com/#search=get
343
291
 
344
292
  PS: On Safari and iPhones/iPads you can play the videomails fine without any issues. Repeating: there is just no recording functionality for them yet until Apple made a move.
345
293
 
346
- <a name="super-fast-cdn"></a>
347
-
348
- ## Super fast global CDN
349
-
350
- You can grab the already browserified videomail-client JS file through GitHub's rawgit server which is proxied by [MaxCDN's](http://www.maxcdn.com/) super fast global CDN:
351
-
352
- ```
353
- https://cdn.rawgit.com/binarykitchen/videomail-client/<version number>/prototype/js/videomail-client.js
354
- ```
355
-
356
- For example for version x.y.z, use this in your production site:
357
- https://cdn.rawgit.com/binarykitchen/videomail-client/x.y.z/prototype/js/videomail-client.min.js
358
-
359
- If for whatever reason that GitHub CDN doesn't meet your standard, here's another CDN to try:
360
- https://cdnjs.com/libraries/videomail-client
361
-
362
294
  <a name="addons"></a>
363
295
 
364
296
  ## Addons
@@ -377,16 +309,6 @@ It's an extension of the popular form builder called Ninja Forms. When the video
377
309
  Too hard to maintain. Just do `git log` or look here
378
310
  https://github.com/binarykitchen/videomail-client/commits/master
379
311
 
380
- ## Regenerate certificates
381
-
382
- Should be already included, but if they have expired, can regenerate with this bash command:
383
-
384
- ```bash
385
- $ mkcert --cert-file ./env/dev/cert.pem --key-file ./env/dev/key.pem local.videomail-client.io localhost 127.0.0.1
386
- ```
387
-
388
- This will require the native mkcert program you can get from https://github.com/FiloSottile/mkcert
389
-
390
312
  ### Noise
391
313
 
392
314
  Here some noise about Videomail in the wild:
@@ -418,8 +340,6 @@ They all deserve lots of beer and love. That order is irrelevant.
418
340
 
419
341
  I admit, code isn't top notch and needs lots of rewrites. Believe me or not, I already rewrote about three times in the last four years. Good example that software hardly can be perfect. And since I am already honest here, I think stability and bug fixes come first before perfection otherwise you'll loose users. Reality you know.
420
342
 
421
- Anyway, on the next rewrite I'd probably pick [React](https://facebook.github.io/react/) or better [re-frame](https://github.com/Day8/re-frame) because the videomail-client depends heavily on application states.
422
-
423
343
  ### Final philosophy
424
344
 
425
345
  This planet is completely sold. And talk is overrated. That's why my primary goal is not to turn this into a commercial product, yet to promote a cool but underestimated language: Sign Language.