pbl-teacher-table/src/components/pages/workPage/components/questionsAndAnswers.vue

<template>
  <div class="questionsAndAnswers">
    <div class="qaa_title">{{ work.answerQ }}</div>
    <div class="qaa_img" v-if="work.imageList && work.imageList.length > 0">
      <div v-for="(item, index) in work.imageList" :key="index">
        <el-image style="width: auto; height: 100%;cursor: pointer;max-height: 300px;" :src="item.url" alt=""
          :preview-src-list="[item.url]" fit="cover" />
      </div>
    </div>
    <div class="qaa_type">{{ lang.ssQAQuestion }}</div>
    <div class="qaa_recording">
      <div class="qaa_r_left">
        <div class="voiceprint" v-show="recordObj.status == '1'">
          <div class="voiceprint_icon">
            <svg width="120" height="20" viewBox="0 0 120 20">
              <rect x="5" y="5" width="8" :height="10" rx="3" fill="#2196F3">
                <animate attributeName="height" values="10;20;10" dur="1s" repeatCount="indefinite" begin="0s" />
                <animate attributeName="y" values="10;0;10" dur="1s" repeatCount="indefinite" begin="0s" />
              </rect>
              <rect x="29" y="5" width="8" :height="10" rx="3" fill="#2196F3">
                <animate attributeName="height" values="10;20;10" dur="1s" repeatCount="indefinite" begin="0.2s" />
                <animate attributeName="y" values="10;0;10" dur="1s" repeatCount="indefinite" begin="0.2s" />
              </rect>
              <rect x="53" y="5" width="8" :height="10" rx="3" fill="#2196F3">
                <animate attributeName="height" values="10;20;10" dur="1s" repeatCount="indefinite" begin="0.4s" />
                <animate attributeName="y" values="10;0;10" dur="1s" repeatCount="indefinite" begin="0.4s" />
              </rect>
              <rect x="77" y="5" width="8" :height="10" rx="3" fill="#2196F3">
                <animate attributeName="height" values="10;20;10" dur="1s" repeatCount="indefinite" begin="0.6s" />
                <animate attributeName="y" values="10;0;10" dur="1s" repeatCount="indefinite" begin="0.6s" />
              </rect>
              <rect x="101" y="5" width="8" :height="10" rx="3" fill="#2196F3">
                <animate attributeName="height" values="10;20;10" dur="1s" repeatCount="indefinite" begin="0.8s" />
                <animate attributeName="y" values="10;0;10" dur="1s" repeatCount="indefinite" begin="0.8s" />
              </rect>
            </svg>
          </div>
        </div>
        <!-- <svg v-show="recordObj.status=='1'" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">Icon from SVG Spinners by Utkarsh Verma - https://github.com/n3r4zzurr0/svg-spinners/blob/main/LICENSE<rect width="2.8" height="12" x="1" y="6" fill="#2196F3"><animate attributeName="y" begin="svgSpinnersBarsScaleMiddle0.begin+0.4s" calcMode="spline" dur="0.6s" keySplines=".14,.73,.34,1;.65,.26,.82,.45" values="6;1;6"/><animate attributeName="height" begin="svgSpinnersBarsScaleMiddle0.begin+0.4s" calcMode="spline" dur="0.6s" keySplines=".14,.73,.34,1;.65,.26,.82,.45" values="12;22;12"/></rect><rect width="2.8" height="12" x="5.8" y="6" fill="#2196F3"><animate attributeName="y" begin="svgSpinnersBarsScaleMiddle0.begin+0.2s" calcMode="spline" dur="0.6s" keySplines=".14,.73,.34,1;.65,.26,.82,.45" values="6;1;6"/><animate attributeName="height" begin="svgSpinnersBarsScaleMiddle0.begin+0.2s" calcMode="spline" dur="0.6s" keySplines=".14,.73,.34,1;.65,.26,.82,.45" values="12;22;12"/></rect><rect width="2.8" height="12" x="10.6" y="6" fill="#2196F3"><animate id="svgSpinnersBarsScaleMiddle0" attributeName="y" begin="0;svgSpinnersBarsScaleMiddle1.end-0.1s" calcMode="spline" dur="0.6s" keySplines=".14,.73,.34,1;.65,.26,.82,.45" values="6;1;6"/><animate attributeName="height" begin="0;svgSpinnersBarsScaleMiddle1.end-0.1s" calcMode="spline" dur="0.6s" keySplines=".14,.73,.34,1;.65,.26,.82,.45" values="12;22;12"/></rect><rect width="2.8" height="12" x="15.4" y="6" fill="#2196F3"><animate attributeName="y" begin="svgSpinnersBarsScaleMiddle0.begin+0.2s" calcMode="spline" dur="0.6s" keySplines=".14,.73,.34,1;.65,.26,.82,.45" values="6;1;6"/><animate attributeName="height" begin="svgSpinnersBarsScaleMiddle0.begin+0.2s" calcMode="spline" dur="0.6s" keySplines=".14,.73,.34,1;.65,.26,.82,.45" values="12;22;12"/></rect><rect width="2.8" height="12" x="20.2" y="6" fill="#2196F3"><animate id="svgSpinnersBarsScaleMiddle1" attributeName="y" begin="svgSpinnersBarsScaleMiddle0.begin+0.4s" calcMode="spline" dur="0.6s" keySplines=".14,.73,.34,1;.65,.26,.82,.45" values="6;1;6"/><animate attributeName="height" begin="svgSpinnersBarsScaleMiddle0.begin+0.4s" calcMode="spline" dur="0.6s" keySplines=".14,.73,.34,1;.65,.26,.82,.45" values="12;22;12"/></rect></svg> -->
        <img v-show="recordObj.status == '0'" src="../../../../assets//icon/workPage/status_icon.svg">
      </div>
      <div class="qaa_r_right">
        <div class="qaa_r_r_btn" v-if="recordObj.status == '0'" @click="startRecord">
          <img src="../../../../assets/icon/workPage/start_icon.svg">
          <span>{{ lang.ssStartRec }}</span>
        </div>
        <div class="qaa_r_r_btn" v-if="recordObj.status == '1'" @click="stopRecord">
          <img src="../../../../assets/icon/workPage/stop_icon.svg">
          <span style="color: #F53F3F;">{{ lang.ssStopRec }}</span>
        </div>
      </div>
    </div>
    <div class="qaa_editArea">
      <wangEnduit ref="wangEnduitRef" style="height: 100%;" :value="work.answer" @change="changeAnswer" />
    </div>
    <!-- 录音转文字 -->
    <iframe allow="camera *; microphone *;display-capture;midi;encrypted-media;" :src="iframeUrl" ref="iframeRef"
      v-show="false"></iframe>
  </div>
</template>

<script>
import wangEnduit from "./wangEnduit.vue";
export default {
  props: {
    workData: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  components: {
    wangEnduit
  },
  data() {
    return {
      work: {
        answer: ""
      },
      recordObj: {
        status: "0", // 0：默认  1：录音中  2：暂停,
        loading: false,
        startTime: 0, // 开始录音时间
      }

    };
  },
  computed: {
    iframeUrl() {
      if (this.lang.lang == 'com') {
        return `https://cloud.cocorobo.com/browser/public/index.html`;
      } else if (this.lang.lang == 'hk') {
        return `https://cloud.cocorobo.hk/browser/public/index.html`;
      } else {
        return `https://beta.cloud.cocorobo.cn/browser/public/index.html`;
      }
    }
  },
  watch: {
    work: {
      deep: true,
      handler(newValue) {
        if (JSON.stringify(newValue) != JSON.stringify(this.workData.json)) {
          this.changeWorkData(newValue);
        }
      }
    },
    workData: {
      handler: function (newValue, oldValue) {
        if (JSON.stringify(newValue) != JSON.stringify(oldValue)) {
          this.work = JSON.parse(JSON.stringify(this.workData.json));
          console.log("workData", JSON.stringify(this.work));
          this.$forceUpdate();
        }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    // 清理 iframe 录音会话（统一清理入口）
    _cleanupTranscriber(iframe) {
      iframe.contentWindow.onSessionStopped = null;
      iframe.contentWindow.window.onRecognizedResult = null;
    },
    // 更新作业
    changeWorkData(newValue) {
      this.$emit("changeWorkData", JSON.stringify(newValue));
    },
    // 更新文本
    changeAnswer(newValue) {
      this.work.answer = newValue;
    },
    // 开始录音 — 先请求权限，权限通过后再启动转录
    startRecord() {
      let iframe = this.$refs["iframeRef"];
      const langMap = { com: 8, hk: 4 };
      const idx = langMap[this.lang.lang] || 2;
      iframe.contentWindow.window.document.getElementById("languageOptions").selectedIndex = idx;

      const startTranscriber = () => {
        iframe.contentWindow.window.onRecognizedResult = e => {
          console.log("onRecognizedResult", e)
          let privText = e.privText;
          console.log("👇转译对象👇");
          console.log(e);
          console.log("👇转译结果👇");
          console.log(privText);
          if (!privText) {
            return;
          }

          // 获取wangEnduit富文本组件实例
          const editorComponent = this.$refs.wangEnduitRef;
          if (editorComponent && editorComponent.editor) {
            // 获取当前光标位置并插入文本
            editorComponent.editor.cmd.do('insertText', privText);
            // 同步内容到work.answer
            this.work.answer = editorComponent.editor.txt.html();
          } else {
            // 如果获取不到富文本实例，则直接追加
            this.work.answer += privText;
          }
          console.log(privText)
        };

        iframe.contentWindow.onSessionStarted = (s, e) => {
          console.log("onSessionStarted", s, e)
          this.recordObj.status = "1"
          this.recordObj.startTime = new Date().getTime();
        }

        iframe.contentWindow.ConversationTranscriber();

        // this.recordObj.status = "1"
        // this.recordObj.startTime = new Date().getTime();


      };

      // 先通过 getUserMedia 主动请求麦克风权限，避免 ConversationTranscriber
      // 在浏览器权限弹窗期间被中断导致内部状态异常
      if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
        navigator.mediaDevices.getUserMedia({ audio: true })
          .then(stream => {
            // 权限已获取，立即释放 stream，让 ConversationTranscriber 自己接管麦克风
            stream.getTracks().forEach(t => t.stop());
            startTranscriber();
          })
          .catch(() => {
            // 用户拒绝权限
            this._cleanupTranscriber(iframe);
            this.$message.success(this.lang.ssNoPermStop);
          });
      } else {
        // 降级：不支持 getUserMedia 的浏览器直接启动
        startTranscriber();
      }

      // 预留 2 秒后的兜底权限检查（处理用户后续在浏览器设置中撤销权限的情况）
      //setTimeout(() => {
      //  navigator.permissions && navigator.permissions.query({ name: 'microphone' }).then(permissionStatus => {
      //    if (permissionStatus.state !== "granted") {
      //      // 没有开启录音权限，直接确定停止录音
      //      this.recordObj.status = "0";
      //      this.recordObj.loading = false;
      //      iframe.contentWindow.onSessionStopped = null;
      //      this._cleanupTranscriber(iframe);
      //      this.$message.success(this.lang.ssNoPermStop);
      //      return;
      //    }
      //  })
      //}, 2000)
    },
    stopRecord() {
      console.log("测试测试")
      if (new Date().getTime() - this.recordObj.startTime < 2000) {
        return this.$message.info(this.lang.ssRecordShort)
      }
      const iframe = this.$refs["iframeRef"];
      // 判断浏览器是否有开启录音权限
      navigator.permissions && navigator.permissions.query({ name: 'microphone' }).then(permissionStatus => {
        if (permissionStatus.state !== "granted") {
          // 没有开启录音权限，直接确定停止录音
          this.recordObj.status = "0";
          this.recordObj.loading = false;
          this._cleanupTranscriber(iframe);
          this.$message.success(this.lang.ssNoPermStop);
          return;
        }
        console.log("测试测试222")
        // 有权限再判断状态
        try {
          if (this.recordObj.status == '1' && !this.recordObj.loading) {
            console.log("测试测3333")
            this.recordObj.loading = true;
            iframe.contentWindow.window.document
              .getElementById("scenarioStopButton")
              .click();
            iframe.contentWindow.onSessionStopped = (s, e) => {
              try {
                this.recordObj.status = "0"
                this.recordObj.loading = false;
                this.$message.success(this.lang.ssStoppedRec)
                iframe.contentWindow.onSessionStopped = null;
                this._cleanupTranscriber(iframe);
              } catch (error) {
                alert(JSON.stringify(error))
              }
            };
          } else {
            this.recordObj.status = "0";
            this.recordObj.loading = false;
            this._cleanupTranscriber(iframe);
          }
        } catch (error) {
          alert(JSON.stringify(error))
        }
      }).catch((e) => {
        alert(JSON.stringify(e))
        alert(JSON.stringify(e))
        console.log("测试测4444试")
        // 浏览器不支持或异常，默认直接停止
        this.recordObj.status = "0";
        this.recordObj.loading = false;
        this._cleanupTranscriber(this.$refs["iframeRef"]);
        this.$message.success(this.lang.ssMicCheckStop);
      });
    },
    setWork() {
      this.work = JSON.parse(JSON.stringify(this.workData.json));
    }
  },
  mounted() {

  }
};
</script>

<style scoped>
.questionsAndAnswers {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  /* justify-content: center; */
  flex-direction: column;
  box-sizing: border-box;
  padding: 70px 10%;
  overflow: auto;
}

.qaa_title {
  font-size: 2rem;
  height: auto;
  font-weight: bold;
  text-align: center;
  max-width: 100%;
  /* overflow: clip; */
}

.qaa_img {
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;

}

.qaa_img>div {
  width: auto;
  height: 300px;
  margin: 10px;
}

/* .qaa_img>div>img {
  width: auto;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
} */



.qaa_type {
  margin: 20px 0 40px 0;
  font-size: 1rem;
  color: #808080;
}

.qaa_recording {
  width: 100%;
  height: auto;
  box-sizing: border-box;
  border-radius: 12px;
  border: solid 2px rgba(231, 231, 231, 1);
  padding: 15px 25px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}


.qaa_r_left {
  width: calc(100% - 200px);
  height: 100%;
  display: flex;
  align-items: center;
}

.qaa_r_left>svg,
img {
  width: 23px;
  height: 23px;
}


.qaa_r_right {
  display: flex;
  align-items: center;
  justify-content: center;
}

.qaa_r_r_btn {
  width: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.qaa_r_r_btn>img {
  width: 20px;
  height: 20px;
  margin-right: 5px;
}

.qaa_editArea {
  width: 100%;
  min-height: 300px;
  height: calc(100% - 300px);
  box-sizing: border-box;
  border-radius: 12px;
  border: solid 2px rgba(231, 231, 231, 1);
  margin-top: 40px;
}

.voiceprint {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.voiceprint_icon {
  margin-left: 200px;
}
</style>