Is it possible to integrate inside a threaded camera to slint image

[MohaBeacon]

use nokhwa::{
    nokhwa_initialize,
    pixel_format::{RgbAFormat, RgbFormat},
    query,
    utils::{ApiBackend, RequestedFormat, RequestedFormatType},
    threaded::CallbackCamera
};

use slint::PlatformError;
use image;
use slint::slint;
slint!{
    import { Button }  from "std-widgets.slint";

global Palette {
    out property <color> window-background: #2e3440;
    out property <color> widget-background: #4c566a;
    out property <color> widget-stroke: #eceff4;
    out property <color> window-border: #d8dee9;
    out property <color> text-color: #eceff4;
    out property <color> hyper-blue: #5e81ac;
}

export component MainWindow inherits Window {
    background: Palette.window-background;

    width: 1024px;
    height: 720px;

    in property camera_image <=> camera_image.source;
    

    HorizontalLayout {
        VerticalLayout { 
            spacing: 3px;
            HorizontalLayout {
                camera_image := Image {
                    width: 1024px;
                    height: 720px;                    
                }
               
            }
            
            
        }
        
    }
}

}

fn main() -> Result<(),PlatformError> {
    
   
    let main_window = MainWindow::new()?;
    let handle_weak = main_window.as_weak();
    nokhwa_initialize(|granted| {
        println!("User said {}", granted);
    });
    let cameras = query(ApiBackend::Auto).unwrap();
    cameras.iter().for_each(|cam| println!("{:?}", cam));

    let format = RequestedFormat::new::<RgbFormat>(RequestedFormatType::AbsoluteHighestFrameRate);

    let first_camera = cameras.last().unwrap();
    
    let mut threaded = CallbackCamera::new(first_camera.index().clone(), format, |buffer| {
        let image = buffer.decode_image::<RgbAFormat>().unwrap();
        println!("{}x{}", image.width(), image.height());

        })
        .unwrap();
    threaded.open_stream().unwrap();
    let handle_copy = handle_weak.clone();
    loop{
        slint::invoke_from_event_loop(move || {
            let mw = handle_copy.unwrap();
            let ui_image = slint::Image::from_rgb8(slint::SharedPixelBuffer::clone_from_slice(
                &image,
                1024,
                720,
            ));
            mw.set_camera_image(ui_image);
    }

    Ok(())
}

[ogoffart]

Do your code work? What is your question?

It looks like you are not spinning the slint event loop.

So you probably want something like this: (untested)

fn main() -> Result<(),PlatformError> {
    
   
    let main_window = MainWindow::new()?;
    let handle_weak = main_window.as_weak();

    // Do the camera processing in a thread
    std::thread::spwan(|| {
      nokhwa_initialize(|granted| {
        println!("User said {}", granted);
      });
      let cameras = query(ApiBackend::Auto).unwrap();
      cameras.iter().for_each(|cam| println!("{:?}", cam));

      let format = RequestedFormat::new::<RgbFormat>(RequestedFormatType::AbsoluteHighestFrameRate);

      let first_camera = cameras.last().unwrap();
    
      let mut threaded = CallbackCamera::new(first_camera.index().clone(), format, |buffer| {
        let image = buffer.decode_image::<RgbAFormat>().unwrap();
        println!("{}x{}", image.width(), image.height());

        })
        .unwrap();
      threaded.open_stream().unwrap();
      loop{
        let handle_copy = handle_weak.clone();
        slint::invoke_from_event_loop(move || {
            let mw = handle_copy.unwrap();
            let ui_image = slint::Image::from_rgb8(slint::SharedPixelBuffer::clone_from_slice(
                &image,
                1024,
                720,
            ));
            mw.set_camera_image(ui_image);
      }
   });

    // run the slint event loop in the main thread
    slint::run_event_loop()
}

Something like that. Makes sense?

[MohaBeacon]

Not working fine.
Errors - one the event loop - not able to access the handle_copy outside of the loop.

loop{
        let handle_copy = handle_weak.clone();
        slint::invoke_from_event_loop(move || {
            let mw = handle_copy.unwrap();
            let ui_image = slint::Image::from_rgb8(slint::SharedPixelBuffer::clone_from_slice(
                &image,
                1024,
                720,
            ));
            mw.set_camera_image(ui_image);
      }

Variable -> image not able to be accessed from the loop

[ogoffart]

Ah right, you need to copy the image on each loop iteration so it can be moved to the slint thread.

[ogoffart]

Alternatively, you can create the SharedePixelBuffer in the camera thread:

loop{
        let handle_copy = handle_weak.clone();
        let buffer = slint::SharedPixelBuffer::clone_from_slice(
                        &image,
                        1024,
                        720,
            );
        slint::invoke_from_event_loop(move || {
            let mw = handle_copy.unwrap();
            let ui_image = slint::Image::from_rgb8(buffer);
            mw.set_camera_image(ui_image);
      }

[MohaBeacon]

Got it working but not as expected with respect to the format that is being sent into the buffer. Also Slint windows hangs while handling the buffer.

`use nokhwa::{
nokhwa_initialize,
pixel_format::{RgbAFormat, RgbFormat},
query,
utils::{ApiBackend, RequestedFormat, RequestedFormatType},
threaded::CallbackCamera
};

use slint::PlatformError;
use image;
use slint::slint;
slint!{
import { Button } from "std-widgets.slint";

global Palette {
out property window-background: #2e3440;
out property widget-background: #4c566a;
out property widget-stroke: #eceff4;
out property window-border: #d8dee9;
out property text-color: #eceff4;
out property hyper-blue: #5e81ac;
}

export component MainWindow inherits Window {
background: Palette.window-background;

width: 1024px;
height: 720px;

in property camera_image <=> camera_image.source;


HorizontalLayout {
    VerticalLayout { 
        spacing: 3px;
        HorizontalLayout {
            camera_image := Image {
                width: 1024px;
                height: 720px;                    
            }
            
        }
        
        
    }
    
}

}

}

fn main() -> Result<(),PlatformError> {

let main_window = MainWindow::new()?;
let handle_weak = main_window.as_weak();
let thread = std::thread::spawn(move || {
nokhwa_initialize(|granted| {
    println!("User said {}", granted);
});
let cameras = query(ApiBackend::Auto).unwrap();
cameras.iter().for_each(|cam| println!("{:?}", cam));

let format = RequestedFormat::new::<RgbFormat>(RequestedFormatType::AbsoluteHighestResolution);

let first_camera = cameras.last().unwrap();

let mut threaded = CallbackCamera::new(first_camera.index().clone(), format, |buffer| {
    let image = buffer.decode_image::<RgbFormat>().unwrap();
    println!("{}x{} {}", image.width(), image.height(), image.len());
})
.unwrap();
threaded.open_stream().unwrap();
loop{
    let frame = threaded.last_frame().unwrap();
    let handle_copy = handle_weak.clone();
    let image = frame.decode_image::<RgbAFormat>().unwrap();
        slint::invoke_from_event_loop(move || {
            let mw = handle_copy.unwrap();
            let ui_image = slint::Image::from_rgb8(slint::SharedPixelBuffer::clone_from_slice(
                &image,
                1024,
                720,
            ));
            mw.set_camera_image(ui_image);
        })
        .unwrap();
}

});

main_window.run();
slint::run_event_loop();
Ok(())

}`

[dependencies] slint = "*" image = "*" nokhwa = { version = "0.10.3", features=["input-native", "output-threaded"] }

[MohaBeacon]

[MohaBeacon]

Question is to display image inside the Slint