From fb109082ff0aae499195a4e4713bb3683f17a7e8 Mon Sep 17 00:00:00 2001
From: ysn <2126564605@qq.com>
Date: Mon, 25 May 2026 15:48:29 +0800
Subject: [PATCH] =?UTF-8?q?=E8=81=9A=E8=B1=AA=E7=9C=8Bdemo?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/index.html        |    4 +-
 src/router/index.js      |   13 +
 src/views/demo/index.vue | 1067 ++++++++++++++++++++++++++++++++++++++
 3 files changed, 1083 insertions(+), 1 deletion(-)
 create mode 100644 src/views/demo/index.vue

diff --git a/public/index.html b/public/index.html
index de26463..b213b56 100644
--- a/public/index.html
+++ b/public/index.html
@@ -13,9 +13,11 @@
   <script type="text/javascript" src="/static/crypto-js.js"></script>
   <script type="text/javascript" src="/static/base64.js"></script>
   <script type="text/javascript" src="/static/adapter.js"></script>
-  <script type="text/javascript" src="/static/saver.js"></script>
   <script type="text/javascript" src="/static/sign.js"></script>
+  <!-- sdk文件，必须， 在widnow上暴露hirtcwebsdk对象 -->
   <script type="text/javascript" src="/static/sdk.js"></script>
+  <!-- 第三库，非必须。使用本地录制功能需要 -->
+  <script type="text/javascript" src="/static/saver.js"></script>
   <!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
   <style>
     html,
diff --git a/src/router/index.js b/src/router/index.js
index 088dcf3..9f9e705 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -186,6 +186,19 @@ export const constantRoutes = [
         meta: { title: '工具', icon: 'tool' }
       }
     ]
+  },
+    {
+    path: '/demo',
+    component: Layout,
+    redirect: '/demo/index',
+    children: [
+      {
+        path: 'index',
+        component: () => import('@/views/demo/index'),
+        name: 'Demo',
+        meta: { title: '聚好看demo', icon: 'tool' }
+      }
+    ]
   },
   {
     path: '/lock',
diff --git a/src/views/demo/index.vue b/src/views/demo/index.vue
new file mode 100644
index 0000000..07c463f
--- /dev/null
+++ b/src/views/demo/index.vue
@@ -0,0 +1,1067 @@
+<template>
+  <div class="room">
+    <div class="disconnect-tips" v-if="isDisconnect">
+      <el-alert title="网络连接中..." type="warning" center show-icon :closable="false"></el-alert>
+    </div>
+    <div class="left">
+      <el-collapse accordion class="env">
+        <el-collapse-item>
+          <template slot="title">
+            <div class="title">环境配置</div>
+          </template>
+          <div class="content">
+            <h3>serviceID服务ID</h3>
+            <el-input class="hi-input" v-model="serviceID"></el-input>
+            <h3>serviceKey服务key</h3>
+            <el-input class="hi-input" v-model="serviceKey"></el-input>
+            <h3>BasicRoomServiceToken房间服务接口</h3>
+            <el-input class="hi-input" v-model="BasicRoomServiceToken"></el-input>
+            <el-button class="hi-button" @click="setOpts">CONFIRM确认</el-button>
+          </div>
+        </el-collapse-item>
+      </el-collapse>
+      <div class="title">操作</div>
+      <div class="content">
+        <h3>用户名</h3>
+        <el-input class="hi-input" v-model="userID"></el-input>
+        <h3>房间号</h3>
+        <el-input class="hi-input" v-model="roomID"></el-input>
+      </div>
+      <!-- 设备选择区域 -->
+      <div class="content">
+        <h3>视频</h3>
+        <el-select class="hi-select" :value="localCameraStream.vDeviceID" placeholder="请选择"
+          @change="onVideoDeviceChange">
+          <el-option v-for="item in device.video" :key="item.id" :label="item.name" :value="item.id">
+          </el-option>
+        </el-select>
+        <h3>音频</h3>
+        <el-select class="hi-select" :value="localCameraStream.aDeviceID" placeholder="请选择"
+          @change="onAudioDeviceChange">
+          <el-option v-for="item in device.audio" :key="item.id" :label="item.name" :value="item.id">
+          </el-option>
+        </el-select>
+      </div>
+      <div>
+        <el-button type="primary" plain class="hi-button" @click="join" :disabled="isJoined">JOIN进入一个音视频通话房间（以下简称"进房"）
+        </el-button>
+        <el-button type="primary" plain class="hi-button" @click="leave">LEAVE离开当前房间</el-button>
+        <el-button type="primary" plain class="hi-button" @click="publish" :disabled="!!localCameraStream.publishID">
+          PUBLISH发布流
+        </el-button>
+        <el-button type="primary" plain class="hi-button" @click="unpublish">UNPUBLISH取消发布</el-button>
+        <el-button type="primary" plain class="hi-button" @click="screenShare"
+          :disabled="!!localScreenStream.publishID">
+          SCREEN SHARE屏幕共享
+        </el-button>
+        <el-button type="primary" plain class="hi-button" @click="screenUnshare">SCREEN UNSHARE取消共享</el-button>
+        <el-button type="primary" plain class="hi-button" @click="publishEx"
+          :disabled="!!localCameraStreamEx.publishID">PUBLISHEX扩展发布</el-button>
+        <el-button type="primary" plain class="hi-button" @click="unpublishEx">UNPUBLISHEX取消扩展发布</el-button>
+      </div>
+      <!-- 成员列表区域 -->
+      <div class="title">成员列表</div>
+      <ul class="user-list">
+        <li class="user" v-for="user in userList" :key="user.userID">
+          {{ user.userID }}
+        </li>
+      </ul>
+    </div>
+    <div class="right">
+      <!-- 本地流区域 -->
+      <div class="local-stream" v-show="localCameraStream.publishID">
+        <div class="video" :ref="`stream-${localCameraStream.type}`"></div>
+        <div class="status">
+          <div class="name">{{ userID }}</div>
+          <div class="stream-control">
+            <div class="video-control control">
+              <span @click="localStreamToggleVideo(localCameraStream.type)">
+                <svg-icon v-if="!localCameraStream.muteVideo" icon-name="video" class="icon-class local"></svg-icon>
+                <svg-icon v-else icon-name="video-muted" class="icon-class"></svg-icon>
+              </span>
+            </div>
+            <div class="audio-control control">
+              <span @click="localStreamToggleAudio(localCameraStream.type)">
+                <svg-icon v-if="!localCameraStream.muteAudio" icon-name="audio" class="icon-class local"></svg-icon>
+                <svg-icon v-else icon-name="audio-muted" class="icon-class"></svg-icon>
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="local-stream" v-show="localScreenStream.publishID">
+        <div class="video" :ref="`stream-${localScreenStream.type}`"></div>
+        <div class="status">
+          <div class="name">{{ userID }}</div>
+          <div class="stream-control">
+            <div class="video-control control">
+              <span @click="localStreamToggleVideo(localScreenStream.type)">
+                <svg-icon v-if="!localCameraStream.muteVideo" icon-name="video" class="icon-class local"></svg-icon>
+                <svg-icon v-else icon-name="video-muted" class="icon-class"></svg-icon>
+              </span>
+            </div>
+            <div class="audio-control control">
+              <span @click="localStreamToggleAudio(localScreenStream.type)">
+                <svg-icon v-if="!localCameraStream.muteAudio" icon-name="audio" class="icon-class local"></svg-icon>
+                <svg-icon v-else icon-name="audio-muted" class="icon-class"></svg-icon>
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="local-stream" v-show="localCameraStreamEx.publishID">
+        <div class="video" :ref="`stream-${localCameraStreamEx.tag}`"></div>
+        <div class="status">
+          <div class="name">{{ userID }}</div>
+          <div class="stream-control">
+            <div class="video-control control">
+              <span @click="localStreamToggleVideo(localCameraStreamEx.tag)">
+                <svg-icon v-if="!localCameraStreamEx.muteVideo" icon-name="video" class="icon-class local"></svg-icon>
+                <svg-icon v-else icon-name="video-muted" class="icon-class"></svg-icon>
+              </span>
+            </div>
+            <div class="audio-control control">
+              <span @click="localStreamToggleAudio(localCameraStreamEx.tag)">
+                <svg-icon v-if="!localCameraStreamEx.muteAudio" icon-name="audio" class="icon-class local"></svg-icon>
+                <svg-icon v-else icon-name="audio-muted" class="icon-class"></svg-icon>
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- 远端流区域 -->
+      <template v-for="stream in remoteStream">
+        <div class="remote-stream" v-if="stream.subscribeID" :key="stream.subscribeID">
+          <div class="video" :ref="`stream-${stream.subscribeID}`"></div>
+          <div class="status">
+            <div class="name">{{ stream.userID }}</div>
+            <div class="stream-control">
+              <div class="video-control control">
+                <span>
+                  <svg-icon v-if="!stream.muteVideo" icon-name="video" class="icon-class"></svg-icon>
+                  <svg-icon v-else icon-name="video-muted" class="icon-class"></svg-icon>
+                </span>
+              </div>
+              <div class="audio-control control">
+                <span>
+                  <svg-icon v-if="!stream.muteAudio" icon-name="audio" class="icon-class"></svg-icon>
+                  <svg-icon v-else icon-name="audio-muted" class="icon-class"></svg-icon>
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script>
+// hirtcwebsdk挂在widnow, 相应的依赖也请挂在window上
+export default {
+  name: "room",
+  data() {
+    return {
+      storageKey: "HiWebRTC",
+      // 公网环境
+      serviceID: "90f4d5a954ab449e9b6aac92",
+      serviceKey: "2c17c6393771ee3048ae34d6b380c5ec",
+      BasicRoomServiceToken: "https://121.36.105.19:7080/v1/auth/token",
+      userID: new Date().getTime().toString(16).split('').reverse().join(''),
+      roomID: "123456",
+      isJoined: false,
+      isDisconnect: false,
+      isEnvChange: false,
+      localCameraStream: {
+        aDeviceID: "",
+        vDeviceID: "",
+        oDeviceID: "",
+        isPreviewed: false,
+        videoElement: null,
+        publishID: "",
+        muteVideo: false,
+        muteAudio: false,
+        type: window.hirtcwebsdk.StreamType.Camera,
+      },
+      localScreenStream: {
+        type: window.hirtcwebsdk.StreamType.Screen,
+        publishID: "",
+        muteVideo: false,
+        muteAudio: false,
+      },
+      localCameraStreamEx: {
+        tag: "tag1",
+        aDeviceID: "",
+        vDeviceID: "",
+        isPreviewed: false,
+        videoElement: null,
+        publishID: "",
+        muteVideo: false,
+        muteAudio: false,
+      },
+      remoteStream: [],
+      userList: [],
+      device: {
+        isInit: false,
+        audio: [],
+        video: [],
+        output: [],
+      },
+      joinRetry: 0,
+      publishRetry: 0,
+      subscribeRetry: 0,
+      maxRetry: 3,
+    };
+  },
+  mounted() {
+    this.bindEvent();
+    this.init();
+  },
+  unmounted() {
+    this.unbindEvent();
+    this.leave();
+  },
+  methods: {
+    init() {
+      // 获取本地配置
+      let localData = window.localStorage.getItem(this.storageKey);
+      if (localData) {
+        localData = JSON.parse(localData);
+        this.serviceID = localData.serviceID;
+        this.serviceKey = localData.serviceKey;
+        this.BasicRoomServiceToken = localData.BasicRoomServiceToken;
+      }
+
+      // 初始化SDK
+      window.hirtcwebsdk.init({
+        leaveBeforeUnload: false,
+        debug: false,
+        forceArea: true,
+        screenEnableAudio: true,
+        // 测试环境
+        // serviceID: '5d365a91045c96cbd0d75eb7',
+        // serviceKey: '31830Test',
+        serviceID: this.serviceID,
+        serviceKey: this.serviceKey,
+        Services: { BasicRoomServiceToken: this.BasicRoomServiceToken },
+      });
+
+      // 初始化设备
+      // askForPermission() => permission事件 => getDevices() => deviceList事件
+      window.hirtcwebsdk.askForPermission(true, true);
+    },
+    setOpts() {
+      const serviceID = this.serviceID.trim();
+      const serviceKey = this.serviceKey.trim();
+      const BasicRoomServiceToken =
+        this.BasicRoomServiceToken ||
+        "https://brs-hirtc.hismarttv.com/v1/auth/token";
+
+      if (serviceID === "") {
+        this.$message({
+          message: "serviceID不能为空",
+          type: "warning",
+        });
+        return;
+      }
+
+      if (serviceKey === "") {
+        this.$message({
+          message: "serviceKey不能为空",
+          type: "warning",
+        });
+        return;
+      }
+
+      window.hirtcwebsdk.init({
+        serviceID,
+        serviceKey,
+        Services: {
+          BasicRoomServiceToken: BasicRoomServiceToken,
+        },
+      });
+
+      window.localStorage.setItem(
+        this.storageKey,
+        JSON.stringify({
+          serviceID,
+          serviceKey,
+          BasicRoomServiceToken,
+        })
+      );
+
+      this.$message({
+        message: "环境配置成功",
+        type: "success",
+      });
+    },
+    join() {
+      const userID = this.userID.trim();
+      const roomID = this.roomID.trim();
+      console.log(userID, roomID);
+      if (userID === "") {
+        this.$message({
+          message: "用户名不能为空",
+          type: "warning",
+        });
+        return;
+      }
+      if (roomID === "") {
+        this.$message({
+          message: "房间号不能为空",
+          type: "warning",
+        });
+      }
+
+      window.hirtcwebsdk.join(roomID, userID, `${userID}@test`);
+    },
+    leave() {
+      window.hirtcwebsdk.leave();
+      this.isJoined = false;
+      this.clear();
+    },
+    initLocalStream(type) {
+      if (this.localCameraStream.type === type) {
+        if (this.localCameraStream.isPreviewed) return;
+        if (this.device.audio.length === 0 && this.device.video.length === 0) {
+          this.$message({
+            message: "请插入设备",
+            type: "warning",
+          });
+          return;
+        }
+        if (this.device.audio.length > 0) {
+          this.localCameraStream.aDeviceID = this.device.audio[0].id;
+          window.hirtcwebsdk.setDevice(
+            "audioinput",
+            this.localCameraStream.aDeviceID
+          );
+        }
+        if (this.device.video.length > 0) {
+          this.localCameraStream.vDeviceID = this.device.video[0].id;
+          window.hirtcwebsdk.setDevice(
+            "videoinput",
+            this.localCameraStream.vDeviceID
+          );
+        }
+        if (this.device.output.length > 0) {
+          this.localCameraStream.oDeviceID = this.device.output[0].id;
+          window.hirtcwebsdk.setDevice(
+            "audiooutput",
+            this.localCameraStream.oDeviceID
+          );
+        }
+        this.localCameraStream.videoElement = document.createElement("video");
+        this.localCameraStream.videoElement.style =
+          "width:100%;height:100%;object-fit:cover";
+        // preview() => camera事件
+        window.hirtcwebsdk.preview(
+          this.localCameraStream.videoElement,
+          window.hirtcwebsdk.StreamType.Camera,
+          true
+        );
+      } else if (this.localScreenStream.type === type) {
+        // TODO 申请屏幕共享
+        this.localScreenStream.videoElement = document.createElement("video");
+        this.localScreenStream.videoElement.style =
+          "width:100%;height:100%;object-fit:cover";
+        // preview() => screen事件
+        window.hirtcwebsdk.preview(
+          this.localScreenStream.videoElement,
+          window.hirtcwebsdk.StreamType.Screen,
+          true
+        );
+      } else {
+        if (this.localCameraStreamEx.isPreviewed) return;
+        if (this.device.audio.length > 0) {
+          this.localCameraStreamEx.aDeviceID = this.device.audio[0].id;
+        }
+        if (this.device.video.length > 0) {
+          this.localCameraStreamEx.vDeviceID = this.device.video[0].id;
+        }
+        this.localCameraStreamEx.videoElement = document.createElement("video");
+        this.localCameraStreamEx.videoElement.style =
+          "width:100%;height:100%;object-fit:cover";
+        // previewEx() => cameraEx事件
+        window.hirtcwebsdk.previewEx(
+          this.localCameraStreamEx.videoElement,
+          this.localCameraStreamEx.tag,
+          this.localCameraStreamEx.aDeviceID,
+          this.localCameraStreamEx.vDeviceID,
+          true
+        );
+      }
+    },
+    publish() {
+      // 进房后才能推流
+      if (!this.isJoined) {
+        this.$message({
+          message: "请进房成功后，再发布",
+          type: "warning",
+        });
+        return;
+      }
+      // 推流依赖 init() 硬件权限 和 initLocalStream() 硬件配置和预览
+      // publish() => published事件
+      if (this.localCameraStream.isPreviewed) {
+        window.hirtcwebsdk.publish(this.localCameraStream.type);
+      } else {
+        this.$message({
+          message: "没有预览成功,请检查设备",
+          type: "warning",
+        });
+      }
+    },
+    unpublish() {
+      window.hirtcwebsdk.unpublish(this.localCameraStream.type);
+      this.localCameraStream.publishID = "";
+    },
+    publishEx() {
+      // 进房后才能推流
+      if (!this.isJoined) {
+        this.$message({
+          message: "请进房成功后，再发布",
+          type: "warning",
+        });
+        return;
+      }
+      // 推流依赖 init() 硬件权限 和 initLocalStream() 硬件配置和预览
+      // publishEx() => publishedEx事件
+      if (this.localCameraStreamEx.isPreviewed) {
+        console.warn(`ok: ${this.localCameraStreamEx.isPreviewed}`);
+        window.hirtcwebsdk.publishEx(this.localCameraStreamEx.tag);
+      } else {
+        this.$message({
+          message: "没有预览成功,请检查设备",
+          type: "warning",
+        });
+      }
+    },
+    unpublishEx() {
+      window.hirtcwebsdk.unpublishEx(this.localCameraStreamEx.tag);
+      this.localCameraStreamEx.publishID = "";
+    },
+    screenShare() {
+      // 进房后才能推流
+      if (!this.isJoined) {
+        this.$message({
+          message: "请进房成功后，再发布",
+          type: "warning",
+        });
+        return;
+      }
+      this.initLocalStream(this.localScreenStream.type);
+    },
+    screenUnshare() {
+      window.hirtcwebsdk.unpublish(this.localScreenStream.type);
+      this.localScreenStream.publishID = "";
+    },
+    publishScreen() {
+      window.hirtcwebsdk.publish(this.localScreenStream.type);
+    },
+    subscribe(stream) {
+      const streamCopy = { ...stream };
+      streamCopy.video = document.createElement("video");
+      streamCopy.video.style = "width:100%;height:100%;object-fit:cover";
+      streamCopy.layerIndex = 0;
+      window.hirtcwebsdk.subscribe(
+        streamCopy.video,
+        streamCopy.userID,
+        streamCopy.publishID,
+        streamCopy.layerIndex
+      );
+      this.remoteStream.push(streamCopy);
+    },
+    unsubscribe(stream) {
+      window.hirtcwebsdk.unsubscribe(stream.publishID, stream.subscribeID);
+    },
+    clear() {
+      this.userList = [];
+      this.remoteStream = [];
+      this.localCameraStream.publishID = "";
+      this.localScreenStream.publishID = "";
+    },
+    onVideoDeviceChange(value) {
+      this.localCameraStream.vDeviceID = value;
+      window.hirtcwebsdk.setDevice("videoinput", value);
+    },
+    onAudioDeviceChange(value) {
+      this.localCameraStream.aDeviceID = value;
+      window.hirtcwebsdk.setDevice("audioinput", value);
+    },
+    bindEvent() {
+      window.hirtcwebsdk.addListener("permission", this.handlePermission); // 音视频设备权限回调
+      window.hirtcwebsdk.addListener("deviceList", this.handleDeviceList); // 获取设备列表回调
+      window.hirtcwebsdk.addListener("deviceChanged", this.handleDeviceChanged); // 硬件插拔事件
+      window.hirtcwebsdk.addListener("joined", this.handleJoined); // 进房成功
+      window.hirtcwebsdk.addListener("camera", this.handleCameraPreview); // 本地音视频预览回调
+      window.hirtcwebsdk.addListener("screen", this.handleSreenPreview); // 屏幕共享预览回调
+      window.hirtcwebsdk.addListener("cameraEx", this.handleCameraExPreview); // 本地音视频预览回调
+      window.hirtcwebsdk.addListener("published", this.handlePublished); // 本地音视频/屏幕共享发布成功
+      window.hirtcwebsdk.addListener("publishedEx", this.handlePublishedEx); // 本地音视频/屏幕共享发布成功
+      window.hirtcwebsdk.addListener("subscribed", this.handleSubscribed); // 订阅远端流成功
+      window.hirtcwebsdk.addListener("someoneJoined", this.handleSomeoneJoined); // 远端用户加入
+      window.hirtcwebsdk.addListener("someoneLeft", this.handleSomeoneLeft); // 远端用户离开
+      window.hirtcwebsdk.addListener("streamAdded", this.handleStreamAdded); // 远端用户发布流
+      window.hirtcwebsdk.addListener("streamRemoved", this.handleStreamRemoved); // 远端用户取消流
+      window.hirtcwebsdk.addListener("streamUpdated", this.handleStreamUpdated); // 远端用户更新流状态（开关音视频）
+      window.hirtcwebsdk.addListener("disconnected", this.handleDisconnected); // 服务器断开,若已进房成功,会自动重连
+      window.hirtcwebsdk.addListener("reconnected", this.handleReconnected); // 重连成功
+      window.hirtcwebsdk.addListener("error", this.handleError); // 错误处理
+    },
+    handlePermission(audio, video, found, allowed) {
+      if (found) {
+        if (allowed) {
+          window.hirtcwebsdk.getDevices();
+        } else {
+          console.warn("user rejected", audio, video);
+        }
+      } else {
+        if (audio && video) {
+          window.hirtcwebsdk.askForPermission(false, true);
+        } else if (video) {
+          window.hirtcwebsdk.askForPermission(true, false);
+        } else {
+          console.warn("no device");
+        }
+      }
+    },
+    handleDeviceList(info) {
+      if (!info) {
+        return;
+      }
+      const newDevice = JSON.parse(JSON.stringify(info));
+
+      if (!this.device.isInit) {
+        this.device.audio = newDevice.audioinput;
+        this.device.video = newDevice.videoinput;
+        this.device.output = newDevice.audiooutput;
+        this.device.isInit = true;
+        this.initLocalStream(this.localCameraStream.type);
+        this.initLocalStream(this.localCameraStreamEx.tag);
+      } else {
+        // TODO 检测 device 与 newDevice 的差异,提示设备插拔,和相应的操作
+      }
+    },
+    handleDeviceChanged() {
+      window.hirtcwebsdk.getDevices();
+    },
+    handleJoined(users) {
+      this.joinRetry = 0;
+      if (users && users.length > 0) {
+        this.userList = users;
+        users.forEach((user) => {
+          if (user.streams && user.streams.length > 0) {
+            user.streams.forEach((stream) => {
+              this.subscribe({
+                ...stream,
+                userID: user.userID,
+              });
+            });
+          }
+        });
+      }
+      // 添加自己
+      this.userList.unshift({
+        userID: `${this.userID}(我)`,
+      });
+      this.isJoined = true;
+      this.$message({
+        message: "进房成功",
+        type: "success",
+      });
+
+      // 进房推流
+      if (this.localCameraStream.isPreviewed) {
+        this.publish();
+      }
+    },
+    handleCameraPreview(open) {
+      if (open) {
+        this.localCameraStream.isPreviewed = true;
+        if (this.isJoined) {
+          this.publish();
+        }
+      } else {
+        this.localCameraStream.isPreviewed = false;
+      }
+    },
+    handleCameraExPreview(open) {
+      this.localCameraStreamEx.isPreviewed = open;
+    },
+    handleSreenPreview(open, label) {
+      if (open && label) {
+        this.publishScreen();
+      } else if (this.localScreenStream.publishID) {
+        this.screenUnshare();
+      }
+    },
+    handlePublished(publishID, streamType) {
+      this.publishRetry = 0;
+      if (streamType === this.localCameraStream.type) {
+        this.localCameraStream.publishID = publishID;
+        this.$nextTick(() => {
+          this.$refs[`stream-${streamType}`].appendChild(
+            this.localCameraStream.videoElement
+          );
+        });
+      } else {
+        this.localScreenStream.publishID = publishID;
+        this.$nextTick(() => {
+          this.$refs[`stream-${streamType}`].appendChild(
+            this.localScreenStream.videoElement
+          );
+        });
+      }
+    },
+    handlePublishedEx(publishID, tag) {
+      if (this.localCameraStreamEx.tag === tag) {
+        this.localCameraStreamEx.publishID = publishID;
+        this.$nextTick(() => {
+          this.$refs[`stream-${tag}`].appendChild(
+            this.localCameraStreamEx.videoElement
+          );
+        });
+      }
+    },
+    handleSubscribed(subscribeID, publishID) {
+      const index = this.remoteStream.findIndex(
+        (o) => o.publishID === publishID
+      );
+      this.subscribeRetry = 0;
+      if (index !== -1) {
+        this.remoteStream[index].subscribeID = subscribeID;
+        this.$set(this.remoteStream, index, this.remoteStream[index]);
+        this.$nextTick(() => {
+          this.$refs[`stream-${subscribeID}`][0].appendChild(
+            this.remoteStream[index].video
+          );
+        });
+      }
+    },
+    handleSomeoneJoined(userID) {
+      this.userList.push({
+        userID,
+      });
+      this.$message({
+        message: `${userID}进入房间`,
+        type: "info",
+      });
+    },
+    handleSomeoneLeft(userID) {
+      this.userList = this.userList.filter((o) => o.userID !== userID);
+      this.remoteStream = this.remoteStream.filter((o) => o.userID !== userID);
+      this.$message({
+        message: `${userID}离开房间`,
+        type: "info",
+      });
+    },
+    handleStreamAdded(userID, stream) {
+      this.subscribe({
+        ...stream,
+        userID,
+      });
+    },
+    handleStreamRemoved(userID, publishID) {
+      this.remoteStream = this.remoteStream.filter(
+        (o) => o.publishID !== publishID
+      );
+    },
+    handleStreamUpdated(userID, publishID, streamTrack, mute) {
+      const index = this.remoteStream.findIndex(
+        (o) => o.userID === userID && o.publishID === publishID
+      );
+      if (index !== -1) {
+        const stream = this.remoteStream[index];
+        if (streamTrack === window.hirtcwebsdk.StreamTrack.Video) {
+          stream.muteVideo = mute;
+        } else {
+          stream.muteAudio = mute;
+        }
+        this.$set(this.remoteStream, index, stream);
+      }
+    },
+    handleDisconnected() {
+      this.isDisconnect = true;
+    },
+    handleReconnected(users) {
+      this.isDisconnect = false;
+      console.log("handleReconnected", users);
+    },
+    handleError(code, detail) {
+      console.log("handleError", code, detail);
+      switch (code) {
+        case window.hirtcwebsdk.ErrorCode.ParamsError: // 参数错误，一般是调用方法的参数不合法或缺失
+          {
+            const { desc } = detail;
+            console.log(`ParamsError: ${desc}`);
+          }
+          break;
+        case window.hirtcwebsdk.ErrorCode.JoinError: // 加入失败
+          {
+            const { desc } = detail;
+            console.log(`JoinError: ${desc}`);
+            if (this.joinRetry < this.maxRetry) {
+              this.joinRetry++;
+              // 重新进房
+              this.join();
+            } else {
+              this.joinRetry = 0;
+              this.$message({
+                message: "进房失败，请检查网络",
+                type: "error",
+              });
+            }
+          }
+          break;
+        case window.hirtcwebsdk.ErrorCode.PreviewError: // 预览操作失败，一般是打开预览异常
+          {
+            const { desc } = detail;
+            console.log(`PreviewError: ${desc}`);
+          }
+          break;
+        case window.hirtcwebsdk.ErrorCode.PublishError: // 发布流失败
+          {
+            const { type, desc, tag, publishID } = detail;
+            // 发布前publishID为空，发布后publishID有值
+            console.log(`PublishError: ${(type, tag, publishID, desc)}`);
+            if (this.publishRetry < this.maxRetry) {
+              this.publishRetry++;
+              if (type === this.localCameraStream.type) {
+                // 重新发布摄像头流
+                this.publish();
+              } else if (type === this.localScreenStream.type) {
+                // 重新发布屏幕共享流
+                this.publishScreen();
+              }
+            } else {
+              this.publishRetry = 0;
+              this.$message({
+                message: "发布错误，请检查网络",
+                type: "error",
+              });
+            }
+          }
+          break;
+        case window.hirtcwebsdk.ErrorCode.SubscribeError: // 订阅流失败
+          {
+            const { publishID, subscribeID, desc } = detail;
+            // 订阅前subscribeID为空，订阅后subscribeID有值
+            console.log(`SubscribeError: ${(publishID, subscribeID, desc)}`);
+            const index = this.remoteStream.findIndex(
+              (o) => o.publishID === publishID
+            );
+            if (index !== -1) {
+              if (this.subscribeRetry < this.maxRetry) {
+                this.subscribeRetry++;
+                // 重新订阅
+                const stream = this.remoteStream.splice(index, 1)[0];
+                this.subscribe(stream);
+              } else {
+                this.subscribeRetry = 0;
+                this.$message({
+                  message: "订阅错误，请检查网络",
+                  type: "error",
+                });
+              }
+            }
+          }
+          break;
+        case window.hirtcwebsdk.ErrorCode.SetDeviceError: // 选择设备失败
+          {
+            const { desc } = detail;
+            console.log(`SetDeviceError: ${desc}`);
+          }
+          break;
+        case window.hirtcwebsdk.ErrorCode.RecordError: // 录制失败
+          {
+            const { desc } = detail;
+            console.log(`RecordError: ${desc}`);
+          }
+          break;
+        case window.hirtcwebsdk.ErrorCode.PrintError: // 截图失败
+          {
+            const { desc } = detail;
+            console.log(`PrintError: ${desc}`);
+          }
+          break;
+      }
+    },
+    unbindEvent() {
+      window.hirtcwebsdk.removeListener("permission", this.handlePermission);
+      window.hirtcwebsdk.removeListener("deviceList", this.handleDeviceList);
+      window.hirtcwebsdk.removeListener(
+        "deviceChanged",
+        this.handleDeviceChanged
+      );
+      window.hirtcwebsdk.removeListener("joined", this.handleJoined);
+      window.hirtcwebsdk.removeListener("camera", this.handleCameraPreview);
+      window.hirtcwebsdk.removeListener("screen", this.handleSreenPreview);
+      window.hirtcwebsdk.removeListener("published", this.handlePublished);
+      window.hirtcwebsdk.removeListener("subscribed", this.handleSubscribed);
+      window.hirtcwebsdk.removeListener(
+        "someoneJoined",
+        this.handleSomeoneJoined
+      );
+      window.hirtcwebsdk.removeListener("someoneLeft", this.handleSomeoneLeft);
+      window.hirtcwebsdk.removeListener("streamAdded", this.handleStreamAdded);
+      window.hirtcwebsdk.removeListener(
+        "streamRemoved",
+        this.handleStreamRemoved
+      );
+      window.hirtcwebsdk.removeListener(
+        "streamUpdated",
+        this.handleStreamUpdated
+      );
+      window.hirtcwebsdk.removeListener(
+        "disconnected",
+        this.handleDisconnected
+      );
+      window.hirtcwebsdk.removeListener("reconnected", this.handleReconnected);
+      window.hirtcwebsdk.removeListener("error", this.handleError);
+    },
+
+    localStreamToggleAudio(type) {
+      const localStream =
+        this.localCameraStream.type === type
+          ? this.localCameraStream
+          : this.localScreenStream;
+      const muteAudio = !localStream.muteAudio;
+      localStream.muteAudio = muteAudio;
+      window.hirtcwebsdk.muteLocal(localStream.type, {
+        muteAudio,
+      });
+    },
+
+    localStreamToggleVideo(type) {
+      const localStream =
+        this.localCameraStream.type === type
+          ? this.localCameraStream
+          : this.localScreenStream;
+      const muteVideo = !localStream.muteVideo;
+      localStream.muteVideo = muteVideo;
+      window.hirtcwebsdk.muteLocal(localStream.type, {
+        muteVideo,
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.hi-button {
+  &.el-button {
+    color: #ffffff;
+    font-size: 14px;
+    width: 140px;
+    height: 36px;
+    padding: 0;
+    text-align: center;
+    line-height: 36px;
+    margin: 0 0 10px 6px;
+    border: none;
+    background: linear-gradient(to bottom, #37c1c3, #009da2);
+
+    &:hover,
+    &:active,
+    &:focus {
+      background: linear-gradient(to bottom, #32aeb0, #008d92);
+    }
+
+    &.is-disabled,
+    &.is-disabled:hover,
+    &.is-disabled:active,
+    &.is-disabled:focus {
+      color: #ffffff;
+      background: #a0d5d7;
+    }
+  }
+}
+
+.hi-input {
+  margin: 2px 0 16px;
+
+  &.el-input {
+    .el-input__inner {
+      color: #000000;
+      border-radius: 0;
+      border-top: none;
+      border-left: none;
+      border-right: none;
+      height: 32px;
+      line-height: 32px;
+      padding: 0;
+      font-size: 16px;
+
+      &:focus {
+        border-color: #009da2;
+      }
+    }
+  }
+}
+
+.hi-select {
+  width: 100%;
+  user-select: none;
+  margin-bottom: 14px;
+
+  &.el-select {
+    .el-input {
+      border-bottom: 1px solid #dcdfe6;
+
+      &.is-focus {
+        border-color: #009da2;
+      }
+
+      .el-input__inner {
+        max-width: 90%;
+        color: #000000;
+        border-radius: 0;
+        border: none;
+        padding: 0;
+        font-size: 16px;
+      }
+    }
+  }
+}
+
+.env {
+  .el-collapse-item {
+    margin-bottom: 0;
+  }
+
+  &.el-collapse,
+  .el-collapse-item__header,
+  .el-collapse-item__wrap {
+    border: none;
+  }
+
+  .el-collapse-item__content {
+    padding-bottom: 0;
+  }
+}
+</style>
+
+<style lang="scss" scoped>
+.room {
+  display: flex;
+  height: 100%;
+
+  .disconnect-tips {
+    position: absolute;
+    width: 400px;
+    left: 50%;
+    margin-left: -200px;
+    top: 8px;
+  }
+
+  .left {
+    width: 300px;
+    min-width: 300px;
+    border-right: 1px solid #00a9a7;
+    padding-top: 10px;
+
+    .title {
+      font-size: 16px;
+      padding: 0 0 14px 6px;
+    }
+
+    .content {
+      padding: 0 6px;
+
+      h3 {
+        color: rgba(0, 0, 0, 0.46);
+        font-size: 12px;
+      }
+
+      &:after {
+        content: "";
+        display: block;
+        clear: both;
+      }
+    }
+
+    .user-list {
+      .user {
+        color: #000000;
+        margin-bottom: 4px;
+      }
+    }
+
+    .env {
+      margin-bottom: 5px;
+      border-bottom: 1px solid #dcdfe6;
+
+      .title {
+        padding: 0 0 0 6px;
+      }
+
+      .hi-button {
+        margin: 0 0 10px 73px;
+      }
+    }
+  }
+
+  .right {
+    flex-grow: 2;
+
+    .remote-stream,
+    .local-stream {
+      width: 340px;
+      height: 250px;
+      position: relative;
+      float: left;
+      margin: 10px 0 0 10px;
+
+      .video {
+        width: 100%;
+        height: 100%;
+        background-color: #000000;
+
+        video {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .status {
+        color: #ffffff;
+        width: 100%;
+        height: 40px;
+        background-color: rgba(0, 0, 0, 0.4);
+        position: absolute;
+        bottom: 0;
+
+        .name {
+          width: 70%;
+          height: 100%;
+          line-height: 40px;
+          padding-left: 10px;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+
+        .stream-control {
+          position: absolute;
+          top: 0;
+          right: 0;
+          width: 30%;
+          height: 100%;
+          display: flex;
+          justify-content: end;
+          align-items: center;
+
+          .icon-class {
+            margin-right: 8px;
+
+            &.local {
+              cursor: pointer;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>