{"id":22328160,"url":"https://github.com/shimabox/v2c","last_synced_at":"2025-10-14T15:30:30.826Z","repository":{"id":85929228,"uuid":"176072728","full_name":"shimabox/v2c","owner":"shimabox","description":"Video(webcam) to canvas.","archived":false,"fork":false,"pushed_at":"2019-05-08T23:19:23.000Z","size":38,"stargazers_count":6,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-07T07:52:39.951Z","etag":null,"topics":["canvas","stream","video","webcam"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/shimabox.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-03-17T08:03:37.000Z","updated_at":"2025-01-04T17:01:16.000Z","dependencies_parsed_at":null,"dependency_job_id":"4cc75723-ab82-43c5-a344-533bb7aaac95","html_url":"https://github.com/shimabox/v2c","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/shimabox/v2c","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shimabox%2Fv2c","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shimabox%2Fv2c/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shimabox%2Fv2c/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shimabox%2Fv2c/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shimabox","download_url":"https://codeload.github.com/shimabox/v2c/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shimabox%2Fv2c/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279019321,"owners_count":26086711,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-14T02:00:06.444Z","response_time":60,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["canvas","stream","video","webcam"],"created_at":"2024-12-04T03:11:45.115Z","updated_at":"2025-10-14T15:30:30.525Z","avatar_url":"https://github.com/shimabox.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# v2c\nVideo(webcam) to canvas.  \nAnd canvas to the image.\n\n## Demo\n\n![demo](https://github.com/shimabox/assets/blob/master/v2c/demo.gif)\n\nhttps://shimabox.github.io/v2c/\n\n![demo-qr](https://github.com/shimabox/assets/blob/master/v2c/qr.png)\n\nIt runs if it is a browser supporting the **getUserMedia API**.  \n[Can I use... Support tables for HTML5, CSS3, etc](https://caniuse.com/#search=getUserMedia \"Can I use... Support tables for HTML5, CSS3, etc\")\n\n## Notes\n- Battery exhaustion is intense.\n- In the case of a smartphone it will be hot.\n\n## Usage\n\n### Basic.\n\n```js\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n\u003cmeta charset=\"UTF-8\"\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n\n\u003c!-- Prepare a wrapper element --\u003e\n\u003cdiv id=\"v2c-wrapper\"\u003e\u003c/div\u003e\n\n\u003c!-- Load v2c.js --\u003e\n\u003cscript src=\"js/v2c.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n// Create instance.\n// Wrapper element selector is required.\n// `option` is optional.\nconst v2c = new V2C('#v2c-wrapper'/*, option */);\n\n// Start.\nv2c.start();\n\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\nWhen create an instance (`new V2C('#v2c-wrapper')`), the following elements are created in the wrapper element:\n\n```html\n\u003cdiv id=\"v2c-wrapper\" style=\"display: flex; flex-direction: column; width: min-content;\"\u003e\n  \u003cvideo width=\"640\" height=\"320\" id=\"video\" playsinline autoplay style=\"position: absolute; z-index: -1; transform: scaleX(-1);\"\u003e\u003c/video\u003e\n  \u003ccanvas width=\"640\" height=\"320\" id=\"canvas\" style=\"transform: scaleX(-1);\"\u003e\u003c/canvas\u003e\n\u003c/div\u003e\n```\n\n### Stop.\n```js\nv2c.stop();\n```\n\n### Capture.\n```js\n// The image name is `capture.png` by default.\nv2c.capture();\n\n// If you want to change the name, give a filename to the argument.\nv2c.capture('modify'); // =\u003e modify.png\n```\n\n### Switch camera.\n\n- Can switch the front and back cameras.\n- By default the front camera is used first.\n\n```js\nv2c.switchCamera();\n```\n\n### Get canvas element being drawn by callback.\n```js\nv2c.start((canvas, t) =\u003e {\n    // Do something.\n    // `t` is the elapsed time since the last drawing.\n});\n```\n\n## Option\n\nCan control the behavior by passing an option.\n\n|name|default|type|\n|:---|:---|:---|\n|longSideSize|640|int|\n|canvasId|'canvas'|string|\n|videoId|'video'|string|\n|useFrontCamera|true|boolean|\n|constraintsForFront|`{video: {facingMode : 'user'}}`|object|\n|constraintsForRear|`{video: {facingMode : {exact : 'environment'}}}`|object|\n|callbackOnAfterInit|null|function|\n|callbackOnOrientationChange|null|function|\n|callbackOnLoadedmetadataVideo|null|function|\n|callbackOnVideoLoadSuccess|`v2c._callbackOnVideoLoadSuccess`|function|\n|callbackOnVideoLoadError|`v2c._callbackOnVideoLoadError`|function|\n|callbackOnAfterVideoLoadError|null|function|\n\n### Description\n\n`longSideSize`\n\n- Specifies the size of the long side of canvas.\n- The size of the short side matches the ratio to the long side.\n- The ratio is ratio of `video.videoWidth` and `video.videoHeight`.\n\n`canvasId`\n\n- Specify ID name of canvas element.\n\n`videoId`\n\n- Specify ID name of video element.\n\n`useFrontCamera`\n\n- Specifying the First Camera.\n- `true`\n  - Use the front camera.\n- `false`\n  - Use the rear camera.\n\n`constraintsForFront`\n\n- It is specification of constraints when using the front camera.\n- [MediaDevices.getUserMedia() - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia \"MediaDevices.getUserMedia() - Web APIs | MDN\")\n\n`constraintsForRear`\n\n- It is specification of constraints when using the rear camera.\n- [MediaDevices.getUserMedia() - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia \"MediaDevices.getUserMedia() - Web APIs | MDN\")\n\n`callbackOnAfterInit`\n\n- Callback when after initialization.\n- v2c instance is passed as an argument.\n```js\nconst _callbackOnAfterInit = function(v2c) {\n    console.log(v2c);\n}\n```\n\n`callbackOnOrientationChange`\n\n- Callback when `orientationchange` event occurs.\n```js\nconst _callbackOnOrientationChange = function() {\n    // Do something.\n}\n```\n\n`callbackOnLoadedmetadataVideo`\n\n- Callback when `loadedmetadata` event occurs.\n- The video element is passed as an argument.\n```js\nconst _callbackOnLoadedmetadataVideo = function(video) {\n    console.log(video);\n}\n```\n\n`callbackOnVideoLoadSuccess`\n\n- Callback on successful loading of video.\n- The canvas element is passed as an argument.\n```js\nconst _callbackOnVideoLoadSuccess = function(canvas) {\n    console.log(canvas);\n}\n```\n\n`callbackOnVideoLoadError`\n\n- Callback when failed to load video.\n- Error message, canvas element, flag for using front camera (useFrontCamera), `callbackOnAfterVideoLoadError` will be passed as arguments\n```js\nconst _callbackOnVideoLoadError = function(err, canvas, useFrontCamera, callback) {\n    // callback is null if `callbackOnAfterVideoLoadError` is not specified.\n    console.log(err, canvas, useFrontCamera, callback);\n}\n```\n\n`callbackOnAfterVideoLoadError`\n\n- Callback after video load error.\n- An error message is passed as an argument.\n```js\nconst _callbackOnAfterVideoLoadError = function(err) {\n    console.log(err);\n}\n```\n\n#### Example.\n```js\n// When specifying an option.\n\n// Callback when after initialization.\nconst _callbackOnAfterInit = function(v2c) {\n    console.log(v2c);\n}\n\n// Callback when failed to load video.\nconst _callbackOnVideoLoadError = function(err, canvas, useFrontCamera) {\n    console.log(err, canvas, useFrontCamera);\n}\n\n// Override option.\nconst option = {\n    'longSideSize': 360,\n    'useFrontCamera': false, // When using a rear camera.\n    'callbackOnAfterInit': _callbackOnAfterInit,\n    'callbackOnVideoLoadError': _callbackOnVideoLoadError\n};\n\nconst v2c = new V2C('#v2c-wrapper', option);\n// or\nconst v2c = new V2C('#v2c-wrapper', {'useFrontCamera': false});\n\nv2c.start();\n```\n\n## Public Function\n\n### start()\n\n- Start drawing process.\n- Can receive a callback function and can reference the canvas being drawn.\n```js\nv2c.start((canvas, t) =\u003e {\n    // Do something.\n    // `t` is the elapsed time since the last drawing.\n});\n```\n\n### stop()\n\n- Stop the drawing process.\n\n### getCanvas() `:HTMLElement`\n\n- Return the canvas element.\n\n### getVideo() `:HTMLElement`\n\n- Return the video element.\n\n### useFrontCamera() `:boolean`\n\n- Return the flag whether to use the front camera.\n\n### switchCamera()\n\n- Switch between front and rear camera.\n\n### changeLongSideSize(size: int)\n\n- `size` is required.\n- Change the long side size of canvas.\n  - The size of the short side matches the ratio to the long side.\n\n### getDataUrl() `:string`\n\n- Returns the `data: URL` for the image of canvas.\n\n### capture(filename: string)\n\n- Convert canvas to png image.\n- `filename` is optional.\n  - If you want to change the name, give a `filename` to the argument.\n  - Default is `'capture'`(capture.png).\n\n## See Also\n\n[Video(Webカメラ)の映像をCanvasに描画するライブラリを書いた | Shimabox Blog](https://blog.shimabox.net/2019/05/09/wrote_a_library_for_drawing_video-webcam_images_on_canvas/ \"Video(Webカメラ)の映像をCanvasに描画するライブラリを書いた | Shimabox Blog\")\n\n## License\nThe MIT License (MIT). Please see [License File](LICENSE) for more information.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshimabox%2Fv2c","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshimabox%2Fv2c","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshimabox%2Fv2c/lists"}