Unmount aFrame on Sveltekit

I'm running an AR application inside Sveltekit with aFrame and AR.js. The augmented reality runs fine with some details. My problem is that when I exit the component (I go to another page) it stays mounted and the webcam stays on. At the moment what I do is to use the onDestroy hook and every time I exit I remove the video tag generated by AR.js. This works partially but I would like to know if there is another way to disassemble. Any help is welcome. This is my code

<script>
    //componente para sombra en camera background
AFRAME.registerComponent("apply-shadowmaterial", {
            init: function() {
              // grab the mesh
              let mesh = this.el.getObject3D("mesh");
              // keep the reference to the old material
              let tmp = mesh.material;
              // assign the new material
              mesh.material = new THREE.ShadowMaterial({ opacity: 0.1 });
              mesh.receiveShadow = true;
              // free memory
              tmp.dispose();
            }
          });
</script>
     
    
    
        <a-scene id="escena" class="a-frame" gesture-detector physicallyCorrectLights="true" vr-mode-ui="enabled: false" embedded arjs ="sourceType: webcam; trackingMethod: best; detectionMode: mono; sourceWidth:2048; sourceHeight:1536; displayWidth: 2048; displayHeight: 1536" always-fullscreen renderer="precision: high; antialias: false; logarithmicDepthBuffer:true; colorManagement: true" loading-screen="dotsColor: #DBDADA; backgroundColor: #282828"> 
            <a-assets>
                <a-asset-item id="blackM" src={`${storeData.assets.vectorFile}`}></a-asset-item>
                <!-- <a-asset-item id="blueM" src="/Blue.glb"></a-asset-item>
                <a-asset-item id="orangeM" src="/Orange.glb"></a-asset-item> -->
            </a-assets>
            <a-entity id="luzdirectional" light="type: directional; color: #DDD; groundColor: #DDD; intensity: 0.2; castShadow:true; target:#marcador; shadowCameraBottom:-6.0; shadowCameraTop:6.0; shadowCameraLeft:-6.0; shadowCameraRight:6.0; " position="-5.0 6.520 5.127">   
            </a-entity>
            <a-marker id="marcador" raycaster="objects: .clickable" emitevents="true" cursor="fuse: false; rayOrigin: mouse;" type='pattern' url='/hiro.patt' smooth='true' smoothCount='3' smoothTolerance='0.01' smoothThreshold='2'>
                <a-plane id="planosombras" position="0 -0.2 0" height="500" width="500" rotation="-90 0 0" apply-shadowmaterial></a-plane>
                <a-entity 
                id="plato"
                position="0 0 0"
                rotation="0 60 0"
                scale="0.1 0.1 0.1"
                gltf-model={`${storeData.assets.vectorFile}`}
                shadow="receive: true; cast: true"
                animation__pos="property:position; from:0 0 0; to:-6 0 0; dur: 1000; startEvents:pos" 
                animation__scale="property:scale; from:0.1 0.1 0.1; to:0 0 0; dur: 1000; startEvents:scale"
                class="clickable"
                gesture-handler
                >
                </a-entity>
            </a-marker>
            <a-entity id="camera" camera="far:10000.00; fov:80.00; near:0.005">
            </a-entity>
            <a-entity id="luz" light="type: ambient; color: #DDD; groundColor: #DDD; intensity: 0.6" position="0 2 0">  
            </a-entity>
        
        </a-scene>

        
</div>