question

PeterMumford-4233 avatar image
0 Votes"
PeterMumford-4233 asked PeterMumford-4233 commented

How to use Azure Communications' VideoStreamRenderer in VueJs?

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>



azure-communication-services
· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

PS Maybe the solution is to attach the video element markup to the DOM with v-html, and then assign a listener (?) for the video stream. I assume the info for the stream is in the view object (localVideoStreamView). Somewhere.

0 Votes 0 ·

1 Answer

kaniartur1 avatar image
0 Votes"
kaniartur1 answered PeterMumford-4233 commented

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?

· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Yes, I know can render the video stream with getElementById and appendChild.

I want to do it the Vue way, by adding the stream to Vue's data, and then using Vue's directives to render it (see the v-html directive in the template above). This is the key to managing the application state. It does not work, because, I think, v-html only inserts the markup for the video stream. It does not add event listeners.

I have posted a question in the Vue forum also: https://forum.vuejs.org/t/trying-to-use-azure-communications-videostreamrenderer-in-vuejs/121730. No answer there yet.

0 Votes 0 ·