You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+35-16Lines changed: 35 additions & 16 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -6,6 +6,25 @@ WebcamJS is based on my old [JPEGCam](https://code.google.com/p/jpegcam/) projec
6
6
7
7
Looking for a good alternative to WebcamJS? Please check out [JpegCamera](https://github.com/amw/jpeg_camera) by [Adam Wróbel](https://github.com/amw). It has many advanced features that WebcamJS is lacking (for example, upload multiple photos at once, retry failed uploads, CSRF tokens, make sure camera is ready), and has a very clean and object-oriented design.
8
8
9
+
## Important Note for Chrome 47+
10
+
11
+
Google Chrome has made it a strict requirement that your website be secure (HTTPS) if you want to access the camera. This change is live in Chrome version 47 and up. So basically, if you want to use WebcamJS, you will need to host your website with SSL / HTTPS. The only alternative is to force Flash fallback mode on Chrome, which is probably not desirable.
12
+
13
+
See the Chromium docs for details: [https://www.chromium.org/Home/chromium-security/prefer-secure-origins-for-powerful-new-features]
14
+
15
+
Note that you do not need HTTPS for localhost / 127.0.0.1. Here is the list of rules for Chrome which unlock the camera:
16
+
17
+
| Scheme | Host | Port |
18
+
|--------|------|------|
19
+
|`https://`|`*`|`*`|
20
+
|`wss://`|`*`|`*`|
21
+
|`*`|`localhost`|`*`|
22
+
|`*`|`*.localhost`|`*`|
23
+
|`*`|`127/8`|`*`|
24
+
|`*`|`::1/128`|`*`|
25
+
|`file://`|`*`|`-`|
26
+
|`chrome-extension://`|`*`|`-`|
27
+
9
28
## Browser Support
10
29
11
30
WebcamJS has been tested on the following browsers / operating systems:
@@ -15,7 +34,7 @@ WebcamJS has been tested on the following browsers / operating systems:
15
34
| Mac OS X | Chrome 30+ | Works |
16
35
| Mac OS X | Firefox 20+ | Works |
17
36
| Mac OS X | Safari 6+ |**Requires Adobe Flash Player**|
18
-
| Windows | Chrome 30+ | Works |
37
+
| Windows | Chrome 30+ | Works -- **Chrome 47+ requires HTTPS**|
19
38
| Windows | Firefox 20+ | Works |
20
39
| Windows | IE 9 |**Requires Adobe Flash Player**|
21
40
| Windows | IE 10 |**Requires Adobe Flash Player**|
@@ -27,16 +46,16 @@ Here are some live demos showcasing various features of the library:
27
46
28
47
| Demo Link | Description |
29
48
|------|-------|
30
-
|[Basic Demo](http://pixlcore.com/demos/webcamjs/demos/basic.html)| Demonstrates a basic 320x240 image capture. |
31
-
|[Large Demo](http://pixlcore.com/demos/webcamjs/demos/large.html)| Demonstrates capturing a large 640x480 image, but showing a live preview at 320x240. |
32
-
|[Crop Demo](http://pixlcore.com/demos/webcamjs/demos/crop.html)| Demonstrates cropping a 240x240 square out of the center of a 320x240 webcam image. |
33
-
|[Large Crop Demo](http://pixlcore.com/demos/webcamjs/demos/crop-large.html)| Demonstrates a large 480x480 square crop, from a 640x480 image capture, with a 240x240 live preview. |
34
-
|[HD Demo](http://pixlcore.com/demos/webcamjs/demos/hd.html)| Demonstrates a 720p HD (1280x720) image capture (only supported by some webcams). |
35
-
|[SFX Demo](http://pixlcore.com/demos/webcamjs/demos/sfx.html)| Demonstrates a camera shutter sound effect at capture time. |
|[Freeze Demo](http://pixlcore.com/demos/webcamjs/demos/preview.html)| Demonstrates freezing / previewing a snapshot before saving it. |
38
-
|[Mirror Demo](http://pixlcore.com/demos/webcamjs/demos/flip.html)| Demonstrates flipping the image horizontally (mirror mode). |
39
-
|**[Full Combo Demo](http://pixlcore.com/demos/webcamjs/demos/combo.html)**| A full combination demo showcasing all features. |
49
+
|[Basic Demo](https://pixlcore.com/demos/webcamjs/demos/basic.html)| Demonstrates a basic 320x240 image capture. |
50
+
|[Large Demo](https://pixlcore.com/demos/webcamjs/demos/large.html)| Demonstrates capturing a large 640x480 image, but showing a live preview at 320x240. |
51
+
|[Crop Demo](https://pixlcore.com/demos/webcamjs/demos/crop.html)| Demonstrates cropping a 240x240 square out of the center of a 320x240 webcam image. |
52
+
|[Large Crop Demo](https://pixlcore.com/demos/webcamjs/demos/crop-large.html)| Demonstrates a large 480x480 square crop, from a 640x480 image capture, with a 240x240 live preview. |
53
+
|[HD Demo](https://pixlcore.com/demos/webcamjs/demos/hd.html)| Demonstrates a 720p HD (1280x720) image capture (only supported by some webcams). |
54
+
|[SFX Demo](https://pixlcore.com/demos/webcamjs/demos/sfx.html)| Demonstrates a camera shutter sound effect at capture time. |
|[Freeze Demo](https://pixlcore.com/demos/webcamjs/demos/preview.html)| Demonstrates freezing / previewing a snapshot before saving it. |
57
+
|[Mirror Demo](https://pixlcore.com/demos/webcamjs/demos/flip.html)| Demonstrates flipping the image horizontally (mirror mode). |
58
+
|**[Full Combo Demo](https://pixlcore.com/demos/webcamjs/demos/combo.html)**| A full combination demo showcasing all features. |
40
59
41
60
## Open Source
42
61
@@ -129,7 +148,7 @@ To snap a picture, just call the `Webcam.snap()` function, passing in a callback
129
148
} );
130
149
```
131
150
132
-
[See a live demo of this here](http://pixlcore.com/demos/webcamjs/demos/basic.html)
151
+
[See a live demo of this here](https://pixlcore.com/demos/webcamjs/demos/basic.html)
133
152
134
153
Your function is also passed a HTML5 Canvas and a 2D Context object, so you can gain access to the raw pixels instead of a compressed image Data URI. These are passed as the 2nd and 3rd arguments to your callback function. Example:
135
154
@@ -176,7 +195,7 @@ The size of the captured JPEG / PNG image is set to match the live camera viewer
176
195
// Attach camera here
177
196
```
178
197
179
-
[See a live demo of this feature here](http://pixlcore.com/demos/webcamjs/demos/large.html)
198
+
[See a live demo of this feature here](https://pixlcore.com/demos/webcamjs/demos/large.html)
180
199
181
200
## Cropping The Image
182
201
@@ -195,7 +214,7 @@ WebcamJS can also crop the final image for you, to any dimensions you like. Thi
195
214
196
215
This would crop a 240x240 square out of the center of the 320x240 webcam image. The crop is also reflected in the live preview area. In this case the live preview would also be cropped to 240x240, so the user can see exactly what portion of the image will be captured.
197
216
198
-
[See a live demo of this feature here](http://pixlcore.com/demos/webcamjs/demos/crop.html)
217
+
[See a live demo of this feature here](https://pixlcore.com/demos/webcamjs/demos/crop.html)
199
218
200
219
## Flipping The Image (Mirror Mode)
201
220
@@ -211,15 +230,15 @@ If you want, WebcamJS can "flip" (mirror) both the live preview and captured ima
211
230
// Attach camera here
212
231
```
213
232
214
-
[See a live demo of this feature here](http://pixlcore.com/demos/webcamjs/demos/flip.html)
233
+
[See a live demo of this feature here](https://pixlcore.com/demos/webcamjs/demos/flip.html)
215
234
216
235
## Freezing / Previewing The Image
217
236
218
237
Want to provide your users with the ability to "freeze" (i.e. preview) the image before actually saving a snapshot? Just call `Webcam.freeze()` to freeze the current camera image. Then call `Webcam.snap()` to save the frozen image, or call `Webcam.unfreeze()` to cancel and resume the live camera feed.
219
238
220
239
The idea here is to provide a photo-booth-like experience, where the user can take a snapshot, then choose to keep or discard it, before actually calling `Webcam.snap()` to save the image.
221
240
222
-
[See a live demo of this feature here](http://pixlcore.com/demos/webcamjs/demos/preview.html)
241
+
[See a live demo of this feature here](https://pixlcore.com/demos/webcamjs/demos/preview.html)
0 commit comments