update

src/icons/svg/full-screen.svg

@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.5 3H21V7.5" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M21 16.5V21H16.5" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.5 21H3V16.5" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M3 7.5V3H7.5" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/views/live/common.js

@@ -216,6 +216,14 @@ export function getNetPoint() {
 }
 
 /**
+ * 获取历史记录
+ * 用于获取当前直播中房间的文档翻页，画笔，聊天的历史记录
+ */
+export function getHistory(options) {
+  rtc.getHistory(options);
+}
+
+/**
  * 房间配置项更新
  * @param {Object} option 房间配置项 (具体看2.0 https://doc.bokecc.com/class/developer/web/chat.html)，以键值对的形式传
  */

src/views/live/student/index.vue

@@ -31,7 +31,11 @@
           </div>
         </div>
         <div v-show="connect" class="student-parent">
-          <div v-show="roomInfo.video_mode === 1 || remoteStreamType === 1" id="student"></div>
+          <div
+            v-show="roomInfo.video_mode === 1 || remoteStreamType === 1"
+            id="student"
+            ref="student"
+          ></div>
 
           <template v-if="remoteStreamType !== 1">
             <template v-if="roomInfo.video_mode === 1">
@@ -55,10 +59,14 @@
             </template>
           </template>
         </div>
-        <div v-show="isDraw" id="draw-parent"></div>
+        <div v-show="isDraw" id="draw-parent" ref="draw"></div>
         <div class="button-group">
           <div class="button-group-left"></div>
-          <div class="button-group-right"></div>
+          <div class="button-group-right">
+            <span v-show="isDraw || remoteStreamType === 1" class="icon-button" @click="fullScreen">
+              <svg-icon icon-class="full-screen" />
+            </span>
+          </div>
         </div>
         <div class="live-container-left-chat">
           <div class="chat-top">
@@ -442,6 +450,28 @@ export default {
       }, 5000);
     },
 
+    // 全屏
+    fullScreen() {
+      if (this.isDraw) {
+        this.toFull(this.$refs.draw.querySelector('#draw'));
+      }
+      if (this.connect && this.remoteStreamType === 1) {
+        this.toFull(this.$refs.student.querySelector('video'));
+      }
+    },
+
+    // 全屏方法兼容
+    toFull(dom) {
+      if (dom.requestFullscreen) {
+        return dom.requestFullscreen();
+      } else if (dom.webkitRequestFullScreen) {
+        return dom.webkitRequestFullScreen();
+      } else if (dom.mozRequestFullScreen) {
+        return dom.mozRequestFullScreen();
+      }
+      return dom.msRequestFullscreen();
+    },
+
     // 弹出框方法
     dialogMaterialClose() {
       this.dialogVisibleMaterial = false;
@@ -705,8 +735,9 @@ $live-bc: #3d3938;
           font-size: 20px;
         }
 
-        &-left {
-          > span {
+        &-left,
+        &-right {
+          > .icon-button {
             display: inline-block;
             height: 100%;
             padding: 14px 16px;

src/views/live/student/live.js

@@ -134,11 +134,11 @@ export function initListener(vue) {
         success(stream) {
           // 订阅流成功
           let streamType = stream.streamType();
-          vue.remoteStreamType = streamType;
           console.log('订阅流成功', streamType);
           let id = streamType === 0 ? 'live' : 'student';
           stream.show(id, 'contain'); // 将流显示到指定 id 的盒子中
           if (streamType === 1 || streamType === 10) {
+            vue.remoteStreamType = streamType;
             vue.connect = true;
             vue.callLoading = false;
           }

src/views/live/teacher/index.vue

@@ -78,16 +78,16 @@
         </div>
         <div class="button-group">
           <div class="button-group-left">
-            <span @click="publishShareStream">
+            <span class="icon-button" @click="publishShareStream">
               <svg-icon icon-class="share" />
             </span>
-            <span @click="showDrawSetting">
+            <span class="icon-button" @click="showDrawSetting">
               <svg-icon icon-class="draw" />
             </span>
-            <span @click="startGroup">
+            <span class="icon-button" @click="startGroup">
               <svg-icon icon-class="group" />
             </span>
-            <span @click="dialogVisible = true">
+            <span class="icon-button" @click="dialogVisible = true">
               <svg-icon icon-class="push" />
             </span>
           </div>
@@ -922,7 +922,7 @@ $live-bc: #3d3938;
             color: #fff;
           }
 
-          > span {
+          > .icon-button {
             display: inline-block;
             height: 100%;
             padding: 14px 16px;