├── README.md
├── .gitignore
├── public
├── logo.png
├── plugin.json
├── README.md
└── preload.js
├── index.html
├── src
├── main.js
├── components
│ ├── RecordIcon.vue
│ ├── StopIcon.vue
│ ├── PlayIcon.vue
│ ├── PauseIcon.vue
│ ├── OpenIcon.vue
│ ├── NotificationButton.vue
│ └── Setting.vue
├── store.js
├── assets
│ ├── plugin.js
│ ├── timer.js
│ ├── convert.js
│ └── recorder.js
└── App.vue
├── package.json
├── vite.config.js
└── yarn.lock
/README.md:
--------------------------------------------------------------------------------
1 | # utools-recorder
2 | ### yarn
3 | ### yarn build
4 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .DS_Store
3 | dist
4 | dist-ssr
5 | *.local
--------------------------------------------------------------------------------
/public/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DogeVenci/utools-recorder/HEAD/public/logo.png
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | 录屏
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import { createApp } from "vue";
2 | import App from "./App.vue";
3 | import { createPinia } from "pinia";
4 | // import { message } from "ant-design-vue";
5 | // import "ant-design-vue/lib/message/style";
6 | import "ant-design-vue/lib/notification/style";
7 |
8 | // message.config({
9 | // duration: 10, // 持续时间
10 | // maxCount: 3, // 最大显示数, 超过限制时，最早的消息会被自动关闭
11 | // });
12 |
13 | createApp(App).use(createPinia()).mount("#app");
14 |
--------------------------------------------------------------------------------
/public/plugin.json:
--------------------------------------------------------------------------------
1 | {
2 | "pluginName": "录屏",
3 | "description": "屏幕录制",
4 | "author": "Dovenci",
5 | "main": "index.html",
6 | "logo": "logo.png",
7 | "version": "1.2.0",
8 | "preload":"preload.js",
9 | "features": [
10 | {
11 | "code": "lp",
12 | "explain": "录屏",
13 | "cmds":["录屏"]
14 | },
15 | {
16 | "code": "kslp",
17 | "explain": "开始录屏",
18 | "cmds":["开始录屏"]
19 | },
20 | {
21 | "code":"tzlp",
22 | "explain":"停止录屏",
23 | "cmds":["停止录屏"]
24 | },
25 | {
26 | "code":"ztlp",
27 | "explain":"暂停或恢复录屏",
28 | "cmds":["暂停恢复录屏"]
29 | }
30 | ]
31 | }
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "utools-recorder",
3 | "version": "0.0.0",
4 | "license": "MIT",
5 | "scripts": {
6 | "dev": "vite",
7 | "build": "vite build",
8 | "serve": "vite preview"
9 | },
10 | "dependencies": {
11 | "@ant-design/icons-vue": "^6.1.0",
12 | "ant-design-vue": "^3.2.15",
13 | "pinia": "^2.0.31",
14 | "vue": "^3.2.47"
15 | },
16 | "devDependencies": {
17 | "@originjs/vite-plugin-commonjs": "^1.0.3",
18 | "@vitejs/plugin-vue": "^4.0.0",
19 | "@vue/compiler-sfc": "^3.2.47",
20 | "less": "^4.1.3",
21 | "unplugin-vue-components": "^0.24.0",
22 | "vite": "^4.1.3"
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from "vite";
2 | import vue from "@vitejs/plugin-vue";
3 | import Components from "unplugin-vue-components/vite";
4 | import { AntDesignVueResolver } from "unplugin-vue-components/resolvers";
5 | import { viteCommonjs } from "@originjs/vite-plugin-commonjs";
6 |
7 |
8 | // https://vitejs.dev/config/
9 | export default defineConfig({
10 | plugins: [
11 | vue(),
12 | Components({
13 | resolvers: [AntDesignVueResolver()],
14 | }),
15 | viteCommonjs()
16 | ],
17 | base: "",
18 | css: {
19 | preprocessorOptions: {
20 | less: {
21 | javascriptEnabled: true,
22 | },
23 | },
24 | },
25 | });
26 |
--------------------------------------------------------------------------------
/src/components/RecordIcon.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
20 |
21 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/src/components/StopIcon.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
20 |
21 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/src/components/PlayIcon.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
20 |
21 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/src/components/PauseIcon.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
23 |
24 |
25 |
26 |
27 |
30 |
--------------------------------------------------------------------------------
/src/components/OpenIcon.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
19 |
20 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/public/README.md:
--------------------------------------------------------------------------------
1 | # 录屏工具
2 |
3 | 屏幕录像保存至 webm 文件
4 | 可选择已打开的窗口录像
5 | 可自定义 utools 全局快捷键关键字“开始录屏”“停止录屏”“暂停恢复录像”
6 | 可使用 chrome 或 VLC 等主流播放器播放 webm
7 | 视频编码 h264 可使用另一个"FFmpeg 助手"插件转换格式
8 |
9 | ---
10 |
11 | MacOS Linux 无法内录音频 可使用 soundFlower 或 blackHole 等虚拟声卡软件转录到 mic
12 |
13 | ## changlog
14 | > ### 1.3.0(2023-04-04)
15 | > - 添加转换GIF格式，添加默认保存视频格式设置选项
16 |
17 | > ### 1.2.1(2022-12-26)
18 | > - 修改可设置同时内录系统声音和麦克风声音
19 |
20 | > ### 1.2.0(2022-07-31)
21 | > - 添加FFmpeg wasm 转码MP4
22 |
23 | > ### 1.1.4(2022-03-01)
24 | > - 修改README 开源 https://github.com/DogeVenci/utools-recorder
25 |
26 | > ### 1.1.3(2021-08-26)
27 |
28 | > - 添加暂停和恢复录制功能
29 | > - 录制源选择添加应用图标方便识别
30 | > - UI 调整
31 |
32 | > ### 1.1.2(2021-08-08)
33 |
34 | > - 添加完成录像后跳转到 FFmpeg 助手插件转换格式的功能
35 |
36 | > ### 1.1.1(2021-08-06)
37 |
38 | > - 添加可选择录像保存目录功能
39 | > - Windows 添加录音开关
40 | > - 添加后台录像时错误弹出提示功能
41 |
42 | > ### 1.1.0(2021-07-27)
43 |
44 | > - 添加选择录像窗口功能
45 | > - 前端重构
46 |
47 | > ### 1.0.2(2021-07-25)
48 |
49 | > - 视频编码改为 h264
50 | > - 减小录屏时内存消耗
51 |
52 | > ### 1.0.1(2021-07-23)
53 |
54 | > - 添加开始录屏和停止录屏指令以便绑定全局快捷键
55 | > - 添加延迟开始选项
56 | > - Windows 录屏声音
57 |
--------------------------------------------------------------------------------
/src/components/NotificationButton.vue:
--------------------------------------------------------------------------------
1 |
2 | 打开目录
3 | 转换格式
4 |
5 |
6 |
43 |
--------------------------------------------------------------------------------
/src/store.js:
--------------------------------------------------------------------------------
1 | import { defineStore } from "pinia";
2 |
3 | // useStore could be anything like useUser, useCart
4 | // the first argument is a unique id of the store across your application
5 | export const useStore = defineStore("main", {
6 | state: () => {
7 | return {
8 | recorderState: "inactive",
9 | selectedVideoSource: { key: "screen:0:0" },
10 | videoSources: [],
11 | audioSources: [],
12 | delayStart: 3,
13 | disableOperation: false,
14 | errorText: "",
15 | savedText: "",
16 | savedFilePath: "",
17 | loading: false,
18 | settingVisable: false,
19 | outputDir: "",
20 | recentFilelist: [],
21 | outFileFormat: "webm"
22 | };
23 | },
24 | getters: {
25 | videoOptions: (state) => {
26 | return state.videoSources.map((item) => {
27 | return {
28 | value: item.id,
29 | label: item.name,
30 | key: item.id,
31 | icon: item.appIconURL,
32 | };
33 | });
34 | },
35 | hasSysAudio: state => state.audioSources.findIndex(audio => audio == "system") !== -1,
36 | hasMicAudio: state => state.audioSources.findIndex(audio => audio == "mic") !== -1,
37 | isMuted: state => state.audioSources.length === 0
38 | },
39 | });
40 |
--------------------------------------------------------------------------------
/src/assets/plugin.js:
--------------------------------------------------------------------------------
1 | import { useStore } from "../store.js";
2 |
3 | import {
4 | startRecord,
5 | stopRecord,
6 | getSources,
7 | togglePause,
8 | curStream,
9 | } from "./recorder.js";
10 |
11 | if (typeof utools != "undefined") {
12 | utools.onPluginReady(() => {
13 | const store = useStore();
14 | if (utools.isWindows()) {
15 | store.audioSources = ["system"]
16 | } else {
17 | store.audioSources = []
18 | }
19 | store.delayStart = utools.dbStorage.getItem("delayStart") || 3;
20 |
21 | const audioConfig = utools.dbStorage.getItem("audioSource");
22 | if (audioConfig) {
23 | console.log("read audio config:", audioConfig)
24 | store.audioSources = JSON.parse(audioConfig)
25 | }
26 |
27 | store.outFileFormat = window.getOutFileFormat()
28 |
29 | utools.setSubInput((text) => { },
30 | '可在utools 全局快捷键设置中绑定关键字 "开始录屏" "停止录屏" "暂停恢复录屏"');
31 | });
32 |
33 | utools.onPluginEnter(({ code, type, payload }) => {
34 | console.log("onPluginEnter:", code, type, payload);
35 | if (code === "kslp") {
36 | // utools.setExpendHeight(1);
37 | if (curStream) {
38 | startRecord(curStream); //TODO 窗口关闭后需要刷新
39 | utools.hideMainWindow();
40 | } else {
41 | getSources().then((sources) => {
42 | getStream(sources[0]).then((stream) => {
43 | startRecord(stream);
44 | utools.hideMainWindow();
45 | });
46 | });
47 | }
48 | } else if (code === "tzlp") {
49 | // utools.setExpendHeight(0);
50 | stopRecord();
51 | // utools.outPlugin();
52 | } else if (code === "ztlp") {
53 | togglePause();
54 | }
55 | });
56 |
57 | utools.onPluginOut((processExit) => {
58 | console.log("onPluginOut", processExit);
59 | if (processExit) {
60 | //退出
61 | } else {
62 | //隐藏
63 | }
64 | });
65 | }
66 |
67 | export const openVideoDir = () => {
68 | window.utools && utools.shellOpenPath(mediaFile.getOutputDir());
69 | };
70 |
--------------------------------------------------------------------------------
/src/assets/timer.js:
--------------------------------------------------------------------------------
1 | import { ref } from "vue";
2 | import { useStore } from "../store.js";
3 |
4 | export let recordedTime = ref("00:00:00");
5 |
6 | let recordSecond = 0;
7 | let interval = null;
8 | let countDownInterval = null;
9 |
10 | const formatSecond = (second) => {
11 | const h = Math.floor((second / 3600) % 24) + "";
12 | const m = Math.floor((second / 60) % 60) + "";
13 | const s = Math.floor(second % 60) + "";
14 | return `${h.padStart(2, "0")}:${m.padStart(2, "0")}:${s.padStart(2, "0")}`;
15 | };
16 |
17 | export const startCountTimer = () => {
18 | interval && clearInterval(interval);
19 | recordSecond = 0;
20 | interval = setInterval(() => {
21 | recordSecond++;
22 | recordedTime.value = formatSecond(recordSecond);
23 | }, 1000);
24 | };
25 |
26 | export const pauseCountTimer = () => {
27 | interval && clearInterval(interval);
28 | };
29 |
30 | export const resumeCountTimer = () => {
31 | interval && clearInterval(interval);
32 | interval = setInterval(() => {
33 | recordSecond++;
34 | recordedTime.value = formatSecond(recordSecond);
35 | }, 1000);
36 | };
37 |
38 | export const stopCountTimer = () => {
39 | interval && clearInterval(interval);
40 | recordSecond = 0;
41 | recordedTime.value = "00:00:00";
42 | };
43 |
44 | export const countDownTimer = (seconds, finalFunc, countFunc) => {
45 | const store = useStore();
46 | if (seconds <= 0) {
47 | typeof finalFunc == "function" && finalFunc();
48 | return;
49 | }
50 | store.disableOperation = true;
51 | let count = seconds;
52 | if (countDownInterval) clearInterval(countDownInterval);
53 | countDownInterval = setInterval(() => {
54 | count--;
55 | typeof countFunc == "function" && countFunc(count);
56 | if (count <= 0) {
57 | typeof finalFunc == "function" && finalFunc();
58 | store.disableOperation = false;
59 | clearInterval(countDownInterval);
60 | }
61 | }, 1000);
62 | };
63 |
64 | export const clearCountDownTimer = () => {
65 | const store = useStore();
66 | if (countDownInterval) clearInterval(countDownInterval);
67 | store.disableOperation = false;
68 | };
69 |
--------------------------------------------------------------------------------
/src/assets/convert.js:
--------------------------------------------------------------------------------
1 |
2 | import { useStore } from "../store.js";
3 | import { notification, Button } from "ant-design-vue";
4 | import { h, defineComponent } from 'vue';
5 |
6 | const openNotification = (msg, desp, filepath) => {
7 | notification.open({
8 | message: msg,
9 | key: "saved",
10 | description: desp,
11 | btn: () =>
12 | h(
13 | Button,
14 | {
15 | type: 'primary',
16 | onClick: () => {
17 | window?.utools?.shellShowItemInFolder(filepath);
18 | notification.close(key)
19 | },
20 | },
21 | { default: () => '打开' },
22 | ),
23 | })
24 | }
25 | export const convertVideo = async () => {
26 | const runFFmpeg = window.runFFmpeg;
27 | const convert2Gif = window.convert2Gif;
28 | const store = useStore();
29 | console.log("convertVideo", store.outFileFormat)
30 | if (store.outFileFormat == "webm") {
31 | openNotification("录像保存成功", store.savedFilePath, store.savedFilePath)
32 | return
33 | }
34 | store.loading = true;
35 | setTimeout(() => {
36 | if (store.outFileFormat == 'gif') {
37 | convert2Gif(store.savedFilePath).then(filepath => {
38 | openNotification("格式转换成功", filepath, filepath)
39 | }).catch((err) => {
40 | store.errorText = "转换格式失败,请选择保存目录为非系统目录重试";
41 | }).finally(() => {
42 | store.loading = false;
43 | });;
44 | }
45 | else if (store.outFileFormat == "mp4") {
46 | runFFmpeg(store.savedFilePath)
47 | .then((filepath) => {
48 | // window?.utools?.shellShowItemInFolder(filepath);
49 | openNotification("格式转换成功", filepath, filepath)
50 | })
51 | .catch((err) => {
52 | store.errorText = "转换格式失败,请选择保存目录为非系统目录重试";
53 | })
54 | .finally(() => {
55 | store.loading = false;
56 | });
57 | }
58 | }, 500);
59 | }
60 |
61 |
--------------------------------------------------------------------------------
/public/preload.js:
--------------------------------------------------------------------------------
1 | const path = require("path");
2 | const fs = require("fs");
3 | const { desktopCapturer } = require("electron");
4 | const ffmpeg = require("./ffmpeg-mp4.js");
5 | const maxRecent = 10;
6 | window.desktopCapturer = desktopCapturer; // 兼容utools 2.6.1 之前的版本
7 |
8 | const runFFmpeg = async (filepath) => {
9 | const pathname = path.dirname(filepath);
10 | const filename = path.basename(filepath);
11 | const basename = path.basename(filename, path.extname(filepath));
12 | console.log("runFFmpeg pathname:", pathname);
13 | console.log("runFFmpeg filename:", filename);
14 | let stdout = "";
15 | let stderr = "";
16 | return new Promise((resolve, reject) => {
17 | ffmpeg({
18 | mounts: [
19 | { type: "NODEFS", opts: { root: pathname }, mountpoint: "/data" },
20 | ],
21 | arguments: [
22 | "-hide_banner",
23 | "-loglevel",
24 | "error",
25 | "-i",
26 | `/data/${filename}`,
27 | "-c:v",
28 | "copy",
29 | "-c:a",
30 | "copy",
31 | "-strict",
32 | "-2",
33 | "-y",
34 | `/data/${basename}.mp4`,
35 | ],
36 | print: function (data) {
37 | stdout += data + "\n";
38 | },
39 | printErr: function (data) {
40 | stderr += data + "\n";
41 | },
42 | onExit: function (code) {
43 | console.log("Process exited with code " + code);
44 | console.log(stdout);
45 | console.log(stderr);
46 | if (code === 0) {
47 | resolve(path.join(pathname, `${basename}.mp4`));
48 | } else {
49 | reject(stderr);
50 | }
51 | },
52 | });
53 | })
54 | };
55 | window.runFFmpeg = runFFmpeg;
56 |
57 | const convert2Gif = async (filepath) => {
58 | const pathname = path.dirname(filepath);
59 | const filename = path.basename(filepath);
60 | const basename = path.basename(filename, path.extname(filepath));
61 | console.log("runFFmpeg pathname:", pathname);
62 | console.log("runFFmpeg filename:", filename);
63 | let stdout = "";
64 | let stderr = "";
65 | return new Promise((resolve, reject) => {
66 | ffmpeg({
67 | mounts: [
68 | { type: "NODEFS", opts: { root: pathname }, mountpoint: "/data" },
69 | ],
70 | arguments: [
71 | "-hide_banner",
72 | "-loglevel",
73 | "error",
74 | "-i",
75 | `/data/${filename}`,
76 | "-r",
77 | "1",
78 | "-y",
79 | `/data/${basename}.gif`,
80 | ],
81 | print: function (data) {
82 | stdout += data + "\n";
83 | },
84 | printErr: function (data) {
85 | stderr += data + "\n";
86 | },
87 | onExit: function (code) {
88 | console.log("Process exited with code " + code);
89 | console.log(stdout);
90 | console.log(stderr);
91 | if (code === 0) {
92 | resolve(path.join(pathname, `${basename}.gif`));
93 | } else {
94 | reject(stderr);
95 | }
96 | },
97 | });
98 | })
99 | };
100 | window.convert2Gif = convert2Gif;
101 |
102 | let filePath = null;
103 | let fileName = "";
104 |
105 | Date.prototype.format = function (fmt) {
106 | var o = {
107 | "M+": this.getMonth() + 1, //月份
108 | "d+": this.getDate(), //日
109 | "h+": this.getHours(), //小时
110 | "m+": this.getMinutes(), //分
111 | "s+": this.getSeconds(), //秒
112 | "q+": Math.floor((this.getMonth() + 3) / 3), //季度
113 | S: this.getMilliseconds(), //毫秒
114 | };
115 | if (/(y+)/.test(fmt)) {
116 | fmt = fmt.replace(
117 | RegExp.$1,
118 | (this.getFullYear() + "").substr(4 - RegExp.$1.length)
119 | );
120 | }
121 | for (var k in o) {
122 | if (new RegExp("(" + k + ")").test(fmt)) {
123 | fmt = fmt.replace(
124 | RegExp.$1,
125 | RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length)
126 | );
127 | }
128 | }
129 | return fmt;
130 | };
131 |
132 | const NewMediaFile = () => {
133 | fileName = `${new Date().format("yyyyMMddhhmmss")}.webm`;
134 | filePath = path.resolve(getOutputDir(), fileName);
135 | return filePath;
136 | };
137 |
138 | const WriteMediaFile = (data) => {
139 | if (!filePath) return;
140 | fs.appendFileSync(filePath, data);
141 | };
142 |
143 | const CloseMediaFile = () => {
144 | filePath = null;
145 | };
146 |
147 | const getOutputDir = () => {
148 | const output = utools.dbStorage.getItem("output") || utools.getPath("videos");
149 | return output;
150 | };
151 |
152 | const setOutputDir = (dirPath) => {
153 | utools.dbStorage.setItem("output", dirPath);
154 | };
155 |
156 | const getRecentFilelist = () => {
157 | const list = utools.dbStorage.getItem("recentFileList")
158 | return JSON.parse(list) || []
159 | }
160 |
161 | const getOutFileFormat = () => {
162 | return utools.dbStorage.getItem("outfileFormat") || "webm"
163 | }
164 |
165 | const setOutFileFormat = (format) => {
166 | utools.dbStorage.setItem("outfileFormat", format)
167 | }
168 |
169 | window.getOutFileFormat = getOutFileFormat
170 | window.setOutFileFormat = setOutFileFormat
171 |
172 | const addToRecentFilelist = (item) => {
173 | const list = getRecentFilelist()
174 | if (list.length >= maxRecent) {
175 | list.pop()
176 | }
177 | list.unshift(item)
178 | utools.dbStorage.setItem("recentFileList", JSON.stringify(list))
179 | }
180 |
181 | window.onbeforeunload = () => {
182 | console.log("onbeforeunload");
183 | };
184 |
185 | const getMediaFilePath = () => filePath;
186 | const getMediaFileName = () => fileName;
187 |
188 | window.mediaFile = {
189 | getMediaFilePath,
190 | getMediaFileName,
191 | NewMediaFile,
192 | WriteMediaFile,
193 | CloseMediaFile,
194 | getOutputDir,
195 | setOutputDir,
196 | getRecentFilelist,
197 | addToRecentFilelist,
198 | Buffer,
199 | };
200 |
--------------------------------------------------------------------------------
/src/components/Setting.vue:
--------------------------------------------------------------------------------
1 |
2 |
11 |
12 |
13 |
20 |
21 |
22 |
23 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
42 |
43 |
44 |
45 |
89 |
92 |
93 |
94 |
95 |
96 |
203 |
204 |
209 |
--------------------------------------------------------------------------------
/src/assets/recorder.js:
--------------------------------------------------------------------------------
1 | import { useStore } from "../store.js";
2 | import * as timer from "./timer.js";
3 |
4 | const timeslice = 5000;
5 | let mediaRecorder = null;
6 | let chunks = [];
7 | export let curStream = null;
8 |
9 | const compareVersion = (v1, v2) => {
10 | v1 = v1.split(".").map(Number);
11 | v2 = v2.split(".").map(Number);
12 | const minLen = v1.length > v2.length ? v2.length : v1.length;
13 | for (let i = 0; i < minLen; i++) {
14 | if (v1[i] === v2[i]) continue;
15 | return v1[i] - v2[i];
16 | }
17 | return v1.length - v2.length;
18 | }
19 |
20 |
21 | export const getSources = async () => {
22 | if (!window.utools) return;
23 | let sources = [];
24 | if (compareVersion(utools.getAppVersion(), "2.6.1") >= 0) {
25 | sources = await utools.desktopCaptureSources({
26 | types: ["screen", "window"],
27 | thumbnailSize: { width: 0, height: 0 }, //设置为0节省用于获取每个窗口和屏幕内容时的处理时间
28 | fetchWindowIcons: true, //尽可能获取图标
29 | });
30 | } else {
31 | sources = await desktopCapturer.getSources({
32 | types: ["screen", "window"],
33 | thumbnailSize: { width: 0, height: 0 }, //设置为0节省用于获取每个窗口和屏幕内容时的处理时间
34 | fetchWindowIcons: true, //尽可能获取图标
35 | });
36 | }
37 |
38 | //TODO 异常处理
39 | sources = sources.filter(({ name }) => name != "uTools");
40 | sources.forEach((source) => {
41 | source.appIconURL = source.appIcon?.toDataURL();
42 | });
43 | console.log(sources);
44 | //
45 | return sources;
46 | };
47 |
48 | const getUserMediaMerge = async (source) => {
49 | const store = useStore();
50 | let tracks = []
51 | let audio = false
52 | return new Promise(async (resolve, reject) => {
53 | try {
54 | if (store.hasSysAudio) {
55 | console.log("store.hasSysAudio")
56 | audio = {
57 | //TODO 无法获得音频设备得情况
58 | mandatory: {
59 | chromeMediaSource: "desktop",
60 | },
61 | };
62 | }
63 |
64 | const screenVideoStream = await navigator.mediaDevices.getUserMedia({
65 | audio: audio,
66 | video: {
67 | mandatory: {
68 | chromeMediaSource: "desktop",
69 | chromeMediaSourceId: source.id,
70 | },
71 | },
72 | });
73 |
74 | tracks = [...screenVideoStream.getVideoTracks(), ...screenVideoStream.getAudioTracks()]
75 |
76 | if (store.hasMicAudio) {
77 | const micStream = await navigator.mediaDevices.getUserMedia({
78 | audio: true,
79 | });
80 | tracks = [...tracks, ...micStream.getAudioTracks()]
81 | }
82 |
83 |
84 | curStream = new MediaStream(tracks);
85 | resolve(curStream);
86 | } catch (err) {
87 | store.errorText = "" + err;
88 | reject(err);
89 | }
90 | })
91 | }
92 |
93 | export const getStream = (source) => {
94 | return getUserMediaMerge(source);
95 | };
96 |
97 |
98 | export const startRecord = (stream) => {
99 | if (mediaRecorder) return;
100 | if (!stream) return;
101 | console.log("startRecord");
102 | const store = useStore();
103 | const videoTracks = stream.getVideoTracks();
104 | if (videoTracks?.length > 0 && videoTracks[0].readyState == "ended") {
105 | store.errorText = "startRecord failed: video source is ended";
106 | return;
107 | }
108 | mediaRecorder = new MediaRecorder(stream, {
109 | mimeType: "video/webm; codecs=h264", //TODO 视频格式转换
110 | // videoBitsPerSecond: 2.0e6, //比特率
111 | });
112 |
113 | mediaRecorder.ondataavailable = (event) => {
114 | if (event.data.size > 0) {
115 | chunks.push(event.data);
116 | const blob = new Blob(chunks, { type: "video/webm; codecs=h264" });
117 | blob
118 | .arrayBuffer()
119 | .then((buffer) => {
120 | mediaFile.WriteMediaFile(mediaFile.Buffer.from(buffer));
121 | chunks = [];
122 | })
123 | .catch((err) => {
124 | console.log(err);
125 | store.errorText = err + "";
126 | });
127 | }
128 | };
129 | mediaRecorder.onstart = async () => {
130 | const store = useStore();
131 | mediaFile.NewMediaFile();
132 | store.recorderState = "recording";
133 | timer.startCountTimer();
134 | };
135 | mediaRecorder.onstop = async () => {
136 | const store = useStore();
137 | store.recorderState = "inactive";
138 | timer.stopCountTimer();
139 | if (chunks.length > 0) {
140 | //写入未完成的数据
141 | const blob = new Blob(chunks, { type: "video/webm; codecs=h264" });
142 | const buffer = mediaFile.Buffer.from(await blob.arrayBuffer());
143 | mediaFile.WriteMediaFile(buffer);
144 | }
145 | store.savedText = `${mediaFile.getMediaFileName()} Saved`;
146 | store.savedFilePath = mediaFile.getMediaFilePath();
147 | mediaFile.addToRecentFilelist({ filepath: store.savedFilePath })
148 | mediaRecorder = null;
149 | chunks = [];
150 | utools.shellBeep();
151 | mediaFile.CloseMediaFile();
152 | };
153 | mediaRecorder.onerror = (err) => {
154 | const store = useStore();
155 | store.recorderState = "inactive";
156 | console.log(err);
157 | store.errorText = err + "";
158 | timer.clearCountDownTimer();
159 | };
160 | mediaRecorder.onpause = () => {
161 | const store = useStore();
162 | store.recorderState = "paused";
163 | timer.pauseCountTimer();
164 | };
165 | mediaRecorder.onresume = () => {
166 | const store = useStore();
167 | store.recorderState = "recording";
168 | timer.resumeCountTimer();
169 | };
170 |
171 | try {
172 | mediaRecorder.start(timeslice);
173 | } catch (err) {
174 | store.errorText = "" + err;
175 | }
176 | };
177 |
178 | export const stopRecord = () => {
179 | timer.clearCountDownTimer();
180 | if (!mediaRecorder) return;
181 | if (mediaRecorder.state == "inactive") return;
182 | mediaRecorder.stop();
183 | };
184 |
185 | export const pauseRecord = () => {
186 | if (!mediaRecorder) return;
187 | if (mediaRecorder.state != "recording") return;
188 | mediaRecorder.pause();
189 | };
190 |
191 | export const resumeRecord = () => {
192 | if (!mediaRecorder) return;
193 | if (mediaRecorder.state != "paused") return;
194 | mediaRecorder.resume();
195 | };
196 |
197 | export const togglePause = () => {
198 | const recState = getRecorderState();
199 | if (recState == "paused") {
200 | resumeRecord();
201 | } else if (recState == "recording") {
202 | pauseRecord();
203 | }
204 | };
205 |
206 | export const getRecorderState = () => {
207 | if (mediaRecorder) return mediaRecorder.state;
208 | return "inactive";
209 | };
210 |
--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
44 | 延迟
45 |
56 |
57 |
58 |
62 |
73 |
74 |
80 |
84 | {{ label }}
85 |
86 |
87 |
88 |
89 |
96 |
97 |
98 |
99 |
100 |
101 |
102 |
103 |
104 |
108 |
115 |
116 |
117 |
118 |
119 |
120 |
121 |
128 |
129 |
130 |
131 |
132 |
133 |
134 |
135 |
136 |
137 |
138 |
139 |
140 |
141 |
142 |
143 |
144 |
145 |
151 |
152 |
153 |
154 |
155 |
156 |
157 |
163 |