Alexa - How to send image to user?

Question

I'm using a Lambda function for my Alexa Skill. For my launch intent, I query DynamoDB and return a String that I first want to convert into a QRCode and then I want to return it to the Alexa Device as an Image inside the responseBuilder

Alexa works fine displaying images from external urls such as

const rabbitImage = "https://i.imgur.com/U6eF0oH.jpeg";

return responseBuilder
        .speak(say)
        .withStandardCard("Welcome to Alexa", "description", rabbitImage, rabbitImage)
        .reprompt('try again, ' + say)
        .getResponse();

But I'm stuck on how to send the QRCode back to the Alexa Device in the responseBuilder.

I'm using a nodejs library called qrcode that can convert the String into a QRCode and then into base64.

https://www.npmjs.com/package/qrcode

But according to the Alexa docs for sending a "card" aka image, back to the user it has to be a url.

https://developer.amazon.com/en-US/docs/alexa/custom-skills/include-a-card-in-your-skills-response.html

The Alexa Skills Kit provides different types of cards:

A Standard card also displays plain text, but can include an image. You provide the text for the title and content, and the URL for the image to display.

So I'm not sure if the base64 generated by the qrcode library would work in this case.

What's the best way to send the dynamically generated QRCode back to the Alexa Device as a response in this scenario?

const LaunchRequest_Handler = {
    canHandle(handlerInput) {
      const request = handlerInput.requestEnvelope.request;
      return request.type === 'LaunchRequest';
    },
    handle(handlerInput) {
      const responseBuilder = handlerInput.responseBuilder;


      //Perform query to DynamoDB

      var stringToCreateQRWith = "8306e21d-0c9e-4465-91e9-0cf86fca110d";

      //Generate qr code and send back to user here
      //???Unsure how to do and what format to send it in
      var qrImageToSendToUser = ???

      return responseBuilder
        .speak(say)
        .withStandardCard("Welcome to Alexa", "description", qrImageToSendToUser , qrImageToSendToUser )
        .reprompt('try again, ' + say)
        .getResponse();

    }

Dutiful

I'd probably not even convert it to base64, but rather to png, upload this image to an open-permission S3 bucket (which will enable you to use an http-link for every stored object) and use this link to refer to the picture. Keep in mind that this is not a really secure solution, technically all your QR codes are exposed to public internet! However, from how I understand the cited documentation, images are only valid via URL anyway, so this might be a general issue for your use case. – Adsorb

Since you are generating a QR code, you're probably going to want to use a pre-signed url to secure the contents of the QR code and prevent anyone from scanning every qr code you generate in an open S3 bucket. So your process would be to generate the QR code, upload the image file to S3, generate the pre-signed url, and then send the pre-signed url to Alexa. Info on pre-signed urls: boto3.amazonaws.com/v1/documentation/api/latest/guide/… – Morrison

Answer 1

As @kopaka proposed, this is the way to go. There is no way around it.

As per the documentation

They are a few thing you need to have in mind.

On the images itself, you will want to create 2 images with 720px x 480px and 1200px x 800px. To make sure they display nicely on multiple screen size. Otherwise they do not guarantee the best experience for your user, as they may scale up/down the image to fit.

On the storage choice, you need to make sure to be able to serve those images via Https and with a valid ssl certificate trusted by amazon.

Officialdom