microsoftTeams.barCode.scanBarCode() error 100: not supported #2870
Description
I'm trying to implement the barcode scanner for my Microsoft Teams app. I wanted to use the new microsoftTeams.barCode.scanBarCode() api since the old one is marked deprecated. I'm on version "@microsoft/teams-js": "^2.41.0".
Unfortunately, when trying to start the scan I get the error code 100 which to my understanding means "NOT_SUPPORTED_ON_PLATFORM".
https://learn.microsoft.com/en-us/microsoftteams/platform/concepts/device-capabilities/qr-barcode-scanner-capability#error-handling
This happens both on iOS and Android.
(BTW. the docs also still point to the deprecated microsoftTeams.media.scanBarCode api).
I tried the old way and it worked fine. Am I missing something?
Here's my current test code written as a React component, adapted from the official Microsoft sample:
import { useEffect, useState } from 'react';
import * as microsoftTeams from "@microsoft/teams-js";
import { Text, Button, Card } from '@fluentui/react-components'
import { BarCodeConfig } from '@microsoft/teams-js/dist/esm/packages/teams-js/dts/public/barCode';
interface ScanBarCodeProps {
onScanResult?: (value: string) => void;
onScanError?: (error: string) => void;
}
const ScanBarCode = ({ onScanResult, onScanError }: ScanBarCodeProps) => {
const [barCodeValue, setBarCodeValue] = useState('');
const [errorMessage, setErrorMessage] = useState('');
const [isScanning, setIsScanning] = useState(false);
const [isSupported, setIsSupported] = useState(false);
const [isPermissionGranted, setIsPermissionGranted] = useState(false);
useEffect(() => {
microsoftTeams.app.initialize().then(() => {
setIsSupported(microsoftTeams.barCode.isSupported());
if (isSupported && !microsoftTeams.barCode.hasPermission()) {
microsoftTeams.barCode.requestPermission().then(() => {
console.log('Permission granted for barcode scanning');
setIsPermissionGranted(true);
}).catch((error) => {
console.error('Error requesting permission for barcode scanning:', error);
setErrorMessage('Permission denied to access camera');
onScanError?.('Permission denied to access camera');
});
}
});
}, []);
// Method to scan barcode
function scanBarCode() {
setIsScanning(true);
setErrorMessage('');
setBarCodeValue('');
const config: BarCodeConfig = {
timeOutIntervalInSec: 30
};
// Method that enables the user to scan different types of barcode, and returns the result as a string.
microsoftTeams.barCode.scanBarCode(config).then((result) => {
setIsScanning(false);
if (result) {
setBarCodeValue(result);
onScanResult?.(result);
} else {
setBarCodeValue('');
}
}).catch((error) => {
setIsScanning(false);
let errorMsg = '';
switch (error.errorCode) {
case 100:
errorMsg = 'Barcode scanning is not supported on this platform';
break;
case 500:
errorMsg = 'Internal error occurred';
break;
case 1000:
errorMsg = 'Permission denied to access camera';
break;
case 3000:
errorMsg = 'Device does not support barcode scanning';
break;
case 4000:
errorMsg = 'Invalid arguments provided';
break;
case 8000:
errorMsg = 'Scanning cancelled by user';
break;
case 8001:
errorMsg = 'Barcode scanning timed out';
break;
case 9000:
errorMsg = 'Platform is outdated';
break;
default:
errorMsg = 'Unknown error occurred';
}
console.error('Error scanning barcode:', errorMsg, error);
setErrorMessage(errorMsg);
onScanError?.(errorMsg);
});
}
return (
<>
{/* Card for Barcode Scanner */}
<Card>
<div className='flex columngap'>
<Button
onClick={scanBarCode}
disabled={isScanning}
>
{isScanning ? 'Scanning...' : 'Scan Barcode'}
</Button>
</div>
{barCodeValue !== '' && (
<div>
<Text weight="semibold">Scanned Value: </Text>
<Text>{barCodeValue}</Text>
</div>
)}
{errorMessage !== '' && (
<div>
<Text weight="semibold" style={{ color: 'red' }}>Error: </Text>
<Text style={{ color: 'red' }}>{errorMessage}</Text>
</div>
)}
Is Supported: {isSupported ? 'Yes' : 'No'}<br />
Permission granted: {isPermissionGranted ? 'Yes' : 'No'}<br />
</Card>
</>
);
}
export default ScanBarCode;