ChromaKey on video layer

  • Hello,
    I’m working on a project using KRPano, and my goal is to include in bottom left of the screen a video of a man on a green screen. I have to remove this green screen, I founded the option « chroma key » on hotspots, but I found nothing for fix a hotspot to the screen and defining it specific placement.

    My solution was to use a <layer> instead of <hotspot>, but I can’t make chromakey work on layer...

    Do someone have any usable solution please ?

    Thanks,
    Navalex.

    A front-end web developer, specialized in Virtual Tours and ReactJS

    Edited once, last by Navalex (February 25, 2021 at 9:28 PM).

  • Hi,

    Chromakey is WebGL-feature and only hotspots are rendered by WebGL, the layers are HTML/CSS elements.

    But there would be an 'indirect' possibility to place a hotspot like a layer on the screen:

    Set the 'flying' setting to '1', then hotspot will be always centered in the middle of the screen and then use the onresize event to set/calculate the ox/oy (offset position) setting to move the hotspots around on the screen.

    E.g. here code to place the hotspot like a layer in the right bottom corner:

    For other corners or offset just modify the onresize calculation slightly (changed signs, additional offsets).

    Note - the zoom or distorted settings of the hotspot would need to be set to false or to be removed.

    Best regards,
    Klaus

  • Hey,

    That approximatly what I finally done, thanks for your help.
    But I had strange behaviour, like resize only called on project startup but not on window resize.. So I put the action on event "onviewchanged" and "onnewscene" to track the more often possible the size, seems to work ^^

    I have a last question, is there a way to compute the height/width of an element with a "prop" attribute, to get it real size ? (need for calculation)

    Thanks,
    Navalex

    A front-end web developer, specialized in Virtual Tours and ReactJS

  • I want to know how we can put hotspot in rightbottom

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!