NethVoice CTI streaming UI design

[andrea-marchionni]

Objective: Design a user interface mockup for a dedicated page displaying all connected intercoms, accessible via a camera icon in the main navigation. This page should clearly present the live feed (where available) and provide quick access to key intercom functionalities: capturing a screenshot, remotely opening the door, and initiating a voice call.

Context: The current interface (partially shown in the screenshot) displays individual video sources. The goal is to create a consolidated view for all intercoms.

Access Point: The user will navigate to this page by clicking on a camera icon located in the main header navigation (as visible in the provided screenshot).

Page Layout and Information:

The new page should display each connected intercom as a distinct visual element. For each intercom, the following information and interactive elements should be clearly presented:

• Live Video Feed (Placeholder): A prominent area displaying the live video feed from the intercom camera. If a live feed is not available, a placeholder image or a "No Video Feed" message should be shown.
• Intercom Name: Display the name of the intercom clearly below or adjacent to the video feed (e.g., "Cancello", "Porta").
• Internal Number: Clearly display the internal number associated with each intercom (e.g., "301", "302"). This should be easily identifiable.
• Screenshot Button (Camera Icon): An icon representing a camera. Upon clicking this button, the system should immediately capture and initiate the download of a still image (screenshot) of the current video feed for that specific intercom. Provide visual feedback upon successful capture and initiation of download (e.g., a brief confirmation message or animation).
• Open Door Button (Lock Icon): An icon representing an open or closed lock. Clicking this button should trigger the action to remotely open the door associated with that specific intercom. This action should occur without any further user interaction or confirmation prompt. Provide clear visual feedback indicating that the door opening command has been sent (e.g., a change in the lock icon state or a brief confirmation message).
• Call Button (Microphone Icon): An icon representing a microphone. Clicking this button should initiate a voice call to the intercom. The user should then be able to speak and hear through their device's microphone and speaker, respectively, to communicate with the person at the intercom. The mockup should visually indicate an active call (e.g., a change in the button's appearance or a dedicated call interface element).

Mockup Requirements:

• Visual Design: The mockup should maintain a consistent visual style with the existing interface
• States: For each interactive element (screenshot, open door, call), consider showing potential states (e.g., default, hover, active/in-progress).

[AmaLuci]

Mockups ready in Figma here