Video(webcam) to canvas.
And canvas to the image.
https://shimabox.github.io/v2c/
It runs if it is a browser supporting the getUserMedia API.
Can I use... Support tables for HTML5, CSS3, etc
- Battery exhaustion is intense.
- In the case of a smartphone it will be hot.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<!-- Prepare a wrapper element -->
<div id="v2c-wrapper"></div>
<!-- Load v2c.js -->
<script src="js/v2c.js"></script>
<script>
// Create instance.
// Wrapper element selector is required.
// `option` is optional.
const v2c = new V2C('#v2c-wrapper'/*, option */);
// Start.
v2c.start();
</script>
</body>
</html>When create an instance (new V2C('#v2c-wrapper')), the following elements are created in the wrapper element:
<div id="v2c-wrapper" style="display: flex; flex-direction: column; width: min-content;">
<video width="640" height="320" id="video" playsinline autoplay style="position: absolute; z-index: -1; transform: scaleX(-1);"></video>
<canvas width="640" height="320" id="canvas" style="transform: scaleX(-1);"></canvas>
</div>v2c.stop();// The image name is `capture.png` by default.
v2c.capture();
// If you want to change the name, give a filename to the argument.
v2c.capture('modify'); // => modify.png- Can switch the front and back cameras.
- By default the front camera is used first.
v2c.switchCamera();v2c.start((canvas, t) => {
// Do something.
// `t` is the elapsed time since the last drawing.
});Can control the behavior by passing an option.
| name | default | type |
|---|---|---|
| longSideSize | 640 | int |
| canvasId | 'canvas' | string |
| videoId | 'video' | string |
| useFrontCamera | true | boolean |
| constraintsForFront | {video: {facingMode : 'user'}} |
object |
| constraintsForRear | {video: {facingMode : {exact : 'environment'}}} |
object |
| callbackOnAfterInit | null | function |
| callbackOnOrientationChange | null | function |
| callbackOnLoadedmetadataVideo | null | function |
| callbackOnVideoLoadSuccess | v2c._callbackOnVideoLoadSuccess |
function |
| callbackOnVideoLoadError | v2c._callbackOnVideoLoadError |
function |
| callbackOnAfterVideoLoadError | null | function |
longSideSize
- Specifies the size of the long side of canvas.
- The size of the short side matches the ratio to the long side.
- The ratio is ratio of
video.videoWidthandvideo.videoHeight.
canvasId
- Specify ID name of canvas element.
videoId
- Specify ID name of video element.
useFrontCamera
- Specifying the First Camera.
true- Use the front camera.
false- Use the rear camera.
constraintsForFront
- It is specification of constraints when using the front camera.
- MediaDevices.getUserMedia() - Web APIs | MDN
constraintsForRear
- It is specification of constraints when using the rear camera.
- MediaDevices.getUserMedia() - Web APIs | MDN
callbackOnAfterInit
- Callback when after initialization.
- v2c instance is passed as an argument.
const _callbackOnAfterInit = function(v2c) {
console.log(v2c);
}callbackOnOrientationChange
- Callback when
orientationchangeevent occurs.
const _callbackOnOrientationChange = function() {
// Do something.
}callbackOnLoadedmetadataVideo
- Callback when
loadedmetadataevent occurs. - The video element is passed as an argument.
const _callbackOnLoadedmetadataVideo = function(video) {
console.log(video);
}callbackOnVideoLoadSuccess
- Callback on successful loading of video.
- The canvas element is passed as an argument.
const _callbackOnVideoLoadSuccess = function(canvas) {
console.log(canvas);
}callbackOnVideoLoadError
- Callback when failed to load video.
- Error message, canvas element, flag for using front camera (useFrontCamera),
callbackOnAfterVideoLoadErrorwill be passed as arguments
const _callbackOnVideoLoadError = function(err, canvas, useFrontCamera, callback) {
// callback is null if `callbackOnAfterVideoLoadError` is not specified.
console.log(err, canvas, useFrontCamera, callback);
}callbackOnAfterVideoLoadError
- Callback after video load error.
- An error message is passed as an argument.
const _callbackOnAfterVideoLoadError = function(err) {
console.log(err);
}// When specifying an option.
// Callback when after initialization.
const _callbackOnAfterInit = function(v2c) {
console.log(v2c);
}
// Callback when failed to load video.
const _callbackOnVideoLoadError = function(err, canvas, useFrontCamera) {
console.log(err, canvas, useFrontCamera);
}
// Override option.
const option = {
'longSideSize': 360,
'useFrontCamera': false, // When using a rear camera.
'callbackOnAfterInit': _callbackOnAfterInit,
'callbackOnVideoLoadError': _callbackOnVideoLoadError
};
const v2c = new V2C('#v2c-wrapper', option);
// or
const v2c = new V2C('#v2c-wrapper', {'useFrontCamera': false});
v2c.start();- Start drawing process.
- Can receive a callback function and can reference the canvas being drawn.
v2c.start((canvas, t) => {
// Do something.
// `t` is the elapsed time since the last drawing.
});- Stop the drawing process.
- Return the canvas element.
- Return the video element.
- Return the flag whether to use the front camera.
- Switch between front and rear camera.
sizeis required.- Change the long side size of canvas.
- The size of the short side matches the ratio to the long side.
- Returns the
data: URLfor the image of canvas.
- Convert canvas to png image.
filenameis optional.- If you want to change the name, give a
filenameto the argument. - Default is
'capture'(capture.png).
- If you want to change the name, give a
Video(Webカメラ)の映像をCanvasに描画するライブラリを書いた | Shimabox Blog
The MIT License (MIT). Please see License File for more information.