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#/

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