🇺🇦 We stand with Ukraine! 🇺🇦

Beginner Question about Plugin Development(Opencv.js)

Development
#1

I am working on a plugin that obtains an image/video from the webcam feed, performs some operations on it in python specifically using opencv,numpy, TensorFlow, and sends it back the result to the front end.
My question is how do I get the image/webcam URL link from the user into the python function in init.py and how do I send the result back to the front end?

My initial approach was to use OpenCV js and perform the operations using a function in JS and display the result there itself. However, I couldn't find a way to include the OpenCV js library in the script.

Tried using the below lines in the jinja2 file but it did not work.

<script async src="opencv.js" ></script>
<script src="utils.js"></script>

I am fairly new to plugin development so these questions might feel redundant. If this has already been discussed before, kindly provide the link of the same.

Thanks in advance

#2

you'd be better off using opencv python I suspect, otherwise the comparison operations you're going to be doing would require the web interface to be loaded all the time.

self._settings.global_get(["webcam", "snapshot"]) would give you the setting that is stored globally, or you could store your own settings and have the user input it.

This you would typically use something like

self._plugin_manager.send_plugin_message(self._identifier, {"parameter1": "", "parameter2": ""})

and then in your view model you grab the message with

self.onDataUpdaterPluginMessage = function (plugin, data) {
			if (plugin !== "<plugin_identifier>") {
				return;
			}
			// do something with data
2 Likes
#3

Hi jnellie,
Thanks for your help. It worked. I have a few follow-up questions. I need to display the webcam feed on the front end.

  1. Could you also tell me how can I get the webcam settings similar to self._settings.global_get(["webcam", "snapshot"]) in js in order to display the webcam feed?

  2. I was going through your plugin multicamview, where you take webcam settings from the user. I want to do the same but for a single cam. How can I get that updated settings(or any other parameter for that matter) from the user back to the python side?

Thanks

#4

This should be something you could do using a settingsViewModel dependency in the js and binding the jinja to the internal observable settingsViewModel.settings.webcam_snapshotUrl for snapshot or settingsViewModel.settings.webcam_streamUrl for the mjpgstream url.