p5-video-kit
v0.0.34
Published
Library and dashboard for mixing video in the browser
Readme
p5videoKit
p5videoKit - a Library and dashboard for mixing video in the browser.
- demo
- You can apply visual effects to live video from connected cameras or streaming from other devices on the internet. p5videoKit is designed to be re-usable and extended with your own p5js code for visual effects and interaction.
The code and documentation is in development. We welcome your feedback and help to improve the user interface and documentation.
started as code for interactive installation at NYU-ITP Brooklyn 2021
re-mixing effects code from DICE mobile app and NYU-ITP ICM course
contact me: create an github issue for this repo
Screen shots
Screen shots of p5videoKit in action:
Colored Portraits Installation @ 370 Jay St. Brooklyn 2021
Demo
p5videoKit runs best in modern desktop browsers. I've tested primarily in Google Chrome and second on Apple Safari on MacOS desktop computers. On mobile devices (iPhone and Android) things are flaky - landscape mode is best here.
demo - Opens a new browser window to with videokit interface that shows local camera.Your browser should ask you for permission to use the camera and microphone. Hit the Reset button if you don't see any video. Use the Effect drop down to select an effect to apply to the camera video.
Grid demo - pixelized video effect.
4 effects demo - four effects and be seen in a 2 by 2 layout. Use the Effect drop down to select an effect.
live-tile-3x6-face-mesh - 3x6 live tiling of images from mobile devices
live1 - joint the VideoKit-Play-1 live streaming room.
archive of settings - not every settings work
The interface
- TODO: document Effects UI
The code
- moving beyond the p5js web editor
- setup a free github account
- download this repo with github disktop app
- run local server using Visual Studio Code text editor with extensions: p5.vscode+Live Server
- local server starting point:
- ./src/index.html
Live streaming
- Live Device check box enables live stream to all other instances using the same room name.
History
p5videoKit is based of the code used to create the interactive installation at NYU-ITP in 2021
Keeping in the groove of my DICE video art app
- Distributed Instruments for Computed Expression
Components
Built using
archived from 2020
Announcements -- archived
(Interactive)(Multi)Screens Club presentation -- archived
NOTES
# --
2026-06-03 11:22:20
npm login
bin/build.sh
Present?v=437
# --
2026-06-03 10:39:22
// remove async
p5videoKit.prototype.effectMeta_find = function (label) {
p5videoKit.prototype.createEffect = function ({ eff_label, imedia, urect, props, eff_spec }) {
p5videoKit.prototype.patch_inst_create = function (eff_label, imedia, ipatch, eff_spec, eff_props) {
p5videoKit.prototype.create_patch_selection = function (aPatch, ipatch, div) {
p5videoKit.prototype.create_settings = function (aPatch, div) {
p5videoKit.prototype.draw_patch = function (ipatch, prior) {
p5videoKit.prototype.create_patch = function (droot, ipatch) {
p5videoKit.prototype.ui_patch_eff_panes = function () {
ui_log('p5videoKit import_effect label', effMeta.label);
ui_log('p5videoKit import_effect import_path', effMeta.import_path);
# --
2026-06-01 02:51:55
npm login
sketch.js?v=433
bin/build.sh
bin/lib-publish.sh
+ [email protected]
bin/pub-p5videoKit-html.sh
!!@ effects are loaded dynamically and thus come from cache
!!@ not npm lib
sketch.js?v=435
bin/build.sh
Present?v=436
bin/pub-p5videoKit-html.sh
homepage=p5videoKit/demo3
>> should remove p5videoKit/demo2
# --
2026-04-23 05:39:37
bin/build.sh
npm login
# --
2026-04-22 21:54:46
https://www.npmjs.com/settings/jht9629/profile
2026-04-18 14:20:14
?v=433
640x480 for pose_net to align with face_mesh
npm login
bin/lib-publish.sh
+ [email protected]
bin/pub-p5videoKit-html.sh
# --
2026-04-17 04:55:05
eff_bestill MISSING input
Must enable Audio and make noise for face_band, fft_graph, fft_polar
bin/lib-publish.sh
v0.0.26
!!@ Required
npm login
[email protected]
bin/a-release.sh
build_ver 430
bin/lib-publish.sh
!!@ Must be done again to get build ver in interface
[email protected]
!!@ May have to wait few minutes to see new lib
bin/pub-p5videoKit-html.sh
# --
2025-11-12 15:35:39
bin/a-release.sh
bin/lib-publish.sh
+ [email protected]
bin/a-release.sh
# --
2025-11-12 12:56:03
webdb
https://github.com/jht1493-gmail/webdb
745,516,244 bytes (752.9 MB on disk) for 497 items
# --
2025-11-11 18:01:29
[email protected]
build_ver 423
bin/a-release.sh
build_ver 424
bin/lib-publish.sh
[email protected]
build_ver 426
Done
[x] settings/2021/0-facet-hd.json
- tile_clock does not apply effects
- tile_color ui appears twice
[x] MazeSpin https://jht1493.net/p5videoKit/demo2/ https://jht1493.net/p5videoKit/demo2/index.html?u= 2&d=settings/2x2-maze-spin-alpha-2-line-truchet.json
[x] http://127.0.0.1:5501/src/index.html?u=2&d=videoKit/settings/2021/0-facet-hd.json Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'patch_index1') at eff_loop.trigger_step (eff_loop.js:100:29)
[x] http://127.0.0.1:5501/src/index.html?u=8&d=videoKit/settings/2021/covid-ticker.json Uncaught (in promise) SyntaxError: Unexpected token '<', "<!doctype "... is not valid JSON
[x] p5videoKit patch_index1 failure
TODO
- [] mobile: fps update causes flicker
- [] Full test local, then server http://127.0.0.1:5501/src/videoKit/settings.html
- inputBlind --> skip ready check
- protect all input
- doc all effects with source link
- eff_pose_net use output layer
- scrub security key - reset repo
- revive p5videoKitPrivate
- [email protected]
- TODO: running locally setup
- TODO: adding settings via Export button
- TODO: adding effects code
- [ ] use CDN for libs - confirm load performance
BUGS
- [] image GET http://127.0.0.1:5501/src/external/media/webdb/covid19m/undefined 404 (Not Found)
- [] http://127.0.0.1:5501/src/index.html?u=9&d=videoKit/settings/2021/covid19m.json Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'length') at eff_image_show.load_image (eff_image.js:305:38) at eff_image_show.init (eff_image.js:132:10)
- [] bodypix.segment fails this.bodypix.segment(this.video, (error, results) => {
- [] Error after re-init effect