Can i display a HTTP video stream in app designer ?

Hi guys ! I’m working on a project with my group, we’re using a robot and several cameras. Both the robot and the cameras are operating under matlab. We move the robot around with matlab, and we use a tracking program on our camera with matlab. I am trying to create an interface with appdesigner to gather our information during this project. I was wondering if I could simultaneously display a video (the one that uses the tracking program which is coded in matlab) and another video that comes from a HTTP source ? It means I have to connect both my computer and my camera on the same network. I want to display these video in an appdesigner interface, I’ve made one with 4 axis.

Answer 1

[Sugandhi]

Hi Maxime Devaux,

I understand that you want to simultaneously display tracking program and HTTP source videos in an app designer interface.

Yes, you can display both the video from the tracking program and the video from the HTTP source simultaneously in an App Designer interface, by using ‘axes’ components and ‘imshow’ function, for more information refer to the given example.

Here's an example of how you could modify your App Designer interface to display the two videos:

1. Create two `axes` components in your App Designer interface, by dragging and dropping the `axes` component from the Component Library onto your App Designer canvas.

2. Rename your axes components to make them easier to identify in your code, by selecting the axes components in the `Component Browser`, and then changing the `Tag` property (under identifiers section) to a descriptive name.

3. In your App Designer code, you will need to create a loop that updates the images displayed in the `axes` components. Inside the loop, use the `imshow` function to display the current frame of each video in the appropriate `axes`. The `imshow` function can display images from multiple sources, including HTTP URLs and image files.

4. Use the `videoinput` function to capture the frames from your camera connected to the computer, and then use the `snapshot` function to capture the current frame. For example:

% Create video object for camera
vid = videoinput('winvideo', 1, 'RGB24_640x480');

% Set properties of video object
set(vid, 'FramesPerTrigger', Inf);
set(vid, 'ReturnedColorSpace', 'rgb');

% Start video capture
start(vid);

while true
    
    % Capture frame from camera
    im_cam = getsnapshot(vid);
    
    % Display frame in an axes component
    imshow(im_cam, 'Parent', app.CameraAxes);
    
    % Load image from HTTP source
    im_url = imread('http://example.com/image.jpg');
    % Note: You will need to replace the URL in the `imread` function with the URL of the image you want to display.
    
    % Display frame in another axes component
    imshow(im_url, 'Parent', app.HTTPAxes);
    
    % Pause to allow time for processing and image display
    pause(0.1);
    
end

% Stop video capture
stop(vid);

By using this loop in your App Designer interface, you can display both videos simultaneously and update the images in real-time as they are captured.

For more understanding, kindly go through following links:

• imshow- https://www.mathworks.com/help/images/ref/imshow.html?searchHighlight=imshow&s_tid=srchtitle_imshow_1
• videoinput- https://www.mathworks.com/help/imaq/videoinput.html?searchHighlight=videoinput&s_tid=srchtitle_videoinput_1
• snapshot- https://www.mathworks.com/help/supportpkg/usbwebcams/ug/webcam.snapshot.html?searchHighlight=snapshot&s_tid=srchtitle_snapshot_1
• imread- https://www.mathworks.com/help/matlab/ref/imread.html?s_tid=doc_ta