External Images into Lens

Hi @Blnk Digital

Yes this is possible through Remote APIs:

You would set them up as normal, and then send the image object in the body of the response from the app.

If looking at the CatFactRemoteApiService example you would respond to the request from the Lens like this:

"import_image" -> {
// Get the image however makes sense for your use case 
                 val fromRaw = context.resources.openRawResource(R.raw.image).use { it.readBytes() }

                var connection: HttpURLConnection? = null
                try {
                    val url = URL("$BASE_URL")
                    connection = (url.openConnection() as HttpURLConnection).apply {
                        doOutput = false
                    }
                    val body = connection.inputStream.readBytes()
                    onResponse.accept(request.toSuccessResponse(body = fromRaw))

And this would send the image to the Lens:

In the Lens you would load the image through the RemoteMediaModule. When importing the spec into Lens Studio via the Asset Library, you get a few generated files one of which is API Module which has a few helpers and the endpoints listed for your spec. You will want to do something very similar to handleAPIResponse but will need to change it a bit to read in the image:

The main thing is that rather than parsing the body of the response you will want to pass the entire response into a RemoteMediaModule to interpret the image. So something like:

// Get a reference to a Remote Media Module

//@input  Asset.RemoteMediaModule mediaModule; 

function handleImageResponse(response, cb) {
    if (response.statusCode !== 1) {
        var errorMessage = getErrorMessage(response);
        print(errorMessage);
        cb(true, errorMessage);
    } else {
        script.mediaModule.loadResourceAsImageTexture(
            response.asResource(),
            function(texture) {
                cb(false, texture);
            },
            function(error) {
                print(error)
            });        
    }
}

ApiModule.prototype.import_image = function(image_id, cb) {
    var req = global.RemoteApiRequest.create();
    req.endpoint = "import_image";
    req.parameters = {
        "image_id": image_id,
    };
    this.remoteServiceModule.performApiRequest(req, function(response) {
        if(cb) {
            handleImageResponse(response, cb);
        }
    });
};

This, will call the callback and then pass the texture to it as the second parameter, then for whichever image you wish to change, you would set the baseTex value:

//@input Component.Image screenImage;

var displayImage  = function(isError, texture) {
    if(!isError)
        script.screenImage.mainMaterial.mainPass.baseTex = texture;
}


ApiModule.import_image("1", displayImage)