利用声网进行屏幕共享及关闭共享&&网络状态检测

本地端与远程端创建并加入房间后，若需要进行屏幕共享，则可按以下步骤：

1⃣️用获取视频流的参数（channelName，videoRecordId）继续获取token结果一次次来加入同一个房间；

2⃣️用获取到的结果来实现 xxx.join()；

3⃣️在本地端重新获取屏幕流；

4⃣️获取成功后发布屏幕流；

5⃣️远程端通过（'user-published'）方法检测到屏幕流后；

6⃣️通过订阅 xxx.subscribe()；

7⃣️在页面绘制区域，播放 xxx.play()。

⚠️有时浏览器或者电脑会有屏幕共享的权限，打开权限即可～

部分代码：

1、本地端发起屏幕共享：

/**
 *屏幕共享
 * **/
let scre={
  screenClient:null,
screenTrack:null
}
async function shareScreen() {
   scre.screenClient = AgoraRTC.createClient({ mode: 'rtc', codec: 'vp8' });
  const optionsScreen = reactive({});
  await getToken(shareData.videoRecordId, shareData.channelName).then((res) => {
    optionsScreen.appId = res.result.appId;
    optionsScreen.token = res.result.token;
    optionsScreen.uid = Number(res.result.uid);
  });
  await scre.screenClient.join(
    optionsScreen.appId,
    shareData.channelName,
    optionsScreen.token,
    optionsScreen.uid
  );
  await AgoraRTC.createScreenVideoTrack({
    screenSourceType: 'screen',
    // 配置屏幕共享编码参数，详情请查看 API 文档。
    encoderConfig: '1080p_1',
    // 设置视频传输优化策略为清晰优先或流畅优先。
    optimizationMode: 'detail',
  }).then((localScreenTrack)=>{
    scre.screenTrack=localScreenTrack
    scre.screenClient.publish(localScreenTrack)
  })

  scre.screenTrack.getMediaStreamTrack().addEventListener('ended',()=>{
    console.log('======1111')
   scre.screenClient.unpublish(scre.screenTrack)
     scre.screenClient.leave()
    console.log('======222')

})
return screenClient
}

2、远程端接收屏幕共享流（接听）：

const agoraAnswer = async function () {
  rtc.client = AgoraRTC.createClient({ mode: "rtc", codec: "vp8" });
  await rtc.client.join(
    agoraData.appId,
    agoraData.channelName,
    agoraData.token,
    agoraData.uid
  );
  rtc.localAudioTrack = await AgoraRTC.createMicrophoneAudioTrack();
  rtc.localVideoTrack = await AgoraRTC.createCameraVideoTrack({
    facingMode: "user",
  });

  const localPlayerContainer = document.querySelector(".worktable-video-local");
  rtc.localVideoTrack.play(localPlayerContainer);

  await rtc.client.publish([rtc.localAudioTrack, rtc.localVideoTrack]);

  rtc.client.on("user-published", async (user, mediaType) => {
    showOff.value = true;
    await rtc.client.subscribe(user, mediaType);
    console.log(
      "======================================================接听web-published",
      user,
      mediaType
    );

    options.remoteUid = user.uid;

    // 表示本次订阅的是视频。
    if (mediaType === "video") {
      if (!user._audio_added_) {
        Toast("进行屏幕共享");
        user.videoTrack.play(
          document.querySelector(".worktable-screen-remote"),
          {
            fit: "contain",
          }
        );
      } else {
        user.videoTrack.play(document.querySelector(".worktable-video-remote"));
        sendMessage(9);
        //发送表情识别处理消息
        setInterval(() => {
          sendMessage(30);
        }, 5000);
      }
    }

    // 表示本次订阅的是音频。
    if (mediaType === "audio") {
      console.log("agoraAnswer user-published audio");
      user.audioTrack.play();
    }
  });

  rtc.client.on("user-unpublished", (user, mediaType) => {
    console.log(
      "======================================================接听web-unpublished",
      user,
      mediaType
    );

    if (mediaType === "audio") {
      if (!user._audio_added_) {
        onLeave();
        router.push("/Sceneselection");
        Toast("坐席端挂断或离线！");
      }
    } // H5关闭摄像头==video_added--true>>>>>avideo_muted_--false
    if (mediaType === "video") {
      if (user._video_added_ && user._video_muted_) {
        Toast("坐席端关闭摄像头！");
        console.log("========关闭摄像头web端");
      }
    }
  });
  // 上下行网速
  rtc.client.on("network-quality", (stats) => {
    networkQuality.value = stats.downlinkNetworkQuality;
  });
};

核心代码：

 3、本地端停止屏幕共享（获取浏览器原生对象，停止发布流，屏幕流离开）：

 4、远程端接收关闭：

 

 5、网络状态检测

 6、网络结果展示