Directory

← Back

Vcamera

Vaadin 10 component for taking pictures and recording short videos

Author

Rating

Popularity

500+

Vaadin 10 component for taking pictures and recording short videos. The component is based on HTML5 standards. It uses navigator.mediaDevices.getUserMedia to get a MediaStream object containing a video and/or audio stream. A MediaRecorder object is used to record video. The video HTML5-element is used to show videos. Images are created from the media stream using a canvas.

Recorded videos and pictures are saved directly to the server. A receiver class implementing the DataReceiver interface can be used on the server side to provide a OutputStream that saves the pictures and videos in a desired way.

navigator.mediaDevices.getUserMedia is supported in most modern browsers. MediaRecorder is supported only in Chrome and Firefox. See caniuse.com for more details and more up to date information. The device also obviously needs a camera in order for the component to work.

Compatibility

1.02.0.63.0.04.0.0
(24.4)
(24.3)
(24.2)
(24.1)
24YY
20-23Y
(19)
(18)
(17)
(16)
(15)
(14)
10-13Y
(8.21)
(8.20)
(8.19)
(8.18)
(8.17)
(8.16)
(8.15)
(8.14)
(8.13)
(8.12)
(8.11)
(8.10)
(8.9)
(8.8)
(8.7)
(8.6)
(8.5)
(8.4)
(8.3)
(8.2)
(8.1)
(8.0)
(7.7)
(7.6)
(7.5)
(7.4)
(7.3)
(7.2)
(7.1)
(7.0)
(6.8)
(6.7)
(6.6)
(6.5)
(6.4)
(6.3)
(6.2)
(6.1)
(6.0)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Released
2021-12-15
Maturity
EXPERIMENTAL
License
Apache License 2.0

Compatibility

Framework
Vaadin 20
Vaadin 21
Vaadin 22
Vaadin 23
Vaadin 24 in 4.0.0
Vaadin 13 in 1.0
Vaadin 12 in 1.0
Vaadin 11 in 1.0
Vaadin 10 in 1.0
Browser
Firefox
Safari
Google Chrome
iOS Browser
Android Browser
Microsoft Edge

Vcamera - Vaadin Add-on Directory

Vaadin 10 component for taking pictures and recording short videos Vcamera - Vaadin Add-on Directory
Vaadin 10 component for taking pictures and recording short videos. The component is based on HTML5 standards. It uses `navigator.mediaDevices.getUserMedia` to get a `MediaStream` object containing a video and/or audio stream. A `MediaRecorder` object is used to record video. The `video` HTML5-element is used to show videos. Images are created from the media stream using a canvas. Recorded videos and pictures are saved directly to the server. A receiver class implementing the `DataReceiver` interface can be used on the server side to provide a `OutputStream` that saves the pictures and videos in a desired way. `navigator.mediaDevices.getUserMedia` is supported in most modern browsers. `MediaRecorder` is supported only in Chrome and Firefox. See [caniuse.com](https://caniuse.com) for more details and more up to date information. The device also obviously needs a camera in order for the component to work.
Source Code
Online Demo

Vcamera version 1.0

Vcamera version 2.0.6

Vcamera version 3.0.0
Vaadin 24 compatible build, no new features.

Vcamera version 4.0.0

Online