p5-video-kit

v0.0.12

Published

14 hours ago

Library and dashboard for mixing video in the browser

Downloads

425

0High
0Medium
0Low

jhtitp

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
video overview
contact me: create an github issue for this repo

Screen shots

Screen shots of p5videoKit in action:

live-tile face-mesh_2024

face-tile

facet

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.

grid1

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
TODO: running locally setup
TODO: adding settings via Export button
TODO: adding effects code

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