SnapShot for TWebMultimediaPlayer

Is there a way to get a SnapShot while playing video in TWebMultimediaPlayer?
The way we can it do in TWebCamera.

Hi,

Technically possible but CORS potentially will prevent you from doing that if the video is hosted by a 3rd party and not yourself.
See here: javascript - Canvas that created from video raising "Tainted canvases may not be exported." error when saving - Stack Overflow

If you are hosting the video then the idea is the following:

  • Create a canvas element
  • Assign the video width/height to the canvas width/height
  • Render the video image onto the canvas
  • Call toDataURL to retrieve the image as a base64 data url
procedure TForm2.WebButton1Click(Sender: TObject);
var
  canvas: TJSHTMLCanvasElement;
  vidElem: TJSHTMLElement;
begin
  if Assigned(ElementHandle) then
  begin
    vidElem:= WebMultimediaPlayer1.ElementHandle;
    canvas := TJSHTMLCanvasElement(document.createElement('canvas'));
    canvas.width := JS.toInteger(vidElem.Properties['videoWidth']);
    canvas.height := JS.toInteger(vidElem.Properties['videoHeight']);
    canvas.getContextAs2DContext('2d').drawImage(TJSObject(vidElem), 0, 0);

    //get the base64 image as JPEG and assign in to TWebImageControl
    WebImageControl1.URL := canvas.toDataURL('image/jpeg');
  end;
end;

Thank you very much! We are hosting the video files. I'll give it a try.

Thank you, the code worked perfectly.

1 Like