Embedding images on the web page

Course Support Developing Web Interfaces For ROS
21

I reproduced the same environment in my local computer, the main change is the configuration of the MJPEGCANVAS.Viewer, since our student platform has specific configurations.

Try this one:

setCamera: function() {
    let host = 'localhost:8080'
    let viewer = new MJPEGCANVAS.Viewer({
        divID: 'divCamera',
        host: host,
        width: 320,
        height: 240,
        topic: '/camera/rgb/image_raw',
        ssl: false,
    })
},

Check the video attached to see how I launched the local environment, Iā€™m using Turtlebot 3 waffle to have a camera working.

1 Like
22

oh thank you. It worked well.
Best wish,

1 Like