Video Input injected into HTML template

Hey Everyone!

I am curious if there is a way (either through the default client or the NPM package CasparConnection) to inject a live video input (Via a Decklink 4k Extreme) into an HTML template. The idea would then be to apply SVG filters to the video to make some interesting wipes, bumps, ect.

Thank you in advance for helping me out and please let me know if you need any more info.

Might be possible to do something wtih webrtc and MSE perhaps. But before you go down that rabbit hole, what are you looking for? Something that you can’t do with MIXER commands, overlaying/blending videos etc?

As Hrein already wrote: You can do a lot with MIXER commands, and, at least in Flash, you can connect to Caspar from the template and issue these commands from there. I do that regularly for weird things :slight_smile:

I am not familiar with the MIXER at all so I am unsure.

Here is the best case scenario for what I am trying to achieve with the live video transitions. Link

If it is possible with HTML, SVG Filters, and JS in the version of Chrome Caspar runs those should could possible, right?

Sorry for the delayed response and thank you again for your help!

Info on MIXER commands is here: https://github.com/CasparCG/help/wiki/AMCP-Protocol#mixer-commands

Most of what I see in the video would usually just be done by playing the transition (with an alpha) over the current video and cutting to the next one while the transition hides it. And that’s how everybody does it live.

You can check out the NRK fork of CCG (https://github.com/nrkno/tv-automation-casparcg-server) - it has a stinger transition option, though I think it isn’t documented.

Thank you for the MIXER Command link. After reading a few of the options, it looks like it will work perfectly!

Thank you Hrein!

Just to update this. The stinger transition is available in nightly 2.2 builds also. Here’s documentation for it: https://github.com/CasparCG/server/pull/1042

1 Like

We’ve done it but using NDI. Using the free ‘virtual input’ tool from Newtek, you can input any NDI stream on your network. Windows, from that moment on, will see it as a USB videodevice (like a webcam). That can be easily used in HTML-code (like Skype does, and any other website which uses your webcam in-site)

3 Likes

That is a a great idea! Just to make sure I have the idea correct, simply use the browser to open the “webcam” (Actually an aux feed from a switcher) and display it on the page then apply any effects after that.

You could probably also use the Web Presenter for this, in a SDI only environment.

May I recommend AJA’s since it can handle 1080p.

Or If you already have any HDMI acquisition USB card like https://www.avermedia.com/fr/product-detail/GC510
I really suggest to use this SDI <> HDMI Cross converter Best quality/price I ever found and use since many years without any issue: https://www.decimator.com/Products/MiniConverters/MD-HX/MD-HX.html
You can achieve with this little box any HDMI/SDI conversion/amplification / framerate change / loop in all directions. Most of the time stuff that cost 10x more with other hardware.

Me from the future! You CAN do this with HTML Canvas, SVG clipPath and some JavaScript. Please let me know if anyone needs or wants more details.

Sure! Would love to know more about what you settled on.

As far as the live video injection into an HTML template goes, I used this answer here.

It allows you to take a Blackmagic Decklink and use it as a webcam in a template. I read a few posts that said this won’t work on a Linux michine because the BMD drivers are different. I can’t confirm though.

Where you looking for SVG and Canvas references?

1 Like