How to use Azure Communications' VideoStreamRenderer in VueJs?

Question

I am working on a video conferencing app using Azure Communications APIs and VueJs. I am having trouble rendering video streams using Vue. I can do it with vanilla JS this way:

const rendererLocal = new VideoStreamRenderer(this.localVideoStream)
const view = await rendererLocal.createView({ 'scalingMode': 'Crop' })
document.getElementById('localVideo').appendChild(view.target)

But if I am using VueJs. I want to add the video feed to the state, and render it using a component. I was thinking I could render my video stream with v-html, but this does not work. This is what I have tried:

<template>
    <div id="localVideo" v-html="localVideoStreamView.target"></div>
</template>

<script>
import { VideoStreamRenderer } from '@azure/communication-calling'
export default {
    name: 'VideoDisplay',
    data() {
        return {
            localVideoStreamView: null
        }
    },
    props: {
        localVideoStream: Object,
    },
    mounted() {
        this.displayLocalVideoStream()
    },
    methods: {
        /**
         * Display your local video stream preview in your UI
         */
        async displayLocalVideoStream() {
            try {
                const rendererLocal = new VideoStreamRenderer(this.localVideoStream)
                const view = await rendererLocal.createView({ 'scalingMode': 'Crop' })
                this.localVideoStreamView = view
            } catch (error) {
                console.error(error)
            }
        }
    }
}
</script>

Answer 1

Hi

In order to render stream you have to 'createView' with from the instance of VideoStreamRenderer - I see you're already doing it,
Next step is to attach 'view.target' to DOM , 'target' references a video container that is used to render video
Above code snippet seems to have it - can you double check that video element is present in the rendered DOM on the page?