Video Live Streaming

<template>
   <StreamMixer />
</template>

<script setup lang="ts">
import { StreamMixer } from 'tuikit-atomicx-vue3';
</script>

import { onMounted } from 'vue';
import { useDeviceState } from 'tuikit-atomicx-vue3';
const { openLocalCamera, openLocalMicrophone } = useDeviceState();

onMounted(() => {   
  openLocalMicrophone();
  openLocalCamera();
})

import { useLiveListState } from 'tuikit-atomicx-vue3';

const { createLive } = useLiveListState();
// Define the live room ID, typically generated by the backend or passed via route parameters
const liveId = ref('test_live_room_001');

async function startLive() {
  try {
    await createLive({
      liveId: liveId.value, // Set the live room ID
      liveName: 'test Live', // Set the live room name
    });
  } catch (error) {
    console.error('Failed to create live:', error);
  }
}

import { useLiveListState } from 'tuikit-atomicx-vue3';

const { endLive } = useLiveListState();

// End live streaming
async function stopLive() {
  try {
    await endLive();
  } catch (error) {
    console.error('Failed to end live:', error);
  }
}

<template>
   <LiveView />
</template>

<script setup lang="ts">
import { LiveView } from 'tuikit-atomicx-vue3';
</script>

import { useLiveListState } from 'tuikit-atomicx-vue3';

const { joinLive } = useLiveListState();
// Define the live room ID to enter
const liveId = ref('test_live_room_001');

// Enter the live room
async function joinLiveRoom() {
  try {
    await joinLive({ liveId: liveId.value }); // Use the same liveId as the host
  } catch (error) {
    console.error('Failed to enter live room:', error);
  }
}

import { useLiveListState } from 'tuikit-atomicx-vue3';

const { leaveLive } = useLiveListState();

// Exit live streaming
async function exitLive() {
  try {
    await leaveLive(); 
    // You can perform page navigation here
  } catch (error) {
    console.error('Failed to leave live room:', error);
  }
}