会议中的Meeting App

news/2025/2/23 0:27:56/

接着我们上两篇博客文章,我们说了如何开发会议前和会议后的 meeting app,那如何开发一个会议中的 app 呢,实际上比较简单,我们只需要在 tab 的配置项中勾选下面这两个选项即可。

in-meeting-app

勾选后,我们安装app到我们的一个会议中,然后开始会议,在会议的工具条上就可以看到我们的app的图标,点击后就会出现侧边栏。如下图:

in-meeting-app

在侧边栏的上方有一个向上的小箭头。这个图标和共享桌面的图标类似,点击后实际上就是共享我们的app给所有用参与会议的人

in-meeting-app

所有参与会议的用户都会在会议窗口的正中间显示出我们的app,如下图所示。

in-meeting-app

这个功能就是我们前面所勾选的 “Share to stage”。

看到这里,大家可能会问,前几篇文章提到的tab,和这里的侧边栏的tab,和stage中的tab,我们都是使用同一个页面,那如果我们想要显示给用户看不同内容,有什么方法吗?也就是说这个页面本身如何判断出自己当前是怎么被 teams 调用到的。

到我写这篇文章的时候,官方文档里我并没有找到答案,所以我自己做了一些实验,一开始的设想是url,所以我把url都打印了出来,发现 teams 并没有在url上做什么特别的设置,实际上我觉得 teams 可以在 query string上做一些处理。

做了一些尝试之后,我发现上篇文章讲的 getContext 中一个参数 frameContext 就可以表明当前页面所在的场景。

我们在 Configure.cshtml 里增加这个脚本。

...<div id="meeting-context"></h1>
...<script>microsoftTeams.initialize();microsoftTeams.getContext(function(context) {document.getElementById('meeting-context').innerText = "FrameContext: " + context.frameContext;});

同样,我们在 MainPage.cshtml 里也加上类似的代码:

<body style="background: white"><h1>MainPage</h1><div id="meeting-context"></div><script>microsoftTeams.initialize();microsoftTeams.getContext(function(context) {document.getElementById('meeting-context').innerText = "FrameContext: " + context.frameContext;});</script>
</body>

让我们再来重新安装和使用 meeting app,看看能得到什么内容。

这个是安装页面:

in-meeting-app

这个是会议聊天界面里的tab:

in-meeting-app

这个是会议详情界面里的tab:

in-meeting-app

这个是会议中的侧边栏和共享app的界面:

in-meeting-app

可以看到我们得到了不同的值,在配置界面是 settings,在会议聊天界面和会议详情界面是 content,在会议中的侧边栏是 sidePanel,在 stage 界面是 meetingStage。有了这些信息后我们就可以在我们的页面中显示不同的内容了。


http://www.ppmy.cn/news/586639.html

相关文章

会议安排注意事项

会议安排 1. 会议议题&#xff0c;议程&#xff0c;明确目的&#xff0c;提前发给关系人 2. 会议参会人控制最小范围和最小参会时间&#xff1b;确认参会人员必须守时&#xff08;不能超过3min&#xff09;&#xff1b;会议过程必须有纪律&#xff0c;得有个主持人把控整个局…

如何使用iPhone进行电话会议

Your iPhone allows you to call up to five people at once, making it easy to set up a quick conference call. The other people don’t need anything special–just any old cellular or landline telephone. 您的iPhone允许您一次最多呼叫五个人&#xff0c;从而轻松设…

缓存穿透、缓存击穿、缓存雪崩

缓存穿透、缓存击穿、缓存雪崩 缓存穿透定义&#xff1a;缓存穿透是指用户恶意查询一个缓存中不存在的数据&#xff0c;导致请求直接穿透到数据库上&#xff0c;导致数据库压力过大甚至宕机 解决方法&#xff1a; 1.缓存空对象 2.限制缓存的TTL时间 3.利用布隆过滤器技术 4.设…

【Axure高保真原型】智慧城市-城市管理大屏可视化案例

今天和大家分享智慧城市-城市管理大屏可视化分析大屏案例的原型模板&#xff0c;包括当日案件统计、案件分类、案件列表、案件总览、处理情况、公众满意度、处理趋势……里面包含多个高保真的图表模板&#xff0c;具体效果可以点击下方视频观看 【原型效果】 【Axure高保真原型…

Linux conda 环境迁移 服务器之间迁移

网上很多方法语焉不详&#xff0c;本文主要介绍在Linux系统之间进行单一环境迁移&#xff0c;从服务器A迁移到服务器B的两种方式&#xff1a; conda list方式进行Linux系统在线环境迁移拷贝envs方式进行Linux系统离线环境迁移 conda list方式 迁移完毕后需要手动安装缺失的py…

生娃囤货清单

一、妈妈待产必备用品 1.产褥垫 医院的待产包里一般都会有&#xff0c;内检时需要铺一下&#xff0c;但是数量不多&#xff0c;一般需要自己准备一些。我当 时买的子初的 90*60cm 最大尺寸&#xff0c;又厚又大&#xff0c;内检用有点浪费。生完住院的时候&#xff0c;护士给…

​sqlserver数据库备份导出亿级数据有哪些需要注意?

在SQL Server处理数亿条数据的导出备份过程中&#xff0c;需要注意以下几个重要的步骤和注意事项&#xff1a; 一、导出数亿条数据 1.选择正确的导出工具和格式 SQL Server提供了多种导出数据的工具和格式&#xff0c;如SSIS、BCP、SQL Server Management Studio和CSV等。其…

淘宝、京东、天猫商品名称数据集下载最新版本。包括中药、化学器材、摄影、动物、酒水、办公事务。

淘宝、京东、天猫商品名称数据集下载最新版本。包括中药、化学器材、摄影、动物、酒水、办公事务。 第一类 用于工业、科学、摄影、农业、园艺、森林的化学品&#xff0c;未加工人造合成树脂&#xff0c;未加工塑料物质&#xff0c;肥料&#xff0c;灭火用合成物&#xff0c;淬…