|
|
@@ -66,6 +66,8 @@
|
|
|
<div class="returnBtn" @click="nextOrpreSteps(0)">上一步</div>
|
|
|
<div class="returnBtn" @click="nextOrpreSteps(1)">下一步</div>
|
|
|
<div class="returnBtn" @click="allScrell">全屏</div>
|
|
|
+ <div class="returnBtn" @click="startRecording" v-if="(!videoStart && tType == 1 || tType == 4)">开始录制</div>
|
|
|
+ <div class="returnBtn" @click="stopRecording" v-else-if="(tType == 1 || tType == 4)">停止录制</div>
|
|
|
<div class="returnBtn" @click="juriVisible = true" v-if="tType == 1">
|
|
|
权限
|
|
|
</div>
|
|
|
@@ -3181,7 +3183,7 @@
|
|
|
<div class="upload_send" @click="addCourseWorksTeacher(taskCount)" v-if="!proVisible">提交</div>
|
|
|
</el-dialog>
|
|
|
<ImgDraw :drawShow="drawShow" @closeDraw="closeDraw" @addImgDraw="addImgDraw" :bg="bg"></ImgDraw>
|
|
|
- <el-dialog title="表格" :visible.sync="dialogVisibleTable" :append-to-body="true" width="800px"
|
|
|
+ <el-dialog title="表格" :visible.sync="dialogVisibleTable" :append-to-body="true" width="95%"
|
|
|
:before-close="handleClose" class="dialog_diy">
|
|
|
<el-form>
|
|
|
<div>表格内容</div>
|
|
|
@@ -3222,6 +3224,7 @@ import * as imageConversion from "image-conversion";
|
|
|
import Audio from "./components/audio.vue";
|
|
|
import ImgDraw from "./tools/imgDraw/imgDraw";
|
|
|
import { Empty } from "element-ui";
|
|
|
+import RecordRTC from 'recordrtc';
|
|
|
|
|
|
export default {
|
|
|
components: {
|
|
|
@@ -3468,6 +3471,8 @@ export default {
|
|
|
pzType: 1,
|
|
|
wScore: 0,
|
|
|
scoreDetail: "",
|
|
|
+ videoStart: false,
|
|
|
+ recorder: null,
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
@@ -6888,7 +6893,110 @@ export default {
|
|
|
});
|
|
|
})
|
|
|
.catch(() => { });
|
|
|
- }
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 开始录制
|
|
|
+ */
|
|
|
+ startRecording(callback){
|
|
|
+ this.captureScreen((screenStream)=>{
|
|
|
+ this.addStreamStopListener(screenStream,()=>{
|
|
|
+ console.log("流停止监听");
|
|
|
+ this.$emit("streamStop",{})
|
|
|
+ // this.stopRecording();
|
|
|
+ });
|
|
|
+ var options = {
|
|
|
+ type: 'video',
|
|
|
+ mimeType: 'video/webm',
|
|
|
+ disableLogs: false,
|
|
|
+ getNativeBlob: false, // enable it for longer recordings
|
|
|
+ ignoreMutedMedia:false
|
|
|
+ };
|
|
|
+ // this.video.srcObject = screenStream;
|
|
|
+ this.recorder = RecordRTC(screenStream, options);
|
|
|
+ this.recorder.startRecording();
|
|
|
+ this.recorder.screen = screenStream;
|
|
|
+ this.videoStart = true;
|
|
|
+ // callback(true);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 停止录制
|
|
|
+ */
|
|
|
+ stopRecording(callback){
|
|
|
+ this.recorder.stopRecording(()=>{
|
|
|
+ // this.video.src = this.video.srcObject = null;
|
|
|
+ // this.video.src = URL.createObjectURL(this.recorder.getBlob());
|
|
|
+ const url = URL.createObjectURL(this.recorder.getBlob());
|
|
|
+ const a = document.createElement("a");//this.fileName+
|
|
|
+ let videoFile = new File([this.recorder.getBlob()], this.courseDetail.title+"录屏.mp4", {
|
|
|
+ type: 'video/mp4'
|
|
|
+ })
|
|
|
+ let downloadUrl = URL.createObjectURL(videoFile);
|
|
|
+ document.body.appendChild(a);
|
|
|
+ a.style.display = "none";
|
|
|
+ a.href = url;
|
|
|
+ a.download = this.courseDetail.title+"录屏.mp4";//this.fileName +
|
|
|
+ a.click();
|
|
|
+ this.recorder.screen.stop();
|
|
|
+ this.recorder.destroy();
|
|
|
+ this.recorder = null;
|
|
|
+ this.videoStart = false;
|
|
|
+ // callback(false);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //初始化
|
|
|
+ captureScreen(callback) {
|
|
|
+ if (navigator.getDisplayMedia) {
|
|
|
+ //录制结束,文件下载
|
|
|
+ navigator.getDisplayMedia({
|
|
|
+ video: true
|
|
|
+ }).then(screenStream => {
|
|
|
+ navigator.mediaDevices.getUserMedia({audio:true}).then((mic)=>{
|
|
|
+ screenStream.addTrack(mic.getTracks()[0]);
|
|
|
+ callback(screenStream);
|
|
|
+ });
|
|
|
+ }).catch(function(error) {
|
|
|
+ console.log('error',error);
|
|
|
+ });
|
|
|
+ } else if (navigator.mediaDevices.getDisplayMedia) {
|
|
|
+ navigator.mediaDevices.getDisplayMedia({
|
|
|
+ video: true
|
|
|
+ }).then(screenStream => {
|
|
|
+ navigator.mediaDevices.getUserMedia({audio:true}).then((mic)=>{
|
|
|
+ screenStream.addTrack(mic.getTracks()[0]);
|
|
|
+ callback(screenStream);
|
|
|
+ });
|
|
|
+ }).catch(function(error) {
|
|
|
+ console.log('error',error);
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ var error = 'getDisplayMedia API are not supported in this browser.';
|
|
|
+ console.log('error',error);
|
|
|
+ alert(error);
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ //流监听
|
|
|
+ addStreamStopListener(stream, callback) {
|
|
|
+ stream.addEventListener('ended', function () {
|
|
|
+ callback();
|
|
|
+ callback = function () { };
|
|
|
+ }, false);
|
|
|
+ stream.addEventListener('inactive', function () {
|
|
|
+ callback();
|
|
|
+ callback = function () { };
|
|
|
+ }, false);
|
|
|
+ stream.getTracks().forEach(function (track) {
|
|
|
+ track.addEventListener('ended', function () {
|
|
|
+ callback();
|
|
|
+ callback = function () { };
|
|
|
+ }, false);
|
|
|
+ track.addEventListener('inactive', function () {
|
|
|
+ callback();
|
|
|
+ callback = function () { };
|
|
|
+ }, false);
|
|
|
+ });
|
|
|
+ },
|
|
|
},
|
|
|
directives: {
|
|
|
// 使用局部注册指令的方式
|
|
|
@@ -7584,7 +7692,7 @@ export default {
|
|
|
display: flex;
|
|
|
flex-direction: row;
|
|
|
align-items: center;
|
|
|
- width: calc(100% - 420px);
|
|
|
+ width: calc(100% - 520px);
|
|
|
}
|
|
|
|
|
|
.courseIndex>div:nth-child(1) {
|
|
|
@@ -7601,7 +7709,8 @@ export default {
|
|
|
|
|
|
.courseIndex>div:nth-child(2) {
|
|
|
font-size: 23px;
|
|
|
- width: 300px;
|
|
|
+ /* width: 300px; */
|
|
|
+ max-width: calc(100% - 180px);
|
|
|
white-space: nowrap;
|
|
|
overflow: hidden;
|
|
|
text-overflow: ellipsis;
|
