Need help moving from Flash to HTML templates

ouellettec · November 16, 2019, 11:55pm

I bet you are onto something with the sRGB output. I use SVG clipPath and masks for all the alpha stuff so no big deal there!

Scratch that, @hreinnbeck found the answer.

noumaan · November 17, 2019, 11:54pm

maybe. it was hard to find webm converter on that time and the one i got was with predefined presets

now i’m going to test it with handbrake thank you for correction.

thanks, now i’m definitely going to use HTML with WebM.

for quick answer we can use streaming and can we play directshow in html video tag ?

ouellettec · November 18, 2019, 12:53am

I found Microsoft’s docs on Direct Show here, it looks like it is a C++ API. Definitely a bit out of my league. Do you have any additional remcondation? And or a way to do this without C++ knowledge?
Also, I had an idea to create a local video stream with VLC then point the HTML video to it. Maybe that would work?

rrebuffo · November 18, 2019, 1:44am

Use NDI’s Virtual Input or BMD WDM capture and then:

You can do VLC to NDI to Webcam to HTML. A long and sweet chain!
Works

(VLC is a bit buggy when playing a list of videos, live streams work OK).

Yoostin · November 18, 2019, 2:26am

A couple of FYIs that might shorten those chains a little -

You can tap live video streams using Caspar’s native FFMPEG. I can’t remember the exact syntax but is more or less vanilla FFMPEG RTMP connection string. Local file playout is what CasparCG does. It’s just a matter of thinking about building your layers in CasparCG rundowns rather than HTML.

Depending on the version of CEF in your CasparCG build you can load and play a local file in HTML5. Here’s an example on JSFiddle A playlist could be run in JS within the template to avoid the VLC playlist bugs mentioned. Easy management too, just load a jsonp playlist.

Taking it further - WebRTC. It’s been a while since I was down that rabbit hole - again depending on the CEF & therefore Chromium version in your CasparCG build. You can receive a video stream from any WebRTC source. I’m pretty sure a video element can be the source for an outgoing WebRTC media stream - combined with the above local file HTML player it gets neato, no?

BTW - the above is all that’s really needed to build one’s own Skype TX equivalent. But with the benefit of the contributor not needing Skype on their end. Just a decent web browser - great for call-ins etc.

rrebuffo · November 18, 2019, 3:09am

Most of the videos play well in templates (I used that here), I think that is not an issue.
Playing videos or live inputs in another Caspar layer won’t let you change the video parameters in sync with HTML templates (you can send the commands to both but dealing with that in the client side (both in the official as well as custom ones) is inefficient.
I suggested VLC because it gives you more versatile live input options (even TV tuners) but you can show any WDM input that way. NDI Virtual Input is very convenient for that matter.

That’s very cool!

rrebuffo · November 18, 2019, 4:12am

This is a very good example of that (it starts after 22s):

This is very difficult (read impossible) to do without templates that handle the input internally.

Here I've put together a simple example


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>LiveVideo</title>
<script type="text/javascript" src="gsap.min.js"></script>
<style>
html,
body
{
    background-color: transparent;
    overflow: hidden;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

*,
*:before,
*:after
{
    box-sizing: inherit;
}
#container
{
    position: absolute;
    background: #333;
    border: .2vw #aaa outset;
	bottom: 20vh;
	right: 10vh;
	width: 20vw;
	height: 5.2vh;
    border-radius: 2vh;
    overflow: hidden;
    opacity: 0;
    box-shadow: black 0 1vh 2vh;
}



#textTag
{
    z-index: 1000;
    background: #aaa;
    color: #333;
    border-radius: 1vh;
    position: absolute;
    top: .5vw;
    left: .5vw;
    margin: 0;
    padding: .5vh 1vh;
    line-height: 1em;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-weight: bolder;
    font-size: 1vw;
}

#liveVideo
{
    z-index: 0;
	width: 100%;
	height: 100%;
    background: transparent;
    opacity: 0;
}
</style>
</head>
<body>
<div id="container">
    <p id="textTag"></p>
    <div>
        <video id="liveVideo" autoplay="true">
        </video>
    </div>
</div>
<script>
var video = document.querySelector("#liveVideo");
var text = document.querySelector("#textTag");


if (navigator.mediaDevices.getUserMedia) {       
	navigator.mediaDevices.getUserMedia({video: true})
  .then(function(stream) {
    video.srcObject = stream;
  })
  .catch(function(err0r) {
    console.log("Something went wrong!");
  });
}

function play()
{
    gsap.from("#container",{duration:1,y:"+=500",ease: "power3.out",delay:1});
    gsap.to("#container",{duration:.5,opacity:1,ease: "power3.out",delay:1});
    gsap.to("#container",{duration:1,css:{height:"20vh"},ease: "power3.inOut",delay:2.5});
    gsap.to("#liveVideo",{duration:1,opacity:1,ease: "power3.out",delay:3});
}

function update(data)
{
    jsdata = JSON.parse(data);
    if(jsdata.hasOwnProperty("f0")) text.textContent = jsdata.f0;
}
</script>
</body>
</html>

NDI