V2 Display Code

DisplaySampleCodeV2.js

// IMPORTANT: Display Interface for your skill should be enabled through the Amazon developer console
// See this screenshot - https://alexa.design/enabledisplay

/* HELPER FUNCTIONS */

// returns true if the skill is running on a device with a display (show|spot)
function supportsDisplay(handlerInput) {
  var hasDisplay =
    handlerInput.requestEnvelope.context &&
    handlerInput.requestEnvelope.context.System &&
    handlerInput.requestEnvelope.context.System.device &&
    handlerInput.requestEnvelope.context.System.device.supportedInterfaces &&
    handlerInput.requestEnvelope.context.System.device.supportedInterfaces.Display

  console.log("Supported Interfaces are" + JSON.stringify(handlerInput.requestEnvelope.context.System.device.supportedInterfaces));
  return hasDisplay;
}

/* Image files */

const DisplayImg1 = {
  title: 'Jet Plane',
  url: 'https://s3.amazonaws.com/skill-images-789/display/plane340_340.png'
};
const DisplayImg2 = {
  title: 'Starry Sky',
  url: 'https://s3.amazonaws.com/skill-images-789/display/background1024_600.png'

};

/* 
BODY TEMPLATE 1 Sample, the below code goes inside the intent Handle function 
*/

  if (supportsDisplay(handlerInput)) {
      const myImage1 = new Alexa.ImageHelper()
        .addImageInstance(DisplayImg1.url)
        .getImage();

      const myImage2 = new Alexa.ImageHelper()
        .addImageInstance(DisplayImg2.url)
        .getImage();

      const primaryText = new Alexa.RichTextContentHelper()
        .withPrimaryText('Welcome to the skill!')
        .getTextContent();

     handlerInput.responseBuilder.addRenderTemplateDirective({
        type: 'BodyTemplate1',
        token: 'string',
        backButton: 'HIDDEN',
        backgroundImage: myImage2,
        title: "space facts",
        textContent: primaryText,
      });
  }


/* 
BODY TEMPLATE 2 Sample, the below code goes inside the intent Handle function 
*/

if (supportsDisplay(handlerInput)){
  
  const myImage1 = new Alexa.ImageHelper()
        .addImageInstance(DisplayImg1.url)
        .getImage();

      const myImage2 = new Alexa.ImageHelper()
        .addImageInstance(DisplayImg2.url)
        .getImage();

      const primaryText = new Alexa.RichTextContentHelper()
        .withPrimaryText(speechOutput)
        .getTextContent();

        handlerInput.responseBuilder.addRenderTemplateDirective({
        type: 'BodyTemplate2',
        token: 'string',
        backButton: 'HIDDEN',
        backgroundImage: myImage2,
        image: myImage1,
        title: "space facts",
        textContent: primaryText
      });
      
//      handlerInput.responseBuilder.addHintDirective("This is a hint");
}

/* 
BODY TEMPLATE 7 Sample, the below code goes inside the intent Handle function 
*/
    if (supportsDisplay(handlerInput) ) {
      const myImage1 = new Alexa.ImageHelper()
        .addImageInstance(DisplayImg1.url)
        .getImage();

      const myImage2 = new Alexa.ImageHelper()
        .addImageInstance(DisplayImg2.url)
        .getImage();

      const primaryText = new Alexa.RichTextContentHelper()
        .withPrimaryText(STOP_MESSAGE)
        .getTextContent();

      handlerInput.responseBuilder.addRenderTemplateDirective({
        type: 'BodyTemplate7',
        token: 'string',
        backButton: 'HIDDEN',
        backgroundImage: myImage2,
        image: myImage1,
        title: "space facts",
      });

}

/* ADD VIDEO DIRECTIVE FIRST ENABLE VIDEO INTERFACE on https://developer.amazon.com */

if (supportsDisplay(handlerInput) && handlerInput.requestEnvelope.context.System.device.supportedInterfaces.VideoApp) {


    handlerInput.responseBuilder.addVideoAppLaunchDirective("https://s3.amazonaws.com/media.dabblelab.com/video/visual-escape-01.mp4", "Video from pixabay.com",
    "Used under creative commons.");

  return handlerInput.responseBuilder.speak("Heres your video").getResponse();

}

I star your post!

Thanks alot ankkal. You made my day. Was searching for video streaming sample

Hi, i'm trying to reproduce this on my skill using nodeJS v10. The skill returned a invalid response. I am using an Echo Spot device, I have enabled the Alexa PL and Display Interface in order to allow my device to display an image.

I think the problem is in supportsDisplay(handlerInput) because it does not return a boolean type, but it returns this { templateVersion: '1.0', markupVersion: '1.0' }

Maybe, it is fine but I have seen in the code upside that this function has to return a boolean (true/false)

thanks in advance,
Pedro.