Skip to content

Commit 1f164b8

Browse files
committed
Tagging v1.0.6: Updated docs to reflect Chrome 47 changes (HTTPS only).
1 parent 394584d commit 1f164b8

File tree

6 files changed

+42
-23
lines changed

6 files changed

+42
-23
lines changed

README.md

Lines changed: 35 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,25 @@ WebcamJS is based on my old [JPEGCam](https://code.google.com/p/jpegcam/) projec
66

77
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.
88

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+
928
## Browser Support
1029

1130
WebcamJS has been tested on the following browsers / operating systems:
@@ -15,7 +34,7 @@ WebcamJS has been tested on the following browsers / operating systems:
1534
| Mac OS X | Chrome 30+ | Works |
1635
| Mac OS X | Firefox 20+ | Works |
1736
| Mac OS X | Safari 6+ | **Requires Adobe Flash Player** |
18-
| Windows | Chrome 30+ | Works |
37+
| Windows | Chrome 30+ | Works -- **Chrome 47+ requires HTTPS** |
1938
| Windows | Firefox 20+ | Works |
2039
| Windows | IE 9 | **Requires Adobe Flash Player** |
2140
| Windows | IE 10 | **Requires Adobe Flash Player** |
@@ -27,16 +46,16 @@ Here are some live demos showcasing various features of the library:
2746

2847
| Demo Link | Description |
2948
|------|-------|
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. |
36-
| [Flash Demo](http://pixlcore.com/demos/webcamjs/demos/flash.html) | Demonstrates forcing Adobe Flash fallback mode. |
37-
| [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. |
55+
| [Flash Demo](https://pixlcore.com/demos/webcamjs/demos/flash.html) | Demonstrates forcing Adobe Flash fallback mode. |
56+
| [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. |
4059

4160
## Open Source
4261

@@ -129,7 +148,7 @@ To snap a picture, just call the `Webcam.snap()` function, passing in a callback
129148
} );
130149
```
131150

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)
133152

134153
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:
135154

@@ -176,7 +195,7 @@ The size of the captured JPEG / PNG image is set to match the live camera viewer
176195
// Attach camera here
177196
```
178197

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)
180199

181200
## Cropping The Image
182201

@@ -195,7 +214,7 @@ WebcamJS can also crop the final image for you, to any dimensions you like. Thi
195214

196215
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.
197216

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)
199218

200219
## Flipping The Image (Mirror Mode)
201220

@@ -211,15 +230,15 @@ If you want, WebcamJS can "flip" (mirror) both the live preview and captured ima
211230
// Attach camera here
212231
```
213232

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)
215234

216235
## Freezing / Previewing The Image
217236

218237
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.
219238

220239
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.
221240

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)
223242

224243
## Setting an Alternate SWF Location
225244

bower.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "webcamjs",
3-
"version": "1.0.5",
3+
"version": "1.0.6",
44
"homepage": "https://github.com/jhuckaby/webcamjs",
55
"authors": [
66
"Joseph Huckaby <[email protected]>"

build.sh

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,4 @@
33
# Build Script for WebcamJS
44
# Install uglifyjs first: sudo npm install uglify-js -g
55

6-
uglifyjs webcam.js -o webcam.min.js --mangle --reserved "Webcam" --preamble "// WebcamJS v1.0.5 - http://github.com/jhuckaby/webcamjs - MIT Licensed"
6+
uglifyjs webcam.js -o webcam.min.js --mangle --reserved "Webcam" --preamble "// WebcamJS v1.0.6 - http://github.com/jhuckaby/webcamjs - MIT Licensed"

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "webcamjs",
3-
"version": "1.0.5",
3+
"version": "1.0.6",
44
"description": "HTML5 Webcam Image Capture Library with Flash Fallback",
55
"author": "Joseph Huckaby <[email protected]>",
66
"homepage": "https://github.com/jhuckaby/webcamjs",

webcam.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
// WebcamJS v1.0.5
1+
// WebcamJS v1.0.6
22
// Webcam library for capturing JPEG/PNG images in JavaScript
33
// Attempts getUserMedia, falls back to Flash
44
// Author: Joseph Huckaby: http://github.com/jhuckaby
@@ -9,7 +9,7 @@
99
(function(window) {
1010

1111
var Webcam = {
12-
version: '1.0.5',
12+
version: '1.0.6',
1313

1414
// globals
1515
protocol: location.protocol.match(/https/i) ? 'https' : 'http',

0 commit comments

Comments
 (0)