Botframework-webchat: YouTube card

[danmarshall]

We can show an interactive YouTube player similar to our HTML5 video player.

https://github.com/Microsoft/BotBuilder/issues/1984

[billba]

I guess the thing to do here is to sniff out the youtube domain from video file URLs and present them in a custom player. What other video providers would we support specially?

[bnookala]

I've been poking around at how to do this, and I think one could sniff the youtube domain and video ID in the Media component, and render an iframe with the youtube video embed URL instead of a video. Some parameters for this function can also be used and passed along to the embed URL. Seems like this would be the way to go: https://developers.google.com/youtube/player_parameters#Overview

As far as other video providers go, I would suggest vimeo and facebook.

[billba]

sounds good to me!

[bnookala]

Vimeo players also appear to be embeddable via iframe, similar to how the youtube player is built (see #303). I'm also working on an implementation of this.

[billba]

implemented by a number of recent PRs. Thanks, @bnookala!

[danmarshall]

Thanks @bnookala !!

[ghost]

I'm using this code to send youtube video :

Activity replyToConversation = activity.CreateReply("Should go to conversation, with a hero card"); replyToConversation.Attachments.Add(new Attachment(contentType: "video/mp4", name: "Simple Attachment Name", thumbnailUrl: "https://s29.postimg.org/ei98jsp7r/My_Bot.jpg", contentUrl: "https://youtu.be/A9Vu9n7YxrI")); await connector.Conversations.ReplyToActivityAsync(replyToConversation);

But doesn't work.

Any idea ? I read that you implemented this but i don't know how to use :D

Thank you in advance guys :)

[billba]

I can't speak to the C# SDK, but this is working for me in the Node SDK:

const msg = new builder.Message(session);
msg.addAttachment({contentType: 'video/mp4', contentUrl: 'https://youtu.be/A9Vu9n7YxrI'} as builder.IAttachment);
session.send(msg);

I don't think this is the cause of your issues, but note that there are several kinds of video cards. My code above is the simplest kind - it only allows the URL of the video. You can also send one of contentType: application/vnd.microsoft.card.video which has many more options including a thumbnail image, auto looping, etc.

[ghost]

For c# there is no .video property : https://docs.botframework.com/en-us/csharp/builder/sdkreference/dd/d32/_additional_properties_8cs_source.html

Tried this :

HeroCard.ContentType = "application/vnd.microsoft.card.video";

Throws an error :

The left-hand side of an assignment must be a variable, property or indexer

Also, i tried to override :

 public class HeroCardOverride : HeroCard
        {
            public HeroCardOverride()
            {
               HeroCard.ContentType = "application/vnd.microsoft.card.video";
            }
        }

The modifier 'override' is not valid for this item

[billba]

hero cards and video cards are two different things

[ghost]

Yes. I found out in docs.
https://docs.botframework.com/en-us/csharp/builder/sdkreference/d7/d82/_video_card_8cs_source.html

[ghost]

Why it doesn't show up ?

http://prntscr.com/eh163q

code :

 resultMessage.AttachmentLayout = AttachmentLayoutTypes.Carousel;
resultMessage.Attachments = new List<Attachment>();

 VideoCard video = new VideoCard()
                        {
                            Title ="title"
                            Media = getMedia(activities[counter]),
                        };

and my getMedia function :

 public IList<MediaUrl> getMedia (ActivityModel model)
        {
            IList<MediaUrl> mediaUrl = new List<MediaUrl>();
            MediaUrl item = new MediaUrl();
            item.Url = model.DocumentPath;
            mediaUrl.Add(item);
            return mediaUrl;
        }

[brandonh-msft]

@lonche There's a Sample for That ™ ;)
https://github.com/Microsoft/BotBuilder-Samples/blob/master/CSharp/demo-CardsAttachments/public-TestBot/Scorables/RichCards/VideoCardScorable.cs

new VideoCard
{
    Title = "Big Buck Bunny",
    Subtitle = "by the Blender Institute",
    Text = "Big Buck Bunny (code-named Peach) is a short computer-animated comedy film by the Blender Institute, part of the Blender Foundation. Like the foundation's previous film Elephants Dream, the film was made using Blender, a free software application for animation made by the same foundation. It was released as an open-source film under Creative Commons License Attribution 3.0.",
    Image = new ThumbnailUrl
    {
        Url = "https://upload.wikimedia.org/wikipedia/commons/thumb/c/c5/Big_buck_bunny_poster_big.jpg/220px-Big_buck_bunny_poster_big.jpg"
    },
    Media = new List<MediaUrl>
    {
        new MediaUrl()
        {
            Url = "http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4"
        }
    },
    Buttons = new List<CardAction>
    {
        new CardAction()
        {
            Title = "Learn More",
            Type = ActionTypes.OpenUrl,
            Value = "https://peach.blender.org/"
        }
    }
}.ToAttachment()

and I built a simple bot and put this in a method and it works just fine:

private async Task HandleMessageAsync(IDialogContext context, IAwaitable<object> result)
{
    var videoMsg = context.MakeMessage();
    videoMsg.Attachments.Add(new VideoCard("My Video", "a subtitle", "some text", media: new[] { new MediaUrl(@"http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4") }).ToAttachment());

    await context.PostAsync(videoMsg);
}

hope that helps

[ghost]

This is a little buggy :dagger: . Facebook allows only one video per message ?
Btw, how to show youtube videos ?

Incorrect number of files uploaded. Must upload exactly one file

[billba]

@lonche That sounds like a bug in Facebook :-) Different channels have different capabilities.

The way to show YouTube videos is simply to provide a YouTube URL

[ghost]

Yes. But Facebook does not render YouTube URL as a video when bot sends a message. Facebook renders YouTube URL without "preview".

How do you post YouTube videos ?

[bnookala]

hi @lonche - I think you may have confused Bot Framework webchat's implementation of youtube video previews with those of Facebook's. This issue and the pull request around it (https://github.com/Microsoft/BotFramework-WebChat/pull/303) very specifically only render youtube and vimeo video previews for video cards on the webchat client (this repository), and not facebook. How facebook/skype/slack/etc render their cards is up to them, and not us.

[hofman-p]

I have got the same problem. I'd like to render Youtube / Vimeo video clips, but that doesn't work with video cards, neither with more classical attachment as @billba solution (I'm not using Typescript, so don't the as builder.IAttachment).

So my 'ugly' solution is to use carousel of HeroCards with buttons openUrl to videos

[achrafbenalaya]

I tried this , on webchat works fine , i used my vidéo "http://iitbot.000webhostapp.com/IIT.mp4" and it works fine , but when tried it on messenger , it gives me :Sorry, my bot code is having an issue.
back to the bot i found this , "{"error":{"message":"(#100) Invalid data","type":"OAuthException","code":100,"error_subcode":2018032,"fbtrace_id":"E1LyycaFN8g"}} " and There was an error sending this message to your bot: HTTP status code InternalServerError , any help ?

[danmarshall]

Hello @achrafbenalaya since your issue functions correctly with WebChat and is nonfunctional on messenger, can you please file your issue with the BotBuilder repo? https://github.com/Microsoft/BotBuilder

[achrafbenalaya]

@danmarshall i found out the problem , that facebook do not allow 000webhostapp.com files or sites. thank you =)