问如何在微软团队扩展中实现MS scanBarCode API
EN

Stack Overflow用户

提问于 2021-09-16 06:26:50

回答 1查看 135关注 0票数 0

我在MS团队中有一个现有的扩展应用程序(Node.js)。我对QR或条形码扫描仪功能的集成感兴趣。

我已经将media权限添加到清单中。
我正在为API使用@microsoft/teams-js库。

在运行这个应用程序时，我会看到下面这个错误：

ReferenceError:未在对象处定义窗口。(/Users/dch/Desktop/GitHub/MedxNote/DCH/medxtasks-extension-api/node_modules/@microsoft/teams-js/dist/MicrosoftTeams.min.js:1:227)

在扩展应用中使用API可行吗？

或者，我是否必须在web应用程序中运行API (角)并在扩展中使用TaskModule中的API？

而且，没有在Docs女士中找到任何示例应用程序。

编辑：

我在实现后的问题是，这个API的用例是什么，这个API有什么特别之处，，因为在任何webapp中，它似乎都是一个普通的条形码。

microsoft-teams

node.js

botframework

回答 1

Stack Overflow用户

发布于 2021-09-16 23:14:41

通过实验，我成功地构建了集成QR或条码扫描器在MS扩展中的解决方案。

我用的方法是，

通过调用角应用程序中的API，
在扩展Task module WebView中提供应用程序的端点。

清单更新：

"devicePermissions": [
    "media",
],

角应用程序：

import { Component, OnInit } from '@angular/core';
import * as microsoftTeams from '@microsoft/teams-js';

@Component({
    selector: 'app-qr-scanner',
    templateUrl: './qr-scanner.component.html',
    styleUrls: ['./qr-scanner.component.sass'],
})

export class QrScannerComponent implements OnInit {

    constructor() {}

    displayText = '';
    result = '';

    config: microsoftTeams.media.BarCodeConfig = {
        timeOutIntervalInSec: 30,
    };

    ngOnInit(): void {
        microsoftTeams.initialize();
    }

    onClick() {
        microsoftTeams.media.scanBarCode((error: microsoftTeams.SdkError, decodedText: string) => {
            if (error) {
                if (error.message) {
                    console.log(' ErrorCode: ' + error.errorCode + error.message);
                } else {
                    console.log(' ErrorCode: ' + error.errorCode);
                }
                this.displayText = error.message;
            } else if (decodedText) {
                this.displayText = decodedText;
                console.log(decodedText);
            }
        }, this.config);
    }

    showResult() {
        this.result = this.displayText;
    }
}

<div style="margin: 10px">
    <div>
        <button (click)="onClick()" class="btn-cm" style="color: #58ef47; margin: 2px">Scan the Code</button>
    </div>
    <div>
        <button (click)="showResult()" class="btn-cm" style="color: #58ef47; margin: 2px">Get Result</button>
    </div>
</div>

<mat-label>{{ result }}</mat-label>

扩展应用程序(NodeJS)：

....
 return {
    task: {
      type: 'continue',
      value: {
         height: 600,
         width: 600,
         title: 'Task module WebView',
         url: `https://example.com/qrscanner`
      }
    }
};