Skip to content

TWebCamera

Below is a list of the most important properties methods and events for the TWebCamera. TWebCamera is using the MediaDevices.getUserMedia() API. Because of this, two mayor limitations are:

  • The TWebCamera won't work in any browser that does not support the getUserMedia API.
  • It is not yet supported in iOS PWA.
Designtime Runtime

Selecting a device

The initialization of the available camera devices is an async process. The setup requires a few steps but with the provided properties and events you can create a list for the user to pick their preferred camera to use.

Suppose a TWebCamera is already available on the form. Set the CameraType property to ctSelected. In this example we will use a TWebComboBox to create a list of devices.

In the OnCameraDevicesInitialized event we can fill the TWebComboBox:

procedure TForm1.WebCamera1CameraDevicesInitialized(Sender: TObject);
var
  I: Integer;
  d: TCameraDevice;
begin
  for I := 0 to WebCamera1.CameraDevices.Count - 1 do
    WebComboBox1.Items.Add(WebCamera1.CameraDevices.Items[I].Name);

  //If you want to select the first available device in the TWebComboBox, then:
  if WebComboBox1.Items.Count <> 0 then
  begin
    WebComboBox1.ItemIndex := 0;

    //If you want to start the camera stream immediately
    //with the first selected device, then:
    d := WebCamera1.CameraDevices.GetDeviceByName(WebComboBox1.Items[0]);
    WebCamera1.SetSelectedCameraDevice(d);
    WebCamera1.Start;
  end;
end;

And to handle the selection of the device from the user, we can use the OnChange event of the TWebComboBox:

procedure TForm1.WebComboBox1Change(Sender: TObject);
var
  d: TCameraDevice;
begin
  d := WebCamera1.CameraDevices.GetDeviceByName(WebComboBox1.Items[WebComboBox1.ItemIndex]);
  WebCamera1.SetSelectedCameraDevice(d);
end;
Now you can call WebCamera1.Start when the camera stream needs to be started.

Starting the camera stream automatically

If the component would start the camera streaming itself if the selected devices has changed, then it might lead to undesirable behavior in some applications. Therefore, this is something the developer have to take care of themself. If you want to start the camera as soon as the selected device has changed, then you can do so by using the OnSwitchCamera event:

procedure TForm1.WebCamera1SwitchCamera(Sender: TObject;
  ACamera: TCameraDevice);
begin
  WebCamera1.Start;
end;

HTML template tag

The HTML tag the component can be associated with in an HTML template. Assign the ID attribute with a unique value and set the identical value to the ElementID property. Detailed information can be found in the Use of HTML templates topic.

HTML tag <VIDEO ID=”UniqueID”></VIDEO>
ElementID UniqueID

Properties for TWebCamera

Property Description
BrowserSupportedConstraints: TStringList Public property for settings for camera constraints
See:
https://developer.mozilla.org/en-US/docs/Web/API/Media_Capture_and_Streams_API/Constraints
CameraDevices: TCameraDevices A read-only property to retrieve a collection of camera devices that are available.
CameraType: TCameraType Set or retrieve the camera type. Available values are: ctFront, ctRear, ctSelected. In case of ctFront and ctRear the component will try to use the preferred camera. ctSelected is used in combintation with the CameraType property, where a selected camera must be set based on the available devices.
Paused: Boolean A read-only property to retrieve if the camera is in a paused state.
SnapShotAsBase64: string A read-only property to retrieve a snapshot from the camera as a Base64 encoded string.
SnapShotAsImageData: TJSImageData A read-only property to retrieve a snapshot from the camera as a TJSImageData.

Methods for TWebCamera

Property Description
Pause Method to pause the camera stream.
Resume Method to return to the paused camera stream.
SetSelectedCameraDevice(aDevice: TCameraDevice) Method to set the selected camera device.
Start Method to start the camera stream.
Stop Method to stop the camera stream completely.
StartP: TJSPromise A promise-based variant of Start.

Events for TWebCamera

Property Description
OnCameraDevicesInitialized Event triggered when the camera devices are initialized and available.
OnCameraPause Event triggered when the camera gets paused.
OnCameraResume Event triggered when the camera resumes.
OnCameraStreamPlay Event triggered when the camera stream starts playing.
OnCameraStop Event triggered when the camera stream stops.
OnClick Event triggered when the control is clicked.
OnDblClick Event triggered when the control is double clicked.
OnError Event triggered when the underlying getUserMedia call is rejected (e.g. there are no devices connected or the user declined the access). The name and the message is passed as a parameter.
OnMouseDown Event triggered when the mouse is down on the control.
OnMouseEnter Event triggered when the mouse enters the control.
OnMouseLeave Event triggered when the mouse leaves the control.
OnMouseUp Event triggered when the mouse goes up on the control.
OnMouseMove Event triggered when the mouse moves on the control.
OnSwitchCamera Event triggered when the selected camera device changes.