changing the image source using jquery and Kurento

Question

I use Kurento-magic-mirror and everytime i would change image, i am forced to change the name of the picture mario-Wings.png.

Here is the code shown

function getopts(args, opts)
{
  var result = opts.default || {};
  args.replace(
      new RegExp("([^?=&]+)(=([^&]*))?", "g"),
      function($0, $1, $2, $3) { result[$1] = decodeURI($3); });
 
  return result;
};
 
var args = getopts(location.search,
{
  default:
  {
    ws_uri: 'ws://' + location.hostname + ':8888/kurento',
    hat_uri: 'http://' + location.host + '/img/mario-wings.png',
    ice_servers: undefined
  }
});

suppose we have several images at the interface Now, I would like to change the image by making a click.

I started to create a function but this function is not automatic by against this changes the picture at startup

function changeImage(nom){
		

	console.log(" Avant Changement de l'image ");
	args = getopts(location.search,
	{
	   default:{
		    ws_uri: 'ws://' + location.hostname + ':8888/kurento',
   	            hat_uri: 'http://' + location.host + '/img/test5.jpg',
		    ice_servers: undefined 
		   }	
        });

	$("#test5").attr('src', 'img/test5.jpg');
	console.log("Après Changement de l'image ");
			
}

How to solve this problem ???

Help me please...

Answer 1

You are changing the variable, but not doing anything with it. Following the lead of the tutorial, this is what you need to do

function changeImage(hatUri, offsetXPercent, offsetYPercent, widthPercent, heightPercent) {
   filter.setOverlayedImage(hatUri, offsetXPercent, offsetYPercent, widthPercent, heightPercent,
      function(error) {
         if (error) return onError(error);
         console.log("Set overlay image");
      });
}

I strongly recommend that you study the examples, and understand each line of code. If you change a value in the client, but don't instruct the media server to change the value too, it's useless.