https://livekit.io logo
Join Slack
Powered by
This message was deleted.
# helpdesk
s
This message was deleted.
p
Hi, I also posted an answer on github, but just remove the 
connect
from your import list and you should be fine! • sure, you can use Vue 3 with LiveKit. We are currently building a higher level components framework on top of the client-sdk-js that might eventually also get Vue 3 support (right now we only support react directly) • AFAIK there’s currently no dedicated Vue example, but many examples with react and there’s also an “example” folder in the client-sdk-js • see above
b
@polite-kilobyte-67570 Thanks for the reply. But I have to use "connect"?
Copy code
await room.connect('<ws://localhost:7800>', token);
So I can't use components framework. Still the examples are with react only. So there is no way to implement with Vue 3? Really difficult to understand the docs. The closest I found is this: https://github.com/livekit/client-sdk-js/tree/main/example And even that is not applicable to livekit-client because it imports everthing from index.ts not from the library. Can't Livekit supply a simple Vue 3 app example? If possible it shouldn't take much time.
p
Copy code
await room.connect('<ws://localhost:7800>', token);
connect
is being called as a method on 
room
Copy code
const room = new Room()
await room.connect(...)
for the example you linked, just replace 
./index.ts
with 
livekit-client
it has the same imports. is there anything in particular that you have trouble understanding in the docs?
b
Thanks for the reply. I keep having errors and troubles. It'd be greate if we had a simple example using Vue or just TypeScript. I know it is too much to ask but it'd be beneficial for everyone looking for an example out there. Once I understand, I can create an example for Vue 3 as well. I just can't get it working yet. I did replace 
./index.ts
with 
livekit-client
but it gave me type errors just like connect. There are 4 imports that don't exist in livekit-client.
• RoomConnectOptions • RoomOptions • VideoCaptureOptions • VideoCodec These don't exist.
Copy code
SyntaxError: The requested module '/node_modules/.vite/deps/livekit-client.js?v=263c77b9' does not provide an export named ...
Look at this code for example:
Copy code
function handleTrackSubscribed(
  track: RemoteTrack,
  publication: RemoteTrackPublication,
  participant: RemoteParticipant
) {
  if (track.kind === Track.Kind.Video || track.kind === Track.Kind.Audio) {
    // attach it to a new HTMLVideoElement or HTMLAudioElement
    const element = track.attach();
    parentElement.appendChild(element);
  }
}
What is parentElement here? It doesn't say anywhere here: https://github.com/livekit/client-sdk-js It is very difficult to understand the docs.
t
Copy code
<script setup>
import {
  Room,
  RoomEvent,
} from 'livekit-client'

import { ref, onMounted } from 'vue'

const token1 = 'user1 token'
const token2 = 'user2 token'

const room = new Room()

const localVideoContainer = ref()
const remoteVideoContainer = ref()

onMounted(async () => {
  await room.prepareConnection('<wss://live-dev-k5mhurx4.livekit.cloud>')

  room
    // publish local video and display it to localVideoContainer
    .on(RoomEvent.LocalTrackPublished, function (publication) {
      const track = publication.track.attach()
      localVideoContainer.value.appendChild(track)
    })
    // subscribe remote video and display it to remoteVideoContainer
    .on(RoomEvent.TrackSubscribed, function (remoteTrack) {
      const track = remoteTrack.attach()
      remoteVideoContainer.value.appendChild(track)
    })

  await room.connect('<wss://live-dev-k5mhurx4.livekit.cloud>', token1)
  await room.localParticipant.enableCameraAndMicrophone()
})
</script>

<template>
  <div ref='localVideoContainer'></div>
  <div ref='remoteVideoContainer'></div>
</template>
🙏 2
this is a minimal example to publish local video, you can create two vue template projects and paste those code to HelloWorld.vue. • npm create vite@latest my-vue-app -- --template vue • get your livekit-server url with cloud one, or host your local one https://cloud.livekit.io/ • the app key and secret can be generate with cloud settings page, or use self hosted $bash livekit-server --dev • get your token with cli • for more client sdk room events, https://docs.livekit.io/client-sdk-js/enums/RoomEvent.html • like LocalTrackUnpublished, TrackUnsubscribed, you can detach video audio, do some cleanup on unmount event etc…
Copy code
livekit-cli create-token \
    --api-key apikey --api-secret apisecret \
    --join --room room1 --identity user1 \
    --valid-for 720h

livekit-cli create-token \
    --api-key apikey --api-secret apisecret \
    --join --room room1 --identity user2 \
    --valid-for 720h
🙏 3
Open in Slack
PreviousNext
Powered by