Web

import {ArSdk, isWebGLSupported} from 'tencentcloud-webar'

if(isWebGLSupported()) {
    const sdk = new ArSdk({
    ...
})
} else {
    // The browser blocking logic
}

import { ArSdk } from 'tencentcloud-webar'
// Initialize the SDK
const sdk = new ArSdk({
...
})

let effectList = [];
let filterList = [];
// Using the callbacks of the SDK
sdk.on('created', () => {
    // Pull and display the filter and effect list in the `created` callback
    sdk.getEffectList({
        Type: 'Preset',
        Label: 'Makeup',
    }).then(res => {
        effectList = res
    });
    sdk.getCommonFilter().then(res => {
        filterList = res
    })
})
sdk.on('cameraReady', async () => {
    // By getting the output stream in the `cameraReady` callback, you can display a video image sooner, but the initialization parameters have not taken effect at this point.
    // You can choose this method if you want to display a video image as soon as possible but do not need to apply effects to the video the moment it is displayed.
    // You don’t need to update the stream after the effects start to work.
    const arStream = await ar.getOutput();
    // Play the stream locally
    // localVideo.srcObject = arStream

})
sdk.on('ready', () => {
    // Get the output stream in the `ready` callback. The initialization parameters have taken effect at this point.
    // You can get the output stream in `ready` if you want your video to show effects the moment it is displayed but do not expect it to be displayed as soon as possible.
    // Between the two methods, choose the one that fits your needs.
    const arStream = await ar.getOutput();
    // Play the stream locally
    // localVideo.srcObject = arStream

    // Call `setBeautify`, `setEffect`, or `setFilter` in the `ready` callback
    sdk.setBeautify({
        whiten: 0.3
    });
    sdk.setEffect({
        id: effectList[0].EffectId,
        intensity: 0.7
    });
    sdk.setEffect({
        id: effectList[0].EffectId,
        intensity: 0.7,
        filterIntensity: 0.5 // In v0.1.18 and later, you can use this parameter to set the filter strength of a special effect. If you do not pass this parameter, the strength specified for the effect will be used.
    });
    sdk.setFilter(filterList[0].EffectId, 0.5)
})


sdk.on('error', (error) => {
    // Handle an error in the error callback
    const {code, message} = error
    ...
})

sdk.on('error', async (error) => {
    if (error.code === 10000002) {
        const newInput = await navigator.mediaDevices.getUserMedia({...})
        await sdk.resetCore(newInput)
    }
})