/v2c

Video(webcam) to canvas.

Primary LanguageJavaScriptMIT LicenseMIT

v2c

Video(webcam) to canvas.
And canvas to the image.

Demo

demo

https://shimabox.github.io/v2c/

demo-qr

It runs if it is a browser supporting the getUserMedia API.
Can I use... Support tables for HTML5, CSS3, etc

Notes

  • Battery exhaustion is intense.
  • In the case of a smartphone it will be hot.

Usage

Basic.

<!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>

Stop.

v2c.stop();

Capture.

// 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

Switch camera.

  • Can switch the front and back cameras.
  • By default the front camera is used first.
v2c.switchCamera();

Get canvas element being drawn by callback.

v2c.start((canvas, t) => {
    // Do something.
    // `t` is the elapsed time since the last drawing.
});

Option

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

Description

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.videoWidth and video.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

constraintsForRear

callbackOnAfterInit

  • Callback when after initialization.
  • v2c instance is passed as an argument.
const _callbackOnAfterInit = function(v2c) {
    console.log(v2c);
}

callbackOnOrientationChange

  • Callback when orientationchange event occurs.
const _callbackOnOrientationChange = function() {
    // Do something.
}

callbackOnLoadedmetadataVideo

  • Callback when loadedmetadata event 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), callbackOnAfterVideoLoadError will 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);
}

Example.

// 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();

Public Function

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

  • Stop the drawing process.

getCanvas() :HTMLElement

  • Return the canvas element.

getVideo() :HTMLElement

  • Return the video element.

useFrontCamera() :boolean

  • Return the flag whether to use the front camera.

switchCamera()

  • Switch between front and rear camera.

changeLongSideSize(size: int)

  • size is required.
  • Change the long side size of canvas.
    • The size of the short side matches the ratio to the long side.

getDataUrl() :string

  • Returns the data: URL for the image of canvas.

capture(filename: string)

  • Convert canvas to png image.
  • filename is optional.
    • If you want to change the name, give a filename to the argument.
    • Default is 'capture'(capture.png).

See Also

Video(Webカメラ)の映像をCanvasに描画するライブラリを書いた | Shimabox Blog

License

The MIT License (MIT). Please see License File for more information.