How to display HTML5 Video Tag in silhouette shape?

[Sherzod]

procedure TMainForm.UniButton15Click(Sender: TObject);
begin
  UniSession.AddJS('var ctx = '+ UniCanvas1.JSName +'._cc_; '+
                   'var video = document.createElement("video");'+
                   'video.setAttribute("id", "video");'+
                   'var playing = false; '+
                   'var mask = new Image(); '+

                   'function startRendering() '+
                   '{ '+
                   '  playing = true; '+
                   '  requestAnimationFrame( render ); '+
                   '} '+

                   'function stopRendering() '+
                   '{ '+
                   '  playing = false; '+
                   '} '+

                   'function render() '+
                   '{ '+
                   '  ctx.globalCompositeOperation = "copy"; '+
                   //'  ctx.drawImage(mask, 0, 0, canvas.height * mask.height/mask.width, canvas.height); '+
                   '  ctx.drawImage(mask, 0, 0, canvas.width, canvas.height); '+
                   '  ctx.globalCompositeOperation = "source-in"; '+
                   '  ctx.drawImage(video, 0, 0); '+
                   '  if( playing ) '+
                   '  { '+
                   '    requestAnimationFrame( render ); '+
                   '  } '+
                   '} '+

                   'var canvas = ' + UniCanvas1.JSName +'._c_;'+
                   'var context = canvas.getContext("2");'+

                   'video.muted = true; '+
                   'video.autoplay = true; '+
                   'video.loop = true; '+
                   'video.crossOrigin = mask.crossOrigin = "anonymous"; '+
                   'video.onplaying = startRendering; '+
                   'video.onpause = stopRendering; '+
                   'mask.src = "https://upload.wikimedia.org/wikipedia/commons/e/ee/Black_Peace_Dove.svg"; '+

                   'mask.onload = function() '+
                   '{ '+
                   '  video.src = "https://upload.wikimedia.org/wikipedia/commons/transcoded/d/de/Flying-pigeons-tokyo-japan-slowmotion-2021-5-28.webm/Flying-pigeons-tokyo-japan-slowmotion-2021-5-28.webm.480p.vp9.webm"; '+
                   '  video.play(); '+
                   '} '
                   );
end;

 

[Fred Montier]

Thanks

I will make a project example and post here ...

This is very useful.