update

src/icons/svg/back.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M24 0H0V24H24V0Z" fill="white" fill-opacity="0.01"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M22 20.4181C19.5535 17.4316 17.3808 15.7369 15.4822 15.3341C13.5835 14.9312 11.7759 14.8704 10.0591 15.1515V20.5L2 11.7726L10.0591 3.5V8.5835C13.2334 8.6086 15.9319 9.7474 18.1548 12C20.3777 14.2526 21.6594 17.0586 22 20.4181Z" stroke="white" stroke-width="1.5" stroke-linejoin="round"/>
+</svg>

src/icons/svg/camera-on.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="M12 18.5C16.4183 18.5 20 14.9183 20 10.5C20 6.08172 16.4183 2.5 12 2.5C7.58172 2.5 4 6.08172 4 10.5C4 14.9183 7.58172 18.5 12 18.5Z" stroke="white" stroke-width="1.5"/>
+<path d="M12 14C13.933 14 15.5 12.433 15.5 10.5C15.5 8.567 13.933 7 12 7C10.067 7 8.5 8.567 8.5 10.5C8.5 12.433 10.067 14 12 14Z" stroke="white" stroke-width="1.5"/>
+<path d="M8 21.5H16" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12 18.5V21.5" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/icons/svg/eraser.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="M24 0H0V24H24V0Z" fill="white" fill-opacity="0.01"/>
+<path d="M22.3909 12.0842L15.959 3.54883L7.06738 10.2491L13.75 18.4991L15.4278 17.3313L22.3909 12.0842Z" stroke="white" stroke-width="1.5" stroke-linejoin="round"/>
+<path d="M13.7499 18.5009L11.8307 20.0383L6.5489 20.0379L5.24865 18.3124L2.03271 14.0447L7.2499 10.1133" stroke="white" stroke-width="1.5" stroke-linejoin="round"/>
+<path d="M6.60278 20.0352L22.2826 20.0352" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
+</svg>

src/icons/svg/mike-off.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#ffffff" d="M512 0C406.4 0 320 86.4 320 192v368c0 8.2 0.5 16.3 1.5 24.2l62.5-62.5V192c0-34 13.4-66.1 37.7-90.4C445.9 77.4 478 64 512 64s66.1 13.4 90.3 37.6C626.6 125.9 640 158 640 192v73.7l64-64V192C704 86.4 617.6 0 512 0zM272.4 633.3l-51.1 51.1c-4.8-11.7-8.8-23.7-12.2-36.1-0.7-2.7-1.1-5.6-1.1-8.4V496.7c0-17.4 13.7-32.2 31.1-32.7 18.1-0.5 32.9 14 32.9 32v129.8c0 2.5 0.1 5 0.4 7.5zM512 752c52.8 0 100.8-21.6 135.6-56.4S704 612.8 704 560V380.3l174.1-174.1c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L391.3 602.5 343 650.8l-44.7 44.7-46.3 46.3-115.1 115.1c-12.5 12.5-12.5 32.8 0 45.3 6.3 6.3 14.4 9.4 22.6 9.4s16.4-3.1 22.6-9.4L293.3 791c48.2 46.8 111.1 77.9 179.7 86.6 4 0.5 7 3.9 7 7.9V944c0 8.8-7.2 16-16 16h-80c-17.7 0-33.7 7.2-45.3 18.7S320 1006.3 320 1024h384c0-35.4-28.7-64-64-64h-80c-8.8 0-16-7.2-16-16v-58.5c0-4 3-7.4 7-7.9 56-7 108.1-29 151.5-62.2 53.4-40.8 93.8-98.8 112.3-166.9 0.7-2.7 1.1-5.6 1.1-8.4V496c0-18-14.8-32.5-32.9-32-17.4 0.5-31.1 15.2-31.1 32.7v129.2c0 6.9-1.1 13.8-3.3 20.3C714.7 746.9 619.4 816 512 816c-66.3 0-128-26.4-173.5-70.2l44.2-44.2C416.8 732.9 462.3 752 512 752z m128-307.7V560c0 34-13.4 66.1-37.7 90.3C578.1 674.6 546 688 512 688c-31.1 0-60.6-11.2-84-31.7l212-212z" /></svg>

src/icons/svg/mike-on.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#ffffff" d="M512 650.497842a176.805755 176.805755 0 0 0 176.805755-176.805756V176.805755a176.805755 176.805755 0 0 0-353.61151 0v296.886331a176.805755 176.805755 0 0 0 176.805755 176.805756zM394.129496 176.805755a117.870504 117.870504 0 0 1 235.741008 0v296.886331a117.870504 117.870504 0 1 1-235.741008 0z"  /><path fill="#ffffff" d="M806.676259 443.708777a29.467626 29.467626 0 0 0-29.467626 29.467626v7.366906c0 142.844317-118.97554 259.094101-265.208633 259.094101s-265.208633-116.249784-265.208633-259.094101v-7.366906a29.467626 29.467626 0 0 0-58.935252 0v7.366906c0 165.018705 128.773525 301.011799 292.834532 316.776979V965.064748H364.661871a29.467626 29.467626 0 0 0 0 58.935252h294.676258a29.467626 29.467626 0 0 0 0-58.935252H539.625899v-167.891798c165.829065-13.776115 296.517986-150.579568 296.517986-316.776979v-7.366906a29.467626 29.467626 0 0 0-29.467626-29.320288z"  /></svg>

src/views/live/common.js

@@ -141,62 +141,29 @@ export function reconnection() {
 /**
  * 关闭本地流声音
  */
-export function pauseAudio() {
-  rtc.pauseAudio({
-    streamName: 'main',
-    success() {
-      console.log('关闭本地流声音成功');
-    },
-    fail(str) {
-      console.log(str);
-    }
-  });
+export function pauseAudio(options) {
+  rtc.pauseAudio(options);
 }
 
 /**
  * 开启本地流声音
  */
-export function playAudio() {
-  rtc.playAudio({
-    streamName: 'main',
-    success(data) {
-      console.log(data);
-      console.log('开启本地流声音成功');
-    },
-    fail(str) {
-      console.log(str);
-    }
-  });
+export function playAudio(options) {
+  rtc.playAudio(options);
 }
 
 /**
  * 关闭本地流视频画面
  */
-export function pauseVideo() {
-  rtc.pauseVideo({
-    streamName: 'main',
-    success() {
-      console.log('关闭本地流视频画面成功');
-    },
-    fail(str) {
-      console.log(str);
-    }
-  });
+export function pauseVideo(options) {
+  rtc.pauseVideo(options);
 }
 
 /**
  * 开启本地流视频画面
  */
-export function playVideo() {
-  rtc.playVideo({
-    streamName: 'main',
-    success() {
-      console.log('开启本地流视频画面成功');
-    },
-    fail(str) {
-      console.log(str);
-    }
-  });
+export function playVideo(options) {
+  rtc.playVideo(options);
 }
 
 /**

src/views/live/student/group.js

@@ -8,7 +8,11 @@ export {
   downloadWebSDK,
   closeVideo,
   handsDown,
-  chatRoll
+  chatRoll,
+  pauseAudio,
+  playAudio,
+  pauseVideo,
+  playVideo
 } from '@/views/live/common';
 
 /**
@@ -60,6 +64,8 @@ export function initListener(vue) {
           success(stream) {
             vue.localStream = true;
             console.log('创建本地流成功', stream);
+            vue.hasVideo = stream.hasVideo;
+            vue.hasAudio = stream.hasAudio;
             // 创建本地流成功，将流展示到id为 student 的dom元素盒子中
             stream.show('group-local');
             publishStream('picture'); // 如果需要立即推流，执行 publish 方法

src/views/live/student/group.vue

@@ -24,8 +24,20 @@
           <!-- 本地流 -->
           <div v-show="localStream" class="group-wrapper">
             <div id="group-local" class="group-box"></div>
-            <div class="live-wrapper-stream">
-              {{ studentSelf.student_name }}
+            <div class="local-stream">
+              <div>
+                {{ studentSelf.student_name }}
+              </div>
+              <div>
+                <svg-icon
+                  :icon-class="hasVideo ? 'camera-on' : 'camera-off'"
+                  @click="playOrPauseVideo"
+                />
+                <svg-icon
+                  :icon-class="hasAudio ? 'mike-on' : 'mike-off'"
+                  @click="playOrPauseAudio"
+                />
+              </div>
             </div>
           </div>
           <div v-show="!localStream" class="group-box student-info">
@@ -37,6 +49,7 @@
             <div :id="`group-${i}`" class="group-box"></div>
             <div class="live-wrapper-stream">
               {{ searchStudentName(item.id()) }}
+              <svg-icon :icon-class="item.hasAudio() ? 'mike-on' : ''" />
             </div>
           </div>
           <!-- 无流列表 -->
@@ -132,6 +145,8 @@ export default {
       live_room_sys_user_id: '',
       room_id: '',
       localStream: false,
+      hasVideo: false,
+      hasAudio: false,
       // 定时器
       timer: null,
       rtc: null,
@@ -293,6 +308,68 @@ export default {
       this.msg = '';
     },
 
+    // 本地流视频开启、关闭
+    playOrPauseVideo() {
+      if (this.$store.state.app.liveDevice.video.length === 0) {
+        return this.$message.warning('无视频设备');
+      }
+
+      if (this.hasVideo) {
+        common.pauseVideo({
+          streamName: 'picture',
+          success: () => {
+            this.$message.success('关闭本地流视频画面成功');
+            this.hasVideo = false;
+          },
+          fail: str => {
+            this.$message.warning(str);
+          }
+        });
+      } else {
+        common.playVideo({
+          streamName: 'picture',
+          success: () => {
+            this.$message.success('开启本地流视频画面成功');
+            this.hasVideo = true;
+          },
+          fail: str => {
+            this.$message.warning(str);
+          }
+        });
+      }
+    },
+
+    // 本地流音频开启、关闭
+    playOrPauseAudio() {
+      if (this.$store.state.app.liveDevice.audio.length === 0) {
+        return this.$message.warning('无音频设备');
+      }
+
+      if (this.hasAudio) {
+        common.pauseAudio({
+          streamName: 'picture',
+          success: () => {
+            this.$message.success('关闭本地流声音成功');
+            this.hasAudio = false;
+          },
+          fail: str => {
+            this.$message.warning(str);
+          }
+        });
+      } else {
+        common.playAudio({
+          streamName: 'picture',
+          success: () => {
+            this.$message.success('开启本地流声音成功');
+            this.hasAudio = true;
+          },
+          fail: str => {
+            this.$message.warning(str);
+          }
+        });
+      }
+    },
+
     // 分组讨论
     GetGroupStatus() {
       this.timer = setInterval(() => {
@@ -456,7 +533,32 @@ $live-bc: #3d3938;
             line-height: 32px;
             text-align: center;
             margin: 0 8px;
+            padding: 0 15px;
             transition: all 300ms ease-in 0s;
+
+            > .svg-icon {
+              margin-left: 12px;
+            }
+          }
+
+          .local-stream {
+            @extend .live-wrapper-stream;
+
+            display: flex;
+
+            > div:first-child {
+              flex: 6;
+            }
+
+            > div:last-child {
+              flex: 4;
+              text-align: right;
+
+              .svg-icon {
+                cursor: pointer;
+                margin-right: 18px;
+              }
+            }
           }
         }
       }

src/views/live/teacher/index.vue

@@ -58,20 +58,34 @@
           </template>
         </div>
         <div v-show="isDraw" id="draw-parent">
+          <!-- 画笔设置 -->
           <div v-show="isDrawSetting" class="draw-setting">
-            <span class="brush-shape">
+            <span class="brush-shape" @click="drawChange('type', 2)">
               <svg-icon icon-class="brush-shape" />
             </span>
+            <!-- 画笔颜色 -->
             <span
               v-for="item in drawColorList"
               :key="item"
-              :class="['draw-color', item === '#FF4747' ? 'current' : '']"
+              :class="['draw-color', item === curColor ? 'current' : '']"
               :style="{ 'background-color': item }"
-            ></span>
-            <span v-for="item in drawThicknessList" :key="item" class="draw-thickness">
+              @click="drawChange('color', item)"
+            />
+            <span
+              v-for="item in drawThicknessList"
+              :key="item"
+              class="draw-thickness"
+              @click="drawChange('thickNess', item)"
+            >
               <span :style="{ width: item * 2 + 'px', height: item * 2 + 'px' }"></span>
             </span>
-            <span class="brush-clear">
+            <span class="eraser" @click="drawChange('type', 9)">
+              <svg-icon icon-class="back" />
+            </span>
+            <span class="eraser" @click="drawChange('type', 10)">
+              <svg-icon icon-class="eraser" />
+            </span>
+            <span class="brush-clear" @click="drawChange('type', 0)">
               <svg-icon icon-class="clear" />
             </span>
           </div>
@@ -135,7 +149,12 @@
             <div>
               {{ roomInfo.teacher_name }}
             </div>
-            <div>
+            <div class="live-wrapper-right">
+              <svg-icon
+                :icon-class="hasVideo ? 'camera-on' : 'camera-off'"
+                @click="playOrPauseVideo"
+              />
+              <svg-icon :icon-class="hasAudio ? 'mike-on' : 'mike-off'" @click="playOrPauseAudio" />
               <span :style="{ color: netStatusColor }">{{ netStatus }}</span>
             </div>
           </div>
@@ -278,6 +297,7 @@ export default {
       msg: '',
       chatList: [],
       isDrawSetting: false,
+      curColor: '#343434',
       drawColorList: ['#FF4747', '#343434', '#628EFF', '#FFCA0E'],
       drawThicknessList: ['1', '3', '5'],
       // 直播间学员列表
@@ -296,7 +316,10 @@ export default {
       device: {
         video: [],
         audio: []
-      }
+      },
+      // 本地视频流画面、声音
+      hasVideo: false,
+      hasAudio: false
     };
   },
   computed: {
@@ -569,6 +592,68 @@ export default {
       });
     },
 
+    // 本地流视频开启、关闭
+    playOrPauseVideo() {
+      if (this.device.video.length === 0) {
+        return this.$message.warning('无视频设备');
+      }
+
+      if (this.hasVideo) {
+        common.pauseVideo({
+          streamName: 'main',
+          success: () => {
+            this.$message.success('关闭本地流视频画面成功');
+            this.hasVideo = false;
+          },
+          fail: str => {
+            this.$message.warning(str);
+          }
+        });
+      } else {
+        common.playVideo({
+          streamName: 'main',
+          success: () => {
+            this.$message.success('开启本地流视频画面成功');
+            this.hasVideo = true;
+          },
+          fail: str => {
+            this.$message.warning(str);
+          }
+        });
+      }
+    },
+
+    // 本地流音频开启、关闭
+    playOrPauseAudio() {
+      if (this.device.audio.length === 0) {
+        return this.$message.warning('无音频设备');
+      }
+
+      if (this.hasAudio) {
+        common.pauseAudio({
+          streamName: 'main',
+          success: () => {
+            this.$message.success('关闭本地流声音成功');
+            this.hasAudio = false;
+          },
+          fail: str => {
+            this.$message.warning(str);
+          }
+        });
+      } else {
+        common.playAudio({
+          streamName: 'main',
+          success: () => {
+            this.$message.success('开启本地流声音成功');
+            this.hasAudio = true;
+          },
+          fail: str => {
+            this.$message.warning(str);
+          }
+        });
+      }
+    },
+
     // 发消息
     sendMsg() {
       common.sendMsg(this.msg);
@@ -590,6 +675,7 @@ export default {
     // 画笔变更
     drawChange(action, value) {
       common.drawChange(action, value);
+      this.isDrawSetting = false;
     },
 
     // 设置音视频设备
@@ -609,14 +695,14 @@ export default {
         common.closeVideoTeacher({
           streamName: 'main',
           success: () => {
-            common.createLocalStream();
+            common.createLocalStream(this);
           },
           fail: str => {
             console.log(str);
           }
         });
       } else {
-        common.createLocalStream();
+        common.createLocalStream(this);
       }
     },
 
@@ -841,7 +927,6 @@ $live-bc: #3d3938;
           padding: 6px;
           border-radius: 40px;
           height: 40px;
-          width: 275px;
           line-height: 28px;
 
           & > span {
@@ -902,6 +987,12 @@ $live-bc: #3d3938;
             cursor: pointer;
             margin-right: 0;
           }
+
+          & > .eraser {
+            @extend .brush-clear;
+
+            margin-right: 12px;
+          }
         }
       }
 
@@ -1019,9 +1110,14 @@ $live-bc: #3d3938;
             flex: 6;
           }
 
-          > div:last-child {
+          &-right {
             flex: 4;
             text-align: right;
+
+            .svg-icon {
+              cursor: pointer;
+              margin-right: 18px;
+            }
           }
         }
       }

src/views/live/teacher/live.js

@@ -16,7 +16,11 @@ export {
   chatRoll,
   updateMcResult,
   reconnection,
-  getNetPoint
+  getNetPoint,
+  pauseAudio,
+  playAudio,
+  pauseVideo,
+  playVideo
 } from '@/views/live/common';
 
 /**
@@ -41,12 +45,14 @@ function publishStream(streamName) {
 /**
  * 创建本地流
  */
-export function createLocalStream() {
+export function createLocalStream(vue) {
   rtc.createLocalStream({
     streamName: 'main',
     createData: createData(),
     success(stream) {
       console.log('创建本地流成功', stream);
+      vue.hasAudio = stream.hasAudio();
+      vue.hasVideo = stream.hasVideo();
       // 创建本地流成功，将流展示到id为 live 的 dom 元素盒子中
       stream.show('live');
       publishStream('main'); // 如果需要立即推流，执行 publish 方法
@@ -125,7 +131,7 @@ export function initListener(vue) {
         if (!isVideo || !isAudio) {
           vue.setDevice(false);
         } else {
-          createLocalStream();
+          createLocalStream(vue);
         }
       },
       fail(str) {