Can we enable full screen option on a Video Card in bot framework?

174 Views Asked by At

I have published my bot in DirectLine channel. I am using "Video card" for videos (which are basically from youtube) to play in the chat window. I found there is no full-screen option enabled in Video card when I try to play a video(youtube) in the video chat window, Video is playing but cannot open in full-screen mode. When I try to click on the full-screen option it is showing "Full Screen is unavailable".

enter image description here

Here is code snippet for calling video card.

if (youtubepath[0].file_type == "video")
            { 
                reply.Attachments.Add(GetVideoCard(name.ToUpperInvariant(), "https://www.youtube.com/watch?v=" + youtubepath[0].youtube_id.ToString()).ToAttachment());
            }

Video Card

        public static VideoCard GetVideoCard(string name, string youtubepath)
    {
        string baseurl = "";
        var videoCard = new VideoCard
        {
            Title = name,

            Media = new List<MediaUrl>
            {
                new MediaUrl()
                {
                    Url =baseurl + youtubepath,
                },
            },
        };

        return videoCard;
    }

HTML:

<!DOCTYPE html>
<html>
<head>
    <link href="https://cdn.botframework.com/botframework-webchat/latest/botchat.css" rel="stylesheet" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <div id="botabc">
        <script src="https://cdn.botframework.com/botframework-webchat/latest/botchat.js"></script>
        <script src="CognitiveServices.js"></script>
        <script>
            const store = window.WebChat.createStore({},({ dispatch }) => next => action =>{if (action.type === 'DIRECT_LINE/POST_ACTIVITY_FULFILLED'){document.querySelector('ul[role="list"]').lastChild.scrollIntoView({behavior: 'smooth', block: 'start'});}return next(action);});
            window.WebChat.renderWebChat({directLine: window.WebChat.createDirectLine({ secret: 'xxxx' }),store}, document.getElementById('webchat'));

        </script>
        <script>
            const params = BotChat.queryParams(location.search);
             const speechOptions = {
                speechRecognizer: new CognitiveServices.SpeechRecognizer({ subscriptionKey: 'xxxx' }),
                speechSynthesizer: new CognitiveServices.SpeechSynthesizer({
                gender: CognitiveServices.SynthesisGender.Female,
                subscriptionKey: 'xxxx',
                voiceName: 'Microsoft Server Speech Text to Speech Voice (en-US,JessaRUS)'
                })
              };
            BotChat.App({
                resize: 'detect',
                speechOptions: speechOptions,
                user: {id:'1',name:'Bhakt'},
                directLine: { secret: 'xxxx' },
                bot: { id: 'botid' },
                resize: 'detect'}, 
                document.getElementById("botabc"));
        </script>
  </body>
  </html>

Suggest me a way to overcome this problem.

Thanks in Advance!!

0

There are 0 best solutions below