前一章节了解了屏幕分享的API,感觉跟我们常用的“屏幕共享”好像。
那么可不可以用此进行一个屏幕录制呢?
“纸上得来终觉浅,觉知此事要躬行。”看着挺简单的一个东西,没有落实都算说大话。
首先画上三个按钮:
<button @click="start" :disabled="disabled.start">开始录制</button>
<button @click="stop" :disabled="disabled.stop">结束录制</button>
<button @click="download" :disabled="disabled.download">下载文件</button>
添加上简单的样式:
button {
margin: 0 1em 1em 0;
padding: 0.5em 1.2em 0.6em 1.2em;
border: none;
border-radius: 4px;
background-color: #d84a38;
font-family: 'Roboto', sans-serif;
font-size: 0.8em;
color: white;
cursor: pointer;
}
button:hover {
background-color: #c03434;
}
button[disabled] {
background-color: #c03434;
pointer-events: none;
}
初始化数据:
data() {
return {
// 本地流
stream: null,