Use Webcam component to add a real-time monitoring screen in web pages. Before adding the Webcam component to the web project, you need to install your IP web camera and transcode the RTSP address of your camera into HLS.

See Adding image for IP camera or Adding image from USB camera for an example.

User Defined Web Page supports five stream video types through the Http protocol. The supported video types vary from browsers. Refer to HTML5 Video for more information on the supported video formats by a given browser.

In the Webcam properties, you customize the position, size, title, and title style of the component. You can set the following properties in particular:

• Changing size and position of an component

• Setting the title and tooltip

• Setting the animation properties

Set the animation properties

You need to provide a stream source for Webcam component under Properties -> Animation.

1. Click "..." at the right end of the row Http live stream address.

2. In the Webcam-Http Live Stream Address window, enter the address.

   Note According to the security policy of browsers, if the LOGO! web server is in HTTPS mode, then address you fill in the Webcam-Http Live Stream Address field must be HTTPS address. Otherwise the browser will reject the connection.

3. Save the change by clicking OK or quit the change by clicking Cancel.

   The text value will change to the default value when you select Reset to Default.

4. Click the down arrow at the right of the row Live Stream Video Type and select the video type.

Set the title and tooltip

Set the title and tooltip under Properties -> Value:

1. Click "..." at the right end of the row Title/Tooltip.

2. In the Webcam-Title/Webcam-Tooltip window, set the value as you need.

3. Save the change by clicking OK or quit the change by clicking Cancel.

   The text value will change to the default value when you select Reset to Default.

Properties for Webcam

• Basic

  • Name: Webcam

  • Location: you can modify the location coordinate for the Webcam.

  • Size: you can modify the width and height information for the Webcam.

• Styles

  • Font: select Font, Font Style and Size information separately in the Font pane. Click the OK button to save the changes or click the Reset to Default button to reset to the default settings.

  • Text Color: click Text Color Swatches, select a swatch, and click OK button.

  • Text Align: align the text on left, center, or right.

• Values

  • Title: Set the title for the Webcam

  • Tooltip: Set the tooltip for the Webcam

• Animation

  • Http Live Stream Address: enter the address of http live stream.

  • Live Stream Video Type: select the video types of the live stream.