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