The video component allows you to:

• Display live and archived video.
• Play and stop the video in archive mode.
• Go to a certain time in archive mode.

To use the video component, it is necessary to:

1. Configure the web server (see 웹 서버 구성).
2. Add an iframe element to a custom web page.

3. In this element, specify the web server address.

   <iframe src="http://10.0.11.66:81/embedded.html" width="800px" height="600px" id="iframe"> test </iframe>

4. Using the Web API, send the commands to the video component (see 비디오 구성 요소 운영을 위한 API).

1. Select the video camera and its mode.

   type InitMessage = {type: 'init', mode: 'live' | 'archive', origin: string, time: Date, options?: Options}

   The options object allows you to control the archive panel — hide it or show it.

   type Options = {archivePane?: boolean}

   The origin object corresponds to the VIDEOSOURCEID identifier (see 비디오 카메라 목록 및 정보 가져오기).

2. Select a different video camera in the video component. Usually used after the init command to change a video camera.

   type RelnitMessage = {type: 'relnit', mode: 'live' | 'archive', origin: string, time: Date, options?: Options}

3. Switch between the archive and live video.

   type SwitchMode = {type: 'live' | 'archive'}

4. Start and stop the video playback from the archive.

   type PlaybackCommand = {type: 'play' | 'stop'}

5. Go to a certain time in the archive.

   type SetTimeCommand = {type: 'setTime', time: Date}

6. Focus on the selected camera.

   type SetCameraCommand = {type: 'setCamera', origin: string}

sendMessage({ type: 'init', mode: 'live', origin: 'SERVER1/DeviceIpint.1/SourceEndpoint.video:0:0'});

Go to the archive mode:

sendMessage({type: 'archive'})

Go to the live mode:

sendMessage({type: 'live'})

Start the playback of archive video:

sendMessage({type: 'play'})

Stop the video:

sendMessage({type: 'stop'})

Go to a certain time in archive mode:

sendMessage({type: 'setTime', time: new Date("2019-07-25 09:00:00")});