title: Unmount aFrame on Sveltekit
body: <p>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</p>
  <pre><code>&lt;script&gt;
      //componente para sombra en camera background
  AFRAME.registerComponent(&quot;apply-shadowmaterial&quot;, {
              init: function() {
                // grab the mesh
                let mesh = this.el.getObject3D(&quot;mesh&quot;);
                // 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();
              }
            });
  &lt;/script&gt;
       
      
      
          &lt;a-scene id=&quot;escena&quot; class=&quot;a-frame&quot; gesture-detector physicallyCorrectLights=&quot;true&quot; vr-mode-ui=&quot;enabled: false&quot; embedded arjs =&quot;sourceType: webcam; trackingMethod: best; detectionMode: mono; sourceWidth:2048; sourceHeight:1536; displayWidth: 2048; displayHeight: 1536&quot; always-fullscreen renderer=&quot;precision: high; antialias: false; logarithmicDepthBuffer:true; colorManagement: true&quot; loading-screen=&quot;dotsColor: #DBDADA; backgroundColor: #282828&quot;&gt; 
              &lt;a-assets&gt;
                  &lt;a-asset-item id=&quot;blackM&quot; src={`${storeData.assets.vectorFile}`}&gt;&lt;/a-asset-item&gt;
                  &lt;!-- &lt;a-asset-item id=&quot;blueM&quot; src=&quot;/Blue.glb&quot;&gt;&lt;/a-asset-item&gt;
                  &lt;a-asset-item id=&quot;orangeM&quot; src=&quot;/Orange.glb&quot;&gt;&lt;/a-asset-item&gt; --&gt;
              &lt;/a-assets&gt;
              &lt;a-entity id=&quot;luzdirectional&quot; light=&quot;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; &quot; position=&quot;-5.0 6.520 5.127&quot;&gt;   
              &lt;/a-entity&gt;
              &lt;a-marker id=&quot;marcador&quot; raycaster=&quot;objects: .clickable&quot; emitevents=&quot;true&quot; cursor=&quot;fuse: false; rayOrigin: mouse;&quot; type='pattern' url='/hiro.patt' smooth='true' smoothCount='3' smoothTolerance='0.01' smoothThreshold='2'&gt;
                  &lt;a-plane id=&quot;planosombras&quot; position=&quot;0 -0.2 0&quot; height=&quot;500&quot; width=&quot;500&quot; rotation=&quot;-90 0 0&quot; apply-shadowmaterial&gt;&lt;/a-plane&gt;
                  &lt;a-entity 
                  id=&quot;plato&quot;
                  position=&quot;0 0 0&quot;
                  rotation=&quot;0 60 0&quot;
                  scale=&quot;0.1 0.1 0.1&quot;
                  gltf-model={`${storeData.assets.vectorFile}`}
                  shadow=&quot;receive: true; cast: true&quot;
                  animation__pos=&quot;property:position; from:0 0 0; to:-6 0 0; dur: 1000; startEvents:pos&quot; 
                  animation__scale=&quot;property:scale; from:0.1 0.1 0.1; to:0 0 0; dur: 1000; startEvents:scale&quot;
                  class=&quot;clickable&quot;
                  gesture-handler
                  &gt;
                  &lt;/a-entity&gt;
              &lt;/a-marker&gt;
              &lt;a-entity id=&quot;camera&quot; camera=&quot;far:10000.00; fov:80.00; near:0.005&quot;&gt;
              &lt;/a-entity&gt;
              &lt;a-entity id=&quot;luz&quot; light=&quot;type: ambient; color: #DDD; groundColor: #DDD; intensity: 0.6&quot; position=&quot;0 2 0&quot;&gt;  
              &lt;/a-entity&gt;
          
          &lt;/a-scene&gt;
  
          
  &lt;/div&gt;
  </code></pre>