tencent cloud

Feedback

Built-in Camera

Last updated: 2024-05-08 18:30:33
    You can choose this integration mode if you want to use the SDK with a device’s built-in camera or if your business scenario involves interaction with the built-in camera.

    Step 1. Import the SDK

    use npm package:
    npm install tencentcloud-webar
    import { ArSdk } from 'tencentcloud-webar';
    you can also import the SDK using the following method:
    <script charset="utf-8" src="https://webar-static.tencent-cloud.com/ar-sdk/resources/latest/webar-sdk.umd.js"></script>
    <script>
    // Receive ArSdk class from window.AR
    const { ArSdk } = window.AR;
    ......
    </script>

    Step 2. Initialize an Instance

    Initialize an SDK instance.
    // Get the authentication information
    const authData = {
    licenseKey: 'xxxxxxxxx',
    appId: 'xxx',
    authFunc: authFunc // For details, see “Configuring and Using a License - Signature”
    };
    
    const config = {
    module: {
    beautify: true, // Whether to enable the effect module, which offers beautification and makeup effects as well as stickers
    segmentation: true // Whether to enable the keying module, which allows you to change the background
    },
    auth: authData, // The authentication information
    camera: { // Pass in the camera parameters
    width: 1280,
    height: 720
    },
    beautify: { // The effect parameters for initialization (optional)
    whiten: 0.1,
    dermabrasion: 0.3,
    eye: 0.2,
    chin: 0,
    lift: 0.1,
    shave: 0.2,
    ……
    }
    }
    const sdk = new ArSdk(
    // Pass in a config object to initialize the SDK
    config
    )
    
    let effectList = [];
    let filterList = [];
    
    sdk.on('created', () => {
    // You can display the effect and filter list in the `created` callback. For details, see “SDK Integration - Parameters and APIs”.
    sdk.getEffectList({
    Type: 'Preset',
    Label: 'Makeup',
    }).then(res => {
    effectList = res
    });
    sdk.getCommonFilter().then(res => {
    filterList = res
    })
    })
    
    // Call `setBeautify`, `setEffect`, or `setFilter` in the `ready` callback
    // For details, see “SDK Integration - Configuring Effects”
    sdk.on('ready', () => {
    // Configure beautification effects
    sdk.setBeautify({
    whiten: 0.2
    });
    // Configure special effects
    sdk.setEffect({
    id: effectList[0].EffectId,
    intensity: 0.7
    });
    // Configure filters
    sdk.setFilter(filterList[0].EffectId, 0.5)
    })
    Note:
    The loading of the effect and keying modules takes time and consumes resources. You can enable only the module you need during initialization. A module not enabled will not be loaded or initialized.
    If you specify the camera parameter of config, the video data the SDK captures from the device’s camera will be used as the input. We also offer some basic device management APIs. For details, see Step 6. Control Devices.

    Step 3. Play the Stream

    The SDK offers players for quick preview of effects on your webpage. The players you get in different callbacks vary slightly. Choose the one that fits your needs.
    If you want to display a video image as quickly as possible, get the player in the cameraReady callback. Because the SDK hasn’t loaded the resources or completed initialization at this point, the player can only play the original video.
    sdk.on('cameraReady', async () => {
    // Initialize a player of the SDK. `my-dom-id` is the ID of the player’s container.
    const player = await sdk.initLocalPlayer('my-dom-id')
    // Play the video
    await player.play()
    })
    If you want to play the video after the SDK is initialized and effects are applied, get the player in the ready playback.
    sdk.on('ready', async () => {
    // Initialize a player of the SDK. `my-dom-id` is the ID of the player’s container.
    const player = await sdk.initLocalPlayer('my-dom-id')
    // Play the video
    await player.play()
    })
    Note:
    The player obtained by initLocalPlayer is muted by default. If you unmute it, there may be echoes.
    The player obtained is integrated with the sdk.getOutput() API.
    The player object obtained by initLocalPlayer is integrated with the following APIs:
    API
    Description
    Request Parameter
    Return Value
    play
    Plays the video.
    -
    Promise;
    pause
    Pauses the video. This does not stop the stream. You can resume the playback.
    -
    -
    stop
    Stops the video. This stops the stream.
    -
    -
    mute
    Mutes the video.
    -
    -
    unmute
    Unmutes the video.
    -
    -
    setMirror
    Sets whether to mirror the video.
    true|false
    -
    getVideoElement
    Gets the built-in video object.
    -
    HTMLVideoElement
    destroy
    Terminates the player.
    -
    -
    Note:
    The player’s behaviors are affected by camera settings. Camera settings prevail over the settings of LocalPlayer.
    For example, after you call camera.muteVideo to disable video, playback will not start even if you call play.
    After you call camera.unmuteVideo to enable video, the player will play the video automatically. Therefore, if you specify camera, you don’t need to manually configure localPlayer.

    Step 4. Get the Output

    If you need to publish the stream, call getOutput to get the output stream. After getting the MediaStream, you can use a live streaming SDK (for example, TRTC web SDK or LEB web SDK) to publish the stream.
    const output = await sdk.getOutput()
    Note:
    If you use the built-in camera, the type of all media returned by getOutput is MediaStream.
    The video track of the output stream is processed in real time by the Tencent Effect SDK. The audio track (if any) is kept.
    getOutput is an async API. The output will be returned only after the SDK is initialized and has generated a stream.
    You can pass an FPS parameter to getOutput to specify the output frame rate (for example, 15). If you do not pass this parameter, the original frame rate will be kept.
    To learn more about how to publish the processed streams, see Publishing Using TRTC and Publishing over WebRTC.

    Step 5. Configuring Effects

    For detailed directions, see Configuring Effects.

    Step 6. Control Devices

    You can use an sdk.camera instance to enable and disable the camera or perform other camera operations.
    const output = await sdk.getOutput()
    // Your business logic
    // ...
    
    // `sdk.camera` will have been initialized after `getOutput`. You can get an instance directly.
    const cameraApi = sdk.camera
    
    // Get the device list
    const devices = await cameraApi.getDevices()
    console.log(devices)
    // Disable the video track
    // cameraApi.muteVideo()
    // Enable the video track
    // cameraApi.unmuteVideo()
    // Change to a different camera by specifying the device ID (if there are multiple cameras)
    // await cameraApi.switchDevices('video', 'your-device-id')
    If you want to get an sdk.camera instance as soon as possible, you can get it in the cameraReady callback.
    // Initialization parameters
    // ...
    const sdk = new ArSdk(
    config
    )
    
    let cameraApi;
    sdk.on('cameraReady', async () => {
    cameraApi = sdk.camera
    // Get the device list
    const devices = await cameraApi.getDevices()
    console.log(devices)
    // Disable the video track
    // cameraApi.muteVideo()
    // Enable the video track
    // cameraApi.unmuteVideo()
    // Change to a different camera by specifying the device ID (if there are multiple cameras)
    // await cameraApi.switchDevices('video', 'your-device-id')
    })
    You can use the following APIs of camera to control the built-in camera.
    API
    Description
    Request Parameter
    Return Value
    getDevices
    Gets all devices.
    -
    Promise<Array<MediaDeviceInfo>>
    switchDevice
    Switches the device.
    type:string, deviceId:string
    Promise
    muteAudio
    Mutes the current stream.
    -
    -
    unmuteAudio
    Unmutes the current stream.
    -
    -
    muteVideo
    Disables the video track of the camera stream. This does not stop the stream.
    -
    -
    unmuteVideo
    Enables the video of the camera stream.
    -
    -
    stopVideo
    Disables the camera. This stops the video stream, but the audio stream is not affected.
    -
    -
    restartVideo
    Enables the camera. This API can only be called after stopVideo.
    -
    Promise
    stop
    Disables the current camera and audio device.
    -
    -
    
    Contact Us

    Contact our sales team or business advisors to help your business.

    Technical Support

    Open a ticket if you're looking for further assistance. Our Ticket is 7x24 avaliable.

    7x24 Phone Support