Unit 5: 4-4 error in accessing camera stream

Course Support Developing Web Interfaces For ROS
1

I get a 404 error when trying to access the webvideo_address link directly, or when trying to connect to the robot. [The connect fails due to the 404 error.] I’ve fallen back to using your source files, but the error still exists.

I do see the camera topic:

user:~/webpage_ws/unit_05$ rostopic list | grep camera
/camera/depth/camera_info
/camera/depth/image_raw
/camera/depth/points
/camera/parameter_descriptions
/camera/parameter_updates
/camera/rgb/camera_info
/camera/rgb/image_raw
/camera/rgb/image_raw/compressed
/camera/rgb/image_raw/compressed/parameter_descriptions
/camera/rgb/image_raw/compressed/parameter_updates
/camera/rgb/image_raw/compressedDepth
/camera/rgb/image_raw/compressedDepth/parameter_descriptions
/camera/rgb/image_raw/compressedDepth/parameter_updates
/camera/rgb/image_raw/theora
/camera/rgb/image_raw/theora/parameter_descriptions
/camera/rgb/image_raw/theora/parameter_updates
/camera/scan
user:~/webpage_ws/unit_05$

And this is the output from the web_video_server:

user:~$ rosrun web_video_server web_video_server _port:=11315
[ INFO] [1605573167.046055148]: Waiting For connections on 0.0.0.0:11315
[ INFO] [1605573246.642739358, 2396.200000000]: Handling Request: /cameras/
[ INFO] [1605573286.817560779, 2436.360000000]: Handling Request: /cameras/
[ INFO] [1605573340.590392037, 2490.120000000]: Handling Request: /cameras/
[ INFO] [1605573400.167118568, 2549.680000000]: Handling Request: /cameras/
[ INFO] [1605574769.075423473, 3918.070000000]: Handling Request: /cameras/stream?topic=/camera/rgb/image_raw&width=320&height=240
[ INFO] [1605575052.833198636, 4201.730000000]: Handling Request: /cameras/stream?topic=/camera/rgb/image_raw&width=320&height=240

Should we still be using your version of the js library, or use the one from ros.org?

2

Hello @cmadson.eng,

Apologizes for the delay to answer you. We found an issue related to the connection to the web_video_server in our platform and we are working on it.

In the meantime, I can suggest you to try a workaround in order to show the camera streaming on the webpage.

In the data attribute of main.js, you need to add:

    cameraAddress1: '',
    cameraAddress2: '',

Then, in the methods setCamera and setCamera2, change to the following:

setCamera: function () {
    let without_wss = this.rosbridge_address.split('wss://')[1]
    let domain = without_wss.split('/')[0] + '/' + without_wss.split('/')[1]
    const topicName = '/camera/rgb/image_raw'
    this.cameraAddress1 = 'https://' + domain + '/stream' + '?topic=' + topicName + '&width=400&height=300'
},
setCamera2: function () {
    let without_wss = this.rosbridge_address.split('wss://')[1]
    let domain = without_wss.split('/')[0] + '/' + without_wss.split('/')[1]
    const topicName = '/camera/rgb/image_raw'
    this.cameraAddress2 = 'https://' + domain + '/stream' + '?topic=' + topicName + '&width=400&height=300'
},

Finally, in the html file, you must replace the columns that contains the div for the cameras with the following:

<div class="col-md-6 col-sm-6 text-center">
    <iframe width="400" height="300" style="border:none;" :src="cameraAddress1"></iframe>
</div>
<div class="col-md-6 col-sm-6 text-center">
    <iframe width="400" height="300" style="border:none;" :src="cameraAddress2"></iframe>
</div>

Sorry for the inconvenience, we are working to fix that issue. Let me know if you were able to fix that and go ahead with the course.

Regards

3

Hi @cmadson.eng ,

thank you very much for reporting the issue.

The issue has finally been solved today. The cameras should load fine in this course from now on.

Please let us know in case you have any new observations.

Cheers.