tencent cloud

PrevNext

Feedback

search by keyword

Recent Pages

Documentation
Tencent Effect SDK
    Documentation
    Download PDF

    Built-in Camera

    Last updated: 2024-05-08 18:30:33
    Download PDF
      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.

      Contact Us
      Technical Support

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

      Submit a Ticket
      7x24 Phone Support
      Copyright © 2013-2024 Tencent Cloud. All Rights Reserved.
      Privacy PolicyLegalCookie Policy