Vue 实现网页录屏

更新vue录制组件

注意,navigator.mediaDevices.getDisplayMedia({ video: true, audio: true }),
此处加上 audio:true之后,点击停止共享整个页面的停止都失效了,只能刷新页面解决,之前的录屏也不会被保存!!!
在这里插入图片描述

demo:https://mingchen3398.gitee.io/tools/screen-vue

<template>
  <div class="container">
    <section class="item">
      <span class="type-name">文件名称:</span>
      <input type="text" v-model.trim="fileName"/>
      <span>.mp4</span>
    </section>
    <section class="item">
      <span class="type-name">录制时长</span>
      <span>{{timeLong}}s</span>
    </section>
    <section>
      <button class="media-btn" @click="clicks()" title="点击开始录制">{{txt}}</button>
    </section>
  </div>
</template>
<script>
export default {
data() {
return {
timeout: 0,
recordedBlobs: [],
fileName: “”,
txt: “开始录制”,
status: false,
stream: null,
options: {
audioBitsPerSecond: 128000,
videoBitsPerSecond: 4500000,
mimeType: “video/webm”,
},
startTime: 0,
timeLong: 0,
timeLongs: null,
endTime: 0,
};
},
watch: {
status(a) {
if (a) {
this.txt = “停止录制”;
} else {
this.txt = “开始录制”;
}
},
},
methods: {
clicks() {
if (this.status) {
this.stopReset();
this.status = false;
clearInterval(this.timesLongs);
} else {
this.startScreen();
}
},
cauTime() {
this.timeLongs = setInterval(() => {
this.timeLong = (new Date().getTime() - this.startTime) / 1000;
}, 200);
},
stopReset() {
this.stream.getTracks().forEach((track) => track.stop());
this.recordedBlobs = [];
},
startScreen() {
//注意,加上 audio: true 之后底部可以拖动的停止就失效了,正在fixing
navigator.mediaDevices.getDisplayMedia({ video: true, audio: true }).then(
(stream) => {
this.status = !this.status;
console.log(“开始录制”);
this.startTime = new Date().getTime();
this.cauTime();
      <span class="token keyword">this</span><span class="token punctuation">.</span>stream <span class="token operator">=</span> stream<span class="token punctuation">;</span>
      <span class="token keyword">const</span> mediaRecorder <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">MediaRecorder</span><span class="token punctuation">(</span>stream<span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>options<span class="token punctuation">)</span><span class="token punctuation">;</span>
      mediaRecorder<span class="token punctuation">.</span><span class="token function-variable function">ondataavailable</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>event<span class="token punctuation">.</span>data<span class="token punctuation">.</span>size <span class="token operator">&gt;</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
          <span class="token keyword">this</span><span class="token punctuation">.</span>status <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
          <span class="token function">clearInterval</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>timeLongs<span class="token punctuation">)</span><span class="token punctuation">;</span>
          console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>
            <span class="token string">"结束录制,录制时长:"</span> <span class="token operator">+</span>
              <span class="token keyword">this</span><span class="token punctuation">.</span>timeLong<span class="token operator">+</span>
              <span class="token string">"s"</span>
          <span class="token punctuation">)</span><span class="token punctuation">;</span>
          <span class="token keyword">this</span><span class="token punctuation">.</span>recordedBlobs<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>event<span class="token punctuation">.</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span>
          <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">download</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
          <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">stopReset</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span><span class="token punctuation">;</span>
      mediaRecorder<span class="token punctuation">.</span><span class="token function">start</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">(</span><span class="token parameter">error</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span>
  <span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token function">download</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> blob <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Blob</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>recordedBlobs<span class="token punctuation">,</span> <span class="token punctuation">{</span> type<span class="token operator">:</span> <span class="token string">"video/mp4"</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">const</span> url <span class="token operator">=</span> <span class="token constant">URL</span><span class="token punctuation">.</span><span class="token function">createObjectURL</span><span class="token punctuation">(</span>blob<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">const</span> a <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">"a"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>a<span class="token punctuation">)</span><span class="token punctuation">;</span>
  a<span class="token punctuation">.</span>style<span class="token punctuation">.</span>display <span class="token operator">=</span> <span class="token string">"none"</span><span class="token punctuation">;</span>
  a<span class="token punctuation">.</span>href <span class="token operator">=</span> url<span class="token punctuation">;</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>fileName<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    a<span class="token punctuation">.</span>download <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>fileName <span class="token operator">+</span> <span class="token string">".mp4"</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
    a<span class="token punctuation">.</span>download <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">".mp4"</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  a<span class="token punctuation">.</span><span class="token function">click</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  window<span class="token punctuation">.</span><span class="token constant">URL</span><span class="token punctuation">.</span><span class="token function">revokeObjectURL</span><span class="token punctuation">(</span>url<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>

},
};
</script>
<style scoped>
.container {
width: 450px;
height: 250px;
border: 1px solid;
}
.item {
display: flex;
align-items: center;
margin: 25px 0;
font-size: 20px;
}
.item .unit {
margin-left: 10px;
}
.item input {
height: 30px;
padding: 1px;
padding-left: 5px;
}
.item input[type=“text”] {
width: 180px;
}
.item input[type=“number”] {
width: 80px;
}
.type-name {
width: 30%;
}
.media-btn {
background: rgb(146, 224, 214);
border: none;
padding: 8px;
border-radius: 5px;
cursor: pointer;
font-weight: 800;
outline: none;
}
.media-btn:hover {
background: rgb(155, 235, 224);
}
.tip {
background-color: rgb(248, 243, 172);
display: inline-block;
padding: 19px;
font-size: 25px;
font-weight: 900;
border-radius: 3px;
margin-top: 19px;
}
</style>

使用:
parent.vue

<Screen/>
...
import Screen‘@/components/screen.vue’;
components: {
Screen
}

demo:https://mingchen3398.gitee.io/tools/screen-vue/index.html#/

CSS3边框阴影 box-shadow

BILIBILI AV号与BV号互转

每日闲谈专用

每日闲谈专用

Vue 实现网页录屏

CSS3边框 阴影 box-shadow

BILIBILI AV号与BV号互转

每日闲谈专用

每日闲谈专用

CSS3边框阴影 box-shadow