Advanced usage

Non-stream mixing mode

1. Retrieve the list of active cameras:

   const deviceManager = pushClient.getDeviceManager();
   // cameraList contains the deviceId for each camera
   const cameraList = await deviceManager.getCameraList();

2. Switch to the target camera using startCamera:

   // If you are ingesting a stream from camera A and need to switch to camera B
   await pushClient.startCamera(deviceId); // Pass the deviceId of camera B

Stream mixing mode

In stream mixing mode, each camera and screen sharing feed is shared or played through a layer. To switch cameras, stop camera A (the SDK automatically deletes layer A), start camera B, and set the position and size of layer B.

1. Stop camera A:

   // Note: Pass the streamId, not the deviceId. The streamId is the return value of the previous startCamera() call for camera A.
   pushClient.stopCamera(streamIdA);

2. Start camera B:

   const streamIdB = await pushClient.startCamera(deviceId); // Pass the deviceId of camera B

3. Set the position and size of layer B:

   videoEffectManager.setLayout([
     { streamId: streamIdB, x: 1280/2, y: 720/2, width: 1280, height: 720, zOrder: 1 }, // Set the size of camera B as needed
     ... // Other layer settings
   ]);

Use a variable

<script setup lang="ts">
  import { onMounted } from 'vue';
  import { AliRTSPusher } from 'aliyun-rts-pusher';
  import type { RtsClient } from 'aliyun-rts-pusher';

  let pushClient: RtsClient;
  onMounted(() => {
    pushClient = AliRTSPusher.createClient();
  })
</script>

Use shallowRef

<script setup lang="ts">
  import { onMounted, shallowRef } from 'vue';
  import { AliRTSPusher } from 'aliyun-rts-pusher';
  import type { RtsClient } from 'aliyun-rts-pusher';

  const pushClient = shallowRef<RtsClient>();
  onMounted(() => {
    pushClient.value = AliRTSPusher.createClient();
  })
</script>

Get screen sharing sources

To share a screen in Electron, you must first retrieve the available screen sharing sources. The following code in main.js provides an example. For more information about retrieving screen sharing sources, see Electron desktopCapturer.

  desktopCapturer.getSources({ types: ['screen', 'window'] })
    .then(async (sources) => {
      win.webContents.send('SET_SOURCE', sources);
    })
    .catch(e => {
      console.log(e);
    })

Capture

The renderer.js file contains the capture code.

// Start Capture button
$startBtn.addEventListener('click', async () => {
 
  // The passed sources
  console.log('ELECTRON API', window.electronAPI.sources);
  const sources = window.electronAPI.sources;

  const cameraStreamId = await pushClient.startCamera();
  const micStreamId = await pushClient.startMicrophone();

  // Screen sharing solution: Use native getUserMedia to get the stream, then use the addCustomStream method to add it to the SDK.
  const stream = await navigator.mediaDevices.getUserMedia({
      video: {
        mandatory: {
          chromeMediaSource: 'desktop',
          // chromeMediaSourceId: sources[0].id,
          minWidth: 1280,
          maxWidth: 1280,
          minHeight: 720,
          maxHeight: 720
        }
      },
      // Note: If you capture screen audio, do not enable the audio for the local preview <video> tag. This causes an echo due to loop capture. Keep the <video> tag muted, ingest the stream normally, and then use the stream pulling URL for preview.
      // audio: {
      //   mandatory: {
      //     chromeMediaSource: 'desktop',
      //   }
      // }
  });
  const screenStreamId = await pushClient.addCustomStream(stream);

  // Camera in the upper-left corner, screen share centered
  videoEffectManager.setLayout([
    { streamId: screenStreamId, x: 1280/2, y: 720/2, width: 1280, height: 720, zOrder: 1 },
    { streamId: cameraStreamId, x: 320/2, y: 180/2, width: 320, height: 180, zOrder: 2 },
  ]);
})

Stream ingest

The renderer.js file contains the stream ingest code. You may also need the Live streaming URL generator.

// Start Ingest button
$publishBtn.addEventListener('click', () => {
  pushClient.startPush('artc://xxxx');
})