DEV Community

Cover image for Video processing with VR/AR in the browser
Ilya Nevolin
Ilya Nevolin

Posted on

Video processing with VR/AR in the browser

AlterWorld is an open source real-time video processing project based on OpenCV for JavaScript (front-end). It has several interesting features such as different image filters and effects, VR/AR capabilities and audio/music generation.

javascript video processing

Live demo: https://nevolin.be/alterworld/

Use a budget VR headset (such as Google Cardboard VR) with your smartphone, the experience is awesome!

javascript VR and AR

There are a ton of built-in filters and effects available. Use the dropdown box to select a desired filter. The Time Delay and Glitch effect can be used to create dizzy, funny or scary effects, these are messing around with the frames.

There is a special feature "maestro" which is the button at the very bottom. The basic idea is to brainstorm musical beats from images, which conceptually could be useful to musicians. This uses a certain algorithm to generate basic electronic beats based on the pixel values on the image. You can tweak the algorithm or implement your own.

For more info and YouTube demos go to Github (and star us ❤): https://github.com/healzer/AlterWorld

AlterWorld in Video Production

The capabilities provided by OpenCV can be used for creating custom and unique scenes for films, music videos and art:

YouTube video:

https://www.youtube.com/watch?v=pEJJ3V9Xj20

YouTube video:

https://www.youtube.com/watch?v=_tJR69mexgc

YouTube video:

https://www.youtube.com/watch?v=nTPr-cHSumU

YouTube video:

https://www.youtube.com/watch?v=T5qy3fP7LZk

YouTube video:

https://www.youtube.com/watch?v=9hYuiqnYNEQ

YouTube video:

https://www.youtube.com/watch?v=PwOEMtuf5Q8

YouTube video:

https://www.youtube.com/watch?v=3pNXoRaPlPg

The shots from these videos have been rendered using OpenCV in Python and then edited in Adobe Premiere Pro.

Top comments (0)