title: Screen sharing and video broadcasting switching error in agora
body: <p>So, I have been working on a project that uses agora's web sdk. I basically want to seamlessly switch back and forth between screen sharing and video broadcasting, audio shared in both cases.</p>
  
  <p>Here's what I have coded:</p>
  
  <pre><code>const localPlay = {
      screen: {
          playing: false,
          initialised: false
      },
      video: {
          playing: false,
          initialised: false
      }
  };
  
  
  // Initialise two clients and two streams, with the following stream specs
   const screenStreamSpec = {
                  streamID: uid,
                  audio: false,
                  video: false,
                  screen: true,
              };
  
  const videoStreamSpec = {
                  streamID: uid,
                  audio: true,
                  video: true,
                  screen: false,
              };
  
  // ...
  
  document.getElementById("Screen-share").addEventListener("click", function() {
  
      if(!localPlay.screen.initialised) {
          return
      } else {
          if(!localPlay.screen.playing &amp;&amp; !localPlay.video.playing) {
              screenStream.play("Screen");
              rtc.client.screenClient.publish(screenStream);
              localPlay.screen.playing = true;                        
              return;
          }
  
          if(localPlay.screen.playing) {
              return;
          }
  
          videoStream.stop();
          localPlay.screen.playing = false;
          screenStream.play("Screen");
          localPlay.video.playing = true;
  
          let newTrack = videoStream.getVideoTrack();
          screenStream.replaceTrack(newTrack);
      }
  });
  
  
  document.getElementById("Video-share").addEventListener("click", function() {
  
      if(!localPlay.video.initialised) {
          return
      } else {
          if(!localPlay.video.playing &amp;&amp; !localPlay.screen.playing) {
              videoStream.play("Screen");
              rtc.client.videoClient.publish(videoStream);
              localPlay.video.playing = true;
              return;
          }
  
          if(localPlay.video.playing) {
              return;
          }
  
          screenStream.stop();
          localPlay.video.playing = false;
          videoStream.play("Screen");
          localPlay.screen.playing = true;
  
          let newTrack = screenStream.getVideoTrack();
          videoStream.replaceTrack(newTrack);
      }
  });
  
  </code></pre>
  
  <p>The code is in accordance with <a href="https://docs.agora.io/en/faq/switch_screen_camera_web#solution-3-replace-the-current-video-track" rel="nofollow noreferrer">this</a> (solution 3).</p>
  
  <p>The error is that the first time I try to do either, they work. But, say if I started with screen sharing, and switch to video broadcasting, the cam turns off, screen sharing turns off, and the screen that I was sharing is rotated and displayed in the <code>Screen</code> div. If I try to switch one more time, the div goes totally black.</p>
  
  <p>Where have I gone wrong? </p>