search

CasparCG / server

CasparCG Server is a Windows and Linux software used to play out professional graphics, audio and video to multiple outputs. It has been in 24/7 broadcast production since 2006. Ready-to-use downloads are available under the Releases tab https://casparcg.com.
GNU General Public License v3.0
904 stars 269 forks source link

HTML Video Tag Performance #1298

Closed brucedk closed 4 years ago

brucedk commented 4 years ago

Hello guys.

I was trying to create svg clipaths in html to dont have to create large files of video with alpha, then I made a html with the svg and a webm video. The problem is that the html producer play the video to bad. I'm using the 2.3 lts server, with NDI consumer, in 1920x1080p5994

brucedk commented 4 years ago

Capture5

hreinnbeck commented 4 years ago

We need a lot more information or an example.

brucedk commented 4 years ago

ok, what do you need? log? the html? the only thing I think I cant put here is the webm

hreinnbeck commented 4 years ago

What parameters did you use to create the webm, how are you playing it, are you applying anything on the video via CSS (transforms, filters etc..)?

brucedk commented 4 years ago

The machine is a i9 9900KS, with a RTX 2070 SUPER, with 32gb ram.

What parameters did you use to create the webm, how are you playing it, are you applying anything on the video via CSS (transforms, filters etc..)?

the html is pure simple, the css has only basic config, let me put ir here

<body style="border: 0; margin: 0; padding: 0">
<svg 
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink"
 width="0px" height="0px">
 <defs>
 <clipPath id="teste">
<path  
 d="M0.000,0.000 C639.936,0.000 1280.064,0.000 1920.000,0.000 C1920.000,359.964 1920.000,720.036 1920.000,1080.000 C1280.064,1080.000 639.936,1080.000 0.000,1080.000 C0.000,720.036 0.000,359.964 0.000,0.000 ZM152.000,492.000 C202.995,492.000 254.005,492.000 305.000,492.000 C305.931,488.931 307.077,488.251 308.000,485.000 C288.002,485.000 267.998,485.000 248.000,485.000 C248.000,484.333 248.000,483.667 248.000,483.000 C268.665,483.000 289.335,483.000 310.000,483.000 C313.333,476.667 316.667,470.333 320.000,464.000 C369.662,464.000 419.338,464.000 469.000,464.000 C470.333,465.667 471.667,467.334 473.000,469.000 C475.396,467.641 477.448,466.250 479.000,464.000 C481.690,465.298 484.084,466.933 486.000,469.000 C489.254,467.836 489.681,465.024 492.000,464.000 C541.328,464.000 590.672,464.000 640.000,464.000 C643.333,470.333 646.667,476.667 650.000,483.000 C670.331,483.000 690.669,483.000 711.000,483.000 C711.000,483.667 711.000,484.333 711.000,485.000 C691.335,485.000 671.665,485.000 652.000,485.000 C652.000,485.333 652.000,485.667 652.000,486.000 C653.297,487.327 654.379,491.217 656.000,492.000 C669.332,492.000 682.668,492.000 696.000,492.000 C733.330,492.000 770.670,492.000 808.000,492.000 C808.000,340.015 808.000,187.985 808.000,36.000 C589.022,36.000 369.978,36.000 151.000,36.000 C151.000,36.333 151.000,36.667 151.000,37.000 C154.934,43.371 152.000,62.222 152.000,71.000 C152.000,100.664 152.000,130.336 152.000,160.000 C152.000,270.656 152.000,381.344 152.000,492.000 ZM1112.000,492.000 C1162.995,492.000 1214.005,492.000 1265.000,492.000 C1265.931,488.931 1267.077,488.251 1268.000,485.000 C1248.002,485.000 1227.998,485.000 1208.000,485.000 C1208.000,484.333 1208.000,483.667 1208.000,483.000 C1228.665,483.000 1249.335,483.000 1270.000,483.000 C1273.333,476.667 1276.667,470.333 1280.000,464.000 C1329.662,464.000 1379.338,464.000 1429.000,464.000 C1430.333,465.667 1431.667,467.334 1433.000,469.000 C1435.396,467.641 1437.448,466.250 1439.000,464.000 C1441.690,465.298 1444.084,466.933 1446.000,469.000 C1449.254,467.836 1449.681,465.024 1452.000,464.000 C1501.328,464.000 1550.672,464.000 1600.000,464.000 C1603.333,470.333 1606.667,476.667 1610.000,483.000 C1630.331,483.000 1650.669,483.000 1671.000,483.000 C1671.000,483.667 1671.000,484.333 1671.000,485.000 C1651.335,485.000 1631.665,485.000 1612.000,485.000 C1612.000,485.333 1612.000,485.667 1612.000,486.000 C1613.297,487.327 1614.379,491.217 1616.000,492.000 C1629.332,492.000 1642.668,492.000 1656.000,492.000 C1693.330,492.000 1730.670,492.000 1768.000,492.000 C1768.000,340.015 1768.000,187.985 1768.000,36.000 C1549.022,36.000 1329.978,36.000 1111.000,36.000 C1111.000,36.333 1111.000,36.667 1111.000,37.000 C1114.934,43.371 1112.000,62.222 1112.000,71.000 C1112.000,100.664 1112.000,130.336 1112.000,160.000 C1112.000,270.656 1112.000,381.344 1112.000,492.000 ZM152.000,1025.000 C202.662,1025.000 253.338,1025.000 304.000,1025.000 C305.135,1022.674 306.138,1021.684 307.000,1019.000 C307.333,1019.000 307.667,1019.000 308.000,1019.000 C308.000,1018.667 308.000,1018.333 308.000,1018.000 C288.002,1018.000 267.998,1018.000 248.000,1018.000 C248.000,1017.333 248.000,1016.667 248.000,1016.000 C268.331,1016.000 288.669,1016.000 309.000,1016.000 C310.584,1013.197 318.264,997.194 320.000,996.000 C369.662,996.000 419.338,996.000 469.000,996.000 C470.554,998.665 472.534,1001.022 475.000,1000.000 C477.684,999.109 477.589,998.972 479.000,997.000 C481.584,998.401 485.236,1002.170 487.000,1001.000 C498.535,993.427 516.426,996.000 535.000,996.000 C569.996,996.000 605.004,996.000 640.000,996.000 C643.666,1002.666 647.334,1009.334 651.000,1016.000 C670.998,1016.000 691.002,1016.000 711.000,1016.000 C711.000,1016.667 711.000,1017.333 711.000,1018.000 C691.669,1018.000 672.331,1018.000 653.000,1018.000 C653.000,1018.667 653.000,1019.333 653.000,1020.000 C661.492,1028.046 680.092,1025.000 696.000,1025.000 C733.330,1025.000 770.670,1025.000 808.000,1025.000 C808.000,873.015 808.000,720.985 808.000,569.000 C589.022,569.000 369.978,569.000 151.000,569.000 C151.000,569.333 151.000,569.667 151.000,570.000 C154.934,576.371 152.000,595.222 152.000,604.000 C152.000,633.664 152.000,663.336 152.000,693.000 C152.000,803.656 152.000,914.344 152.000,1025.000 ZM1112.000,1025.000 C1162.662,1025.000 1213.338,1025.000 1264.000,1025.000 C1265.135,1022.674 1266.138,1021.684 1267.000,1019.000 C1267.333,1019.000 1267.667,1019.000 1268.000,1019.000 C1268.000,1018.667 1268.000,1018.333 1268.000,1018.000 C1248.002,1018.000 1227.998,1018.000 1208.000,1018.000 C1208.000,1017.333 1208.000,1016.667 1208.000,1016.000 C1228.331,1016.000 1248.669,1016.000 1269.000,1016.000 C1270.584,1013.197 1278.264,997.194 1280.000,996.000 C1329.662,996.000 1379.338,996.000 1429.000,996.000 C1430.554,998.665 1432.534,1001.022 1435.000,1000.000 C1437.684,999.109 1437.589,998.972 1439.000,997.000 C1441.584,998.401 1445.236,1002.170 1447.000,1001.000 C1458.535,993.427 1476.426,996.000 1495.000,996.000 C1529.997,996.000 1565.003,996.000 1600.000,996.000 C1603.666,1002.666 1607.334,1009.334 1611.000,1016.000 C1630.998,1016.000 1651.002,1016.000 1671.000,1016.000 C1671.000,1016.667 1671.000,1017.333 1671.000,1018.000 C1651.669,1018.000 1632.331,1018.000 1613.000,1018.000 C1613.000,1018.667 1613.000,1019.333 1613.000,1020.000 C1621.492,1028.046 1640.092,1025.000 1656.000,1025.000 C1693.330,1025.000 1730.670,1025.000 1768.000,1025.000 C1768.000,873.015 1768.000,720.985 1768.000,569.000 C1549.022,569.000 1329.978,569.000 1111.000,569.000 C1111.000,569.333 1111.000,569.667 1111.000,570.000 C1114.934,576.371 1112.000,595.222 1112.000,604.000 C1112.000,633.664 1112.000,663.336 1112.000,693.000 C1112.000,803.656 1112.000,914.344 1112.000,1025.000 Z"/>
 </clipPath>
 </defs>
</svg>
<video style="clip-path: url(#teste); border: 0; margin: 0; padding: 0" width="1920" height="1080" autoplay loop src="bg.webm" type="video/webm">
</video>
</body>
hreinnbeck commented 4 years ago

What's the performance without the clip-path? What parameters/settings did you use when creating the webm?

If it performs fine without the clip-path I'd suggest trying to wrap the video in a div and applying the clip-path to the div instead of the video.

brucedk commented 4 years ago

Ok, I will test both ways and return here later

brucedk commented 4 years ago

What's the performance without the clip-path?

It runs ok, no lag video

What parameters/settings did you use when creating the webm?

I used Handbreak, with VP9 and 5kbps, and made another test with VP8 in 5kbps too, both worked the same way, good without the clip path, bad with clip path

If it performs fine without the clip-path I'd suggest trying to wrap the video in a div and applying the clip-path to the div instead of the video.

This doesn't make any difference to the output if the clip path is set to the div or the video tag, it bad the same way.

hreinnbeck commented 4 years ago

Then that's probably a performance issue in CEF, nothing we can fix. If you use ffmpeg you can create VP9 with alpha.

ronag commented 4 years ago

maybe 2.3 lts + gpu enabled?

brucedk commented 4 years ago

FYI, this html works ok inside de html of VMix software (their CEF is v77 chrome equivalent, and it has GPU Acelleration enable)

brucedk commented 4 years ago

@ronag yes, my mistake, gpu enable was false, now all working, thanks