Search code examples
c#botframeworkchatbotadaptive-cards

Adaptive card media element not showing video

I am making chatbot application where i need to play video on chat window so for that i used adaptive card and media element inside it. i copied json from https://adaptivecards.io/designer and made card of it and send as attachment of messageactivity to the client.below is my code Json Code

{
    "type": "AdaptiveCard",
    "body": [
        {
            "type": "Media",
            "poster": "https://adaptivecards.io/content/poster-video.png",
            "sources": [
                {
                    "mimeType": "video/mp4",
                    "url": "https://adaptivecardsblob.blob.core.windows.net/assets/AdaptiveCardsOverviewVideo.mp4"
                }
            ]
        }
    ],
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.1",
    "fallbackText": "This card requires Media to be viewed. Ask your platform to update to Adaptive Cards v1.1 for this and more!"
}

and in the c# i have used it like this

string json = "{  '$schema': 'http://adaptivecards.io/schemas/adaptive-card.json',  'type': 'AdaptiveCard',  'version': '1.1',  'fallbackText': 'This card requires Media to be viewed. Ask your platform to update to Adaptive Cards v1.1 for this and more!',    'body': [        {            'type': 'Media',            'poster': 'https://adaptivecards.io/content/poster-video.png',            'sources': [                {                    'mimeType': 'video/mp4',                    'url': 'https://adaptivecardsblob.blob.core.windows.net/assets/AdaptiveCardsOverviewVideo.mp4'                }            ]        }    ]}";
AdaptiveCard adaptiveCards = new AdaptiveCard();
adaptiveCards = AdaptiveCard.FromJson(json).Card;

IMessageActivity messageActivity = context.MakeMessage();
var Attach = new Attachment()
{
    ContentType = AdaptiveCard.ContentType,
    Content = adaptiveCards

};
messageActivity.Attachments.Add(Attach);
List<CardAction> lstCard = GetSuggestedActions();

messageActivity.SuggestedActions = new SuggestedActions()
{
    Actions = lstCard
};
await context.PostAsync(messageActivity);

But it shows nothing when i test it on both bot emulator and after deployed. one thing i noticed on bot emulatot it gives me error

**[err-client] Uncaught TypeError: Cannot read property 'querySelectorAll' of null C:\Users\amit.yadav\AppData\Local\botframework\app-3.5.29\resources\app\node_modules\rxjs\Subscriber.js 227 13 {} ** and output looks like below

enter image description here

please help me where i am doing wrong thanks in advance.

Solution

  • Try upgrading to the latest version of Emulator: https://github.com/Microsoft/BotFramework-Emulator/releases/tag/v4.4.1

    While Web Chat does currently seem to have issues displaying media in Adaptive Cards, you can try video cards in the meantime if that will help unblock you: https://learn.microsoft.com/en-us/dotnet/api/microsoft.bot.schema.videocard