Having an issue with my vue component where I am getting a TypeError: Cannot read properties of null (reading 'attachShadow') error when building it as a web component. Here is the command I am using to build the vue component: vue-cli-service build --target wc --name web-stream './src/components/myComponent.vue'
Here is an excerpt from the template section:
<template>
<div id='stream'>
<button v-on:click="startStreaming">
Start Streaming
</button>
</div>
</template>
Within the methods section, I have the following code:
methods: {
startStreaming: function(){
navigator.mediaDevices.getUserMedia({video: true, audio:true})
}).then(function(mediaStream){
let videoElement = document.createElement('video')
let shadowElement = document.getElementById('stream')
shadowElement.attachShadow({ mode: "open" }).appendChild(videoElement)
videoElement.srcObject = mediaStream
newVideo.play()
}).catch(function(error){alert(error)}),
}
Any help or suggestions on how to resolve this issue would be greatly appreciated. Thank you.