Issue rendering embedded iFrame YouTube Video on msteams utilizing BotFramework Task Modules

1
votes

Issue

Upon clicking "Show Video" button from bot. MSTeams does not render the embedded iFrame. Result is an empty modal that pops up.

enter image description here enter image description here

Goal

Build out a feature displaying an embedded video mid dialog utilizing BotFramework (Python).

In production will be using Microsoft Stream. To keep it simple, just using publicly accessible YouTube video.

Partial solution

I was able to resolve the above issue in an internal environment. When migrating over to an external environment, ran into the same issue while the previous solution did not work.

Trials

I'm going to relay what I attempted just incase this helps someone else as it was not a clear path for me.

  1. Explore built in video card that is "hero card like" from BotFramework. 06.using-cards

This does not work in msteams and as it is "not supported."

  1. Display a video in msteams with "task modules" 54.teams-task-module

Tried running off ngrok - did not work.

Added ngrok domain to validDomains array in teams manifest json - did not work.

Try the bot deployed with domain added to manifest - did not work.

https

Looking into the docs, msteams require https.

Mind you that msteams desktop is just an electron variation so the web version is essentially the same.

Debugging

Looked at the network logs from msteams as a web app. Checking the "invoke" response when looking at the traffic logs, the "url" value starts with "https". enter image description here

Hitting the endpoint to view the static html file hosted in Azure App Service. The result was to an unsecured http. enter image description here

The Solve

Enable https only traffic in the App Service Network configurations. enter image description here

The modal now renders the iFrame of the YouTube video! enter image description here

Present issue

Now in client's environment and the original issue presented itself again although enabling https did not resolve it this time around. I've checked the App Service configuration and MSTeams App Manifest's validDomains. Once I click the button to show video, it does not display any traffic past "invoke". I feel it's something about not being able to access the html page hosted in the App Service once again.

enter image description here

1
pythoniframeazure-web-app-servicebotframeworkmicrosoft-teams

1 Answers

1
votes

You're kind of listing a few issues in the same question, but I'll see if I can help with one or more.

  1. Your browser 'Not secure' message - this is simply a browser/'user' issue, so to speak. Azure is configured to answer by default on both httpS and regular http. If you just type the address in the browser, by default it will use http, so you've changed the setting in Azure to force httpS in both cases. This will solve your typing-in-the address issue, but it's not the real problem because the user would never type it in - they would access the site via Teams which has hard-coded the httpS address

  2. Regarding the page not showing, its definitely a domain validity issue. It's always worth checking the format of your domains (you just need 'www.contoso.com', not 'https://www.contoso.com'), but in this case, because you have are using a task module, there will be a 'composeExtension' section in your manifest, I think. This has its own 'valid domain's section, in the following format:

"messageHandlers": [
        {
          "type": "link",
          "value": {
            "domains": [
              "whatever.azurewebsites.net"
            ]
          }
        }
      ]

It looks like you might be missing this additional domain value.