I’m currently working on a project where I’m trying to display a video stream received via WebRTC in a browser using VueJS (Quasar Framework) from one component to another. However, despite setting the srcObject of the remote video element with the received MediaStream, the video is not displaying. Here’s my code:

senderClient.vue:

<template>
    <div>
        <video ref="localVideo" autoplay></video>
        <q-btn @click="startStreaming" label="Iniciar Transmissão"/>
    </div>
</template>
  
<script setup>
    import { ref, onMounted } from 'vue';
    import io from 'socket.io-client';

    let localStream;
    let peerConnection;
    const localVideo = ref(null);

    const serverUrl = 'http://localhost';
    const serverPort = 3000;
    const socket = io(`${serverUrl}:${serverPort}`, { transports: ["websocket"] });

    onMounted(async () => {
    try {
        localStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: false });
        localVideo.value.srcObject = localStream;
    } catch (error) {
        console.error('Erro ao acessar a câmera:', error);
    }
    });

    function startStreaming() {
    peerConnection = new RTCPeerConnection();

    localStream.getTracks().forEach(track => {
        peerConnection.addTrack(track, localStream);
    });

    peerConnection.createOffer()
        .then(offer => peerConnection.setLocalDescription(offer))
        .then(() => {
        const offer = peerConnection.localDescription;
        sendMessage({ type: 'offer', data: offer });
        })
        .catch(error => {
        console.error('Erro ao criar oferta:', error);
        });
    }

    // Função para enviar mensagem para o servidor WebSocket
    function sendMessage(message) {
    socket.emit('message', message);
    }
</script>

receiverClient.vue:

<template>
    <div>
        <video ref="remoteVideo" autoplay controls></video>
    </div>
</template>

<script setup>
    import { ref, onMounted } from 'vue';
    import io from 'socket.io-client';

    const serverUrl = 'http://localhost';
    const serverPort = 3000;
    const socket = io(`${serverUrl}:${serverPort}`, { transports: ["websocket"] });

    let remoteStream;
    const remoteVideo = ref(null);
    let peerConnection;

    onMounted(() => {
        peerConnection = new RTCPeerConnection();

        peerConnection.ontrack = event => {
            remoteStream = event.streams[0];
            console.log('MediaStream recebido:', remoteStream);
            if (remoteVideo.value) {
            remoteVideo.value.srcObject = remoteStream;
            console.log('Número de faixas de vídeo:', remoteStream.getVideoTracks().length);
            console.log('Elemento de vídeo remoto:', remoteVideo.value);
            console.log('srcObject definido:', remoteVideo.value.srcObject);
            
            // Adicionando um novo elemento de vídeo
            const newVideoElement = document.createElement('video');
            newVideoElement.autoplay = true;
            newVideoElement.controls = true; // Adicionei a opção controls
            document.body.appendChild(newVideoElement); // Adicione o novo elemento de vídeo ao DOM
            newVideoElement.srcObject = remoteStream; // Atribua o MediaStream ao novo elemento de vídeo
            } else {
            console.error('Elemento de vídeo remoto não está definido.');
            }
        };

        // Recebendo a oferta do servidor WebSocket
        socket.on('message', message => {
            if (message.type === 'offer') {
            handleOffer(message.data);
            }
        });
    });

    // Função para processar a oferta e iniciar comunicação WebRTC
    function handleOffer(offer) {
        peerConnection.setRemoteDescription(new RTCSessionDescription(offer))
            .then(() => {
            return navigator.mediaDevices.getUserMedia({ video: true, audio: false });
            })
            .then(stream => {
            stream.getTracks().forEach(track => {
                peerConnection.addTrack(track, stream);
            });
            return peerConnection.createAnswer();
            })
            .then(answer => {
            return peerConnection.setLocalDescription(answer);
            })
            .then(() => {
            const answer = peerConnection.localDescription;
            sendMessage({ type: 'answer', data: answer });
            })
            .catch(error => {
            console.error('Erro ao processar oferta:', error);
            });
    }

    // Função para enviar mensagem para o servidor WebSocket
    function sendMessage(message) {
        socket.emit('message', message);
    }
</script>

server.js (Websocket Server):

import { createServer } from 'http';
import { Server } from 'socket.io';

const httpServer = createServer();
const io = new Server(httpServer);

io.on('connection', socket => {
  console.log('Um cliente se conectou:', socket.id);

  socket.on('disconnect', () => {
    console.log('Um cliente se desconectou:', socket.id);
  });

  socket.on('message', message => {
    socket.broadcast.emit('message', message);
    console.log('Mensagem enviada para todos os clientes:', message);
  });
});

const PORT = process.env.PORT || 3000;
httpServer.listen(PORT);
console.log(`Servidor Socket.io rodando em http://localhost:${PORT}`);