Vue exampe

[kmg100]

Hello, I am having problems implementing the module in my VUE code. Everytime i run the loadPlayer function i do not recieve anything back.

<script>

import { loadPlayer } from 'rtsp-relay/browser';
import { ref, watchEffect } from "vue";

export default {
props: {
text: String,
},

setup() {
const video = ref(null);
watchEffect(() => {
if (!video.value) throw new Error('Ref is null');
loadPlayer({
url: 'ws://localhost:8554/mystream',
canvas: video.value,
});
});
return{
video
}
}
}
</script>

<style scoped> </style>

[k-yle]

This works well for me:

<template>
  <canvas ref="canvas" />
</template>

<script setup>
import { ref, onMounted } from "vue";
import { loadPlayer } from "rtsp-relay/browser";

const canvas = ref(null);

onMounted(() => {
  loadPlayer({
    url: "ws://localhost:2000/api/stream/2",
    canvas: canvas.value,
  });
});
</script>

[Dryices]

Will it still work if I use a rtsp url instead of ws?

[k-yle]

no, the web client needs to connect to the relay server using websockets

flowchart LR
    Website -->|ws://| RelayServer[Relay Sever];
    RelayServer -->|rtsp://| VideoSource[Video Source]

Loading

[Dryices]

I am working with Vue framework and I am trying to embed an RTSP stream from my IP camera to my webpage. My RTSP url is rtsp://admin:[email protected]:554/Streaming/Channels/101/ and its able to stream on VLC player.

Can I clarify whether I need the code snippet from #Example?
How do I obtain the websocket link in your Vue example?

Sorry I am new to web development.

[k-yle]

Can I clarify whether I need the code snippet from #Example?

The code in #Example runs on the server. That code is the "Relay Server". Yes, you do need it.

How do I obtain the websocket link in your Vue example?

That depends on how and where you host your webserver. In the example code, the server is hosted on http://localhost:2000

[Dryices]

Do you have an example of the Vue code written in Options API?

[k-yle]

something like this maybe? source

<template>
  <canvas ref="canvas" />
</template>

<script>
import { loadPlayer } from 'rtsp-relay/browser';

export default {
  mounted() {
    loadPlayer({
      url: 'ws://localhost:2000/api/stream/2',
      canvas: this.$refs.canvas,
    });
  }
}
</script>