├── readme.md ├── 3-createImageBitmap.html ├── firstDraft.html ├── 1-canvas.html ├── pushFramesAttempt.html ├── 6-writableCreateImageBitmap.html ├── 5-readable.html ├── 2-OffscreenCanvas.html └── 4-ImageCapture.html /readme.md: -------------------------------------------------------------------------------- 1 | Exploration of the various ways one can capture and save a still image from a webcam on the Web with JavaScript. 2 | This includes: 3 | 4 | * `canvas.toBlob()` 5 | * `OffscreenCanvas` 6 | * `createImageBitmap` 7 | * `ImageCapture` 8 | * `MediaStreamTrackProcessor` with `ReadableStreams` 9 | 10 | See the post on webrtcHacks for full details: https://webrtchacks.com/still-image-from-webcam-stream-approaches/ 11 | -------------------------------------------------------------------------------- /3-createImageBitmap.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | PureJS Video Element Capture 6 | 7 | 8 | 9 | 10 |
11 | 12 |
13 | 14 | 15 | 16 |

17 | Images captured: 0 18 |

19 |
20 | 21 |
22 | 80 | 81 | 82 | -------------------------------------------------------------------------------- /firstDraft.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | PureJS Video Element Capture 6 | 7 | 8 | 9 | 10 |
11 | 12 |

13 | Images captured: 0 14 |

15 |
16 | 17 |
18 | 80 | 81 | 82 | -------------------------------------------------------------------------------- /1-canvas.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | PureJS Video Element Capture 6 | 7 | 8 | 9 | 10 |
11 | 12 |
13 | 14 | 15 | 16 |

17 | Images captured: 0 18 |

19 |
20 | 21 |
22 | 90 | 91 | 92 | -------------------------------------------------------------------------------- /pushFramesAttempt.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | PureJS Video Element Capture 6 | 7 | 8 | 9 | 10 |
11 | 12 |

13 | Images captured: 0 14 |

15 |
16 | 17 |
18 | 90 | 91 | 92 | -------------------------------------------------------------------------------- /6-writableCreateImageBitmap.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | PureJS Video Element Capture 6 | 7 | 8 | 9 | 10 |
11 | 12 |

13 | Images captured: 0 14 |

15 |
16 | 17 |
18 | 94 | 95 | 96 | -------------------------------------------------------------------------------- /5-readable.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | PureJS Video Element Capture 6 | 7 | 8 | 9 |
10 | 11 | 12 |
13 | 14 |
15 | 16 | 17 | 18 |

19 | Images captured: 0 20 |

21 |
22 | 23 |
24 | 101 | 102 | 103 | -------------------------------------------------------------------------------- /2-OffscreenCanvas.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | OffscreenCanvas Capture 6 | 7 | 8 | 9 |
10 | 11 | 12 |
13 | 14 |
15 | 16 | 17 | 18 |

19 | Images captured: 0 20 |

21 |
22 | 23 |
24 | 104 | 105 | 106 | -------------------------------------------------------------------------------- /4-ImageCapture.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ImageCapture.takePhoto method 6 | 7 | 8 | 9 |
10 | 11 | 12 |
13 | 14 |
15 | 16 | 17 |
18 |

Camera Settings

19 | 20 |

Camera capabilities

21 | 22 |
23 | 24 |

25 | Images captured: 0 26 |

27 |
28 | 29 |
30 | 111 | 112 | 113 | --------------------------------------------------------------------------------