screen-recorder-vue 0.0.5 → 0.0.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/README.md +109 -49
  2. package/README_zh_CN.md +93 -31
  3. package/package.json +12 -3
  4. package/src/App.vue +6 -1
  5. package/src/components/ScreenRecorder.vue +1 -3
  6. package/src/env.d.ts +1 -0
  7. package/tsconfig.json +0 -1
  8. package/vite.config.ts +1 -18
package/README.md CHANGED
@@ -12,12 +12,26 @@ npm install screen-recorder-vue --save
12
12
 
13
13
  ## Usage
14
14
 
15
+ - 1 . Simple use
16
+
15
17
  ```vue
16
18
  <script setup lang="ts">
17
- import { ref } from "vue";
18
19
  import ScreenRecorderVue from "screen-recorder-vue";
19
20
 
20
- const recording = ref(false);
21
+ // Your other logic code...
22
+ </script>
23
+
24
+ <template>
25
+ <!-- your other components... -->
26
+ <ScreenRecorderVue />
27
+ </template>
28
+ ```
29
+
30
+ - 2 . Enable preview and customize some information
31
+
32
+ ```vue
33
+ <script setup lang="ts">
34
+ import ScreenRecorderVue from "screen-recorder-vue";
21
35
 
22
36
  const videoOptions: MediaTrackConstraints = {
23
37
  width: 1920,
@@ -25,86 +39,132 @@ const videoOptions: MediaTrackConstraints = {
25
39
  frameRate: 60,
26
40
  };
27
41
 
28
- const start = (startEvent: Function) => {
29
- startEvent();
30
- recording.value = true;
31
- };
42
+ // Your other logic code...
32
43
 
33
- const recordingEnd = (url: string) => {
34
- recording.value = false;
35
- console.log(url);
36
- // to do sth for url
37
- };
38
44
  </script>
39
45
 
40
46
  <template>
41
- <h1>1. Simple use</h1>
47
+ <!-- your other components... -->
42
48
  <ScreenRecorderVue
43
49
  preview
44
- @recording-end="recordingEnd"
45
- start-btn-text="🛫 开始"
50
+ start-btn-text="🛫 start"
46
51
  start-btn-style="color: #48bfa7"
47
- end-btn-text="🛑 结束"
52
+ end-btn-text="🛑 end"
48
53
  end-btn-style="color: red;"
54
+ :video-options="videoOptions"
49
55
  />
56
+ </template>
57
+ ```
50
58
 
51
- <hr style="margin: 50px 0" />
59
+ - 3 . Listening event callback
60
+
61
+ ```vue
62
+ <script setup lang="ts">
63
+ import ScreenRecorderVue from "screen-recorder-vue";
64
+
65
+ const onStart = (mediaStream: MediaStream) => {
66
+ /** Your logic code **/
67
+ }
68
+
69
+ const onError = (err: unknown) => {
70
+ /** Your logic code **/
71
+ }
72
+
73
+ const onUnsupport = () => {
74
+ /** Your logic code **/
75
+ }
52
76
 
53
- <h1>2. Custom slots use</h1>
77
+ const onEnd = (blobUrl: string, blob: Blob) => {
78
+ /** Your logic code **/
79
+ }
80
+
81
+ // Your other logic code...
82
+
83
+ </script>
84
+
85
+ <template>
86
+ <!-- your other components... -->
54
87
  <ScreenRecorderVue
55
88
  preview
56
- short-key="Alt+Shift+R"
57
- :video-options="videoOptions"
58
- @recording-end="recordingEnd"
59
- >
89
+ @recording-start="onStart"
90
+ @recording-end="onEnd"
91
+ @recording-unsupport="onUnsupport"
92
+ @recording-error="onError"
93
+ />
94
+ </template>
95
+ ```
96
+
97
+ - 4 . Custom view
98
+
99
+ ```vue
100
+ <script setup lang="ts">
101
+ import { ref } from "vue";
102
+ import ScreenRecorderVue from "screen-recorder-vue";
103
+
104
+ const recording = ref(false);
105
+
106
+ const start = (startEvent: Function) => {
107
+ startEvent();
108
+ recording.value = true;
109
+ };
110
+
111
+ const recordingEnd = (url: string) => {
112
+ recording.value = false;
113
+ console.log(url);
114
+ // to do sth for url
115
+ };
116
+ // Your other logic code...
117
+
118
+ </script>
119
+
120
+ <template>
121
+ <!-- your other components... -->
122
+ <ScreenRecorderVue preview @recording-end="recordingEnd">
60
123
  <template v-slot:start="{ startEvent }">
61
- <button v-if="!recording" @click="start(startEvent)">开始录屏</button>
124
+ <!-- your custom components... -->
125
+ <button v-if="!recording" @click="start(startEvent)">start</button>
62
126
  </template>
63
127
 
64
128
  <template v-slot:end="{ endEvent }">
65
- <button v-if="recording" @click="endEvent">结束录屏</button>
129
+ <!-- your custom components... -->
130
+ <button v-if="recording" @click="endEvent">end</button>
66
131
  </template>
67
132
 
68
133
  <template v-slot:preview="{ mediaStream }">
134
+ <!-- your custom components... -->
69
135
  <div>
70
136
  <video muted autoplay width="500" :srcObject="mediaStream"></video>
71
137
  </div>
72
138
  </template>
73
139
  </ScreenRecorderVue>
74
140
  </template>
75
- <style scoped>
76
- button {
77
- cursor: pointer;
78
- margin: 16px;
79
- }
80
- </style>
81
141
  ```
82
142
 
83
143
  ## props
84
144
 
85
- | propsName | required | type | default | desc |
86
- | - | - | - | - | - |
87
- | `short-key` | false | string | - | shortcut key for starting, if you set shortcut, `ESC` will be set as the shortcut key to end recording |
88
- | `preview` | false | boolean | false | show preview |
89
- | `video-options` | false | MediaTrackConstraints | - | video options |
90
- | `start-btn-text` | false | string | `开始录屏` | the text for start-button |
91
- | `start-btn-style` | false | string | - | the style for start-button |
92
- | `end-btn-text` | false | string | `结束录屏` | the text for end-button |
93
- | `end-btn-style` | false | string | - | the style for end-button |
145
+ | propsName | required | type | default | desc |
146
+ | ----------------- | -------- | --------------------- | ---------- | ------------------------------------------------------------------------------------------------------ |
147
+ | `short-key` | false | string | - | shortcut key for starting, if you set shortcut, `ESC` will be set as the shortcut key to end recording |
148
+ | `preview` | false | boolean | false | show preview |
149
+ | `video-options` | false | MediaTrackConstraints | - | video options |
150
+ | `start-btn-text` | false | string | `开始录屏` | the text for start-button |
151
+ | `start-btn-style` | false | string | - | the style for start-button |
152
+ | `end-btn-text` | false | string | `结束录屏` | the text for end-button |
153
+ | `end-btn-style` | false | string | - | the style for end-button |
94
154
 
95
155
  ## events
96
156
 
97
- | eventsName | paramList | desc |
98
- | - | - | - |
99
- | `recording-start` | [ `mediaStream`: MediaStream ] | recorder start |
100
- | `recording-end` | [ `blobUrl`: string, `blob`: Blob ] | recorder end |
101
- | `recording-unsupport` | [] | recorder API unsupported |
102
- | `recording-error` | [ `err`: unknown ] | recorder error |
157
+ | eventsName | paramList | desc |
158
+ | --------------------- | ----------------------------------- | ------------------------ |
159
+ | `recording-start` | [ `mediaStream`: MediaStream ] | recorder start |
160
+ | `recording-end` | [ `blobUrl`: string, `blob`: Blob ] | recorder end |
161
+ | `recording-unsupport` | [] | recorder API unsupported |
162
+ | `recording-error` | [ `err`: unknown ] | recorder error |
103
163
 
104
164
  ## slots
105
165
 
106
- | slotsName | paramList | desc |
107
- | - | - | - |
108
- | `start` | { startEvent } | trigger the event of starting screen recording |
109
- | `end` | { endEvent } | trigger the event of ending screen recording |
110
- | `preview` | { mediaStream } | customize video preview |
166
+ | slotsName | paramList and type | desc |
167
+ | --------- | -------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
168
+ | `start` | { startEvent: Function, endEvent: Function } | Customize the view that triggers the start screen recording event；<br/>`startEvent `: start screen recording,<br/> ` endEvent `: end screen recording |
169
+ | `end` | { endEvent: Function, startEvent: Function } | Customize the view that triggers the end screen recording event;<br/> ` endEvent `: end screen recording, <br/>`startEvent `: start screen recording |
170
+ | `preview` | { mediaStream: MediaStream } | Customize video preview,<br/>`mediaStream`: it is the captured screen media stream, which can be assigned to the scrobject of video to preview and play |
package/README_zh_CN.md CHANGED
@@ -12,12 +12,26 @@ npm install screen-recorder-vue --save
12
12
 
13
13
  ## 使用
14
14
 
15
+ - 1 . 简单使用
16
+
15
17
  ```vue
16
18
  <script setup lang="ts">
17
- import { ref } from "vue";
18
19
  import ScreenRecorderVue from "screen-recorder-vue";
19
20
 
20
- const recording = ref(false);
21
+ // 你的其他逻辑代码...
22
+ </script>
23
+
24
+ <template>
25
+ <!-- 你的其他组件... -->
26
+ <ScreenRecorderVue />
27
+ </template>
28
+ ```
29
+
30
+ - 2 . 启用预览并且自定义一些属性信息
31
+
32
+ ```vue
33
+ <script setup lang="ts">
34
+ import ScreenRecorderVue from "screen-recorder-vue";
21
35
 
22
36
  const videoOptions: MediaTrackConstraints = {
23
37
  width: 1920,
@@ -25,61 +39,109 @@ const videoOptions: MediaTrackConstraints = {
25
39
  frameRate: 60,
26
40
  };
27
41
 
28
- const start = (startEvent: Function) => {
29
- startEvent();
30
- recording.value = true;
31
- };
42
+ // 你的其它逻辑代码...
32
43
 
33
- const recordingEnd = (url: string) => {
34
- recording.value = false;
35
- console.log(url);
36
- // to do sth for url
37
- };
38
44
  </script>
39
45
 
40
46
  <template>
41
- <h1>1. Simple use</h1>
47
+ <!-- 你的其他组件... -->
42
48
  <ScreenRecorderVue
43
49
  preview
44
- @recording-end="recordingEnd"
45
50
  start-btn-text="🛫 开始"
46
51
  start-btn-style="color: #48bfa7"
47
52
  end-btn-text="🛑 结束"
48
53
  end-btn-style="color: red;"
54
+ :video-options="videoOptions"
49
55
  />
56
+ </template>
57
+ ```
58
+
59
+ - 3 . 监听事件回调
60
+
61
+ ```vue
62
+ <script setup lang="ts">
63
+ import ScreenRecorderVue from "screen-recorder-vue";
50
64
 
51
- <hr style="margin: 50px 0" />
65
+ const onStart = (mediaStream: MediaStream) => {
66
+ /** 你的逻辑代码 **/
67
+ }
52
68
 
53
- <h1>2. Custom slots use</h1>
69
+ const onError = (err: unknown) => {
70
+ /** 你的逻辑代码 **/
71
+ }
72
+
73
+ const onUnsupport = () => {
74
+ /** 你的逻辑代码 **/
75
+ }
76
+
77
+ const onEnd = (blobUrl: string, blob: Blob) => {
78
+ /** 你的逻辑代码 **/
79
+ }
80
+
81
+ // 你的其他逻辑代码...
82
+
83
+ </script>
84
+
85
+ <template>
86
+ <!-- 你的其他组件... -->
54
87
  <ScreenRecorderVue
55
88
  preview
56
- short-key="Alt+Shift+R"
57
- :video-options="videoOptions"
58
- @recording-end="recordingEnd"
59
- >
89
+ @recording-start="onStart"
90
+ @recording-end="onEnd"
91
+ @recording-unsupport="onUnsupport"
92
+ @recording-error="onError"
93
+ />
94
+ </template>
95
+ ```
96
+
97
+ - 4 . 自定义视图插槽
98
+
99
+ ```vue
100
+ <script setup lang="ts">
101
+ import { ref } from "vue";
102
+ import ScreenRecorderVue from "screen-recorder-vue";
103
+
104
+ const recording = ref(false);
105
+
106
+ const start = (startEvent: Function) => {
107
+ startEvent();
108
+ recording.value = true;
109
+ };
110
+
111
+ const recordingEnd = (url: string) => {
112
+ recording.value = false;
113
+ console.log(url);
114
+ // to do sth for url
115
+ };
116
+
117
+ // 你的其他逻辑代码...
118
+
119
+ </script>
120
+
121
+ <template>
122
+ <!-- 你的其他逻辑组件... -->
123
+ <ScreenRecorderVue preview @recording-end="recordingEnd">
60
124
  <template v-slot:start="{ startEvent }">
61
- <button v-if="!recording" @click="start(startEvent)">开始录屏</button>
125
+ <!-- 你的自定义视图... -->
126
+ <button v-if="!recording" @click="start(startEvent)">start</button>
62
127
  </template>
63
128
 
64
129
  <template v-slot:end="{ endEvent }">
65
- <button v-if="recording" @click="endEvent">结束录屏</button>
130
+ <!-- 你的自定义视图... -->
131
+ <button v-if="recording" @click="endEvent">end</button>
66
132
  </template>
67
133
 
68
134
  <template v-slot:preview="{ mediaStream }">
135
+ <!-- 你的自定义视图... -->
69
136
  <div>
70
137
  <video muted autoplay width="500" :srcObject="mediaStream"></video>
71
138
  </div>
72
139
  </template>
73
140
  </ScreenRecorderVue>
74
141
  </template>
75
- <style scoped>
76
- button {
77
- cursor: pointer;
78
- margin: 16px;
79
- }
80
- </style>
81
142
  ```
82
143
 
144
+
83
145
  ## props
84
146
 
85
147
  | props 名称 | 是否必须 | 类型 | 默认值 | 描述 |
@@ -103,8 +165,8 @@ button {
103
165
 
104
166
  ## slots
105
167
 
106
- | 插槽名称 | 参数列表 | 描述 |
168
+ | 插槽名称 | 参数列表及类型签名 | 描述 |
107
169
  | - | - | - |
108
- | `start` | { startEvent } | 触发开始录屏的事件 |
109
- | `end` | { endEvent } | 触发结束录屏的事件 |
110
- | `preview` | { mediaStream } | 自定义 video 预览视图 |
170
+ | `start` | { startEvent: Function, endEvent: Function } | 自定义触发开始录屏事件的视图; <br/>`startEvent`：开始录屏，<br/>`endEvent`：结束录屏 |
171
+ | `end` | { endEvent: Function, startEvent: Function } | 自定义触发结束录屏事件的视图; <br/>`endEvent`：结束录屏，<br/>`startEvent`：开始录屏 |
172
+ | `preview` | { mediaStream：MediaStream } | 自定义 video 预览视图; <br/>`mediaStream`: 捕获的屏幕媒体流，可赋值给 video 的 scrObject 实现播放预览 |
package/package.json CHANGED
@@ -1,18 +1,27 @@
1
1
  {
2
2
  "name": "screen-recorder-vue",
3
- "version": "0.0.5",
3
+ "version": "0.0.8",
4
4
  "main": "src/index.ts",
5
5
  "module": "src/index.ts",
6
6
  "types": "src/index.ts",
7
+ "exports": {
8
+ ".": {
9
+ "import": "./src/index.ts",
10
+ "require": "./src/index.ts",
11
+ "types": "./src/index.ts"
12
+ }
13
+ },
7
14
  "scripts": {
15
+ "predev": "lerna run build --scope screen-recorder-base",
16
+ "prebuild": "lerna run build --scope screen-recorder-base",
8
17
  "dev": "vite",
9
- "build": "vue-tsc --noEmit && vite build",
18
+ "build": "vite build",
10
19
  "serve": "vite preview"
11
20
  },
12
21
  "dependencies": {
13
22
  "@vueuse/core": "^6.8.0",
14
23
  "@w-xuefeng/bindkey": "^1.0.1",
15
- "screen-recorder-base": "^0.0.4",
24
+ "screen-recorder-base": "^0.0.7",
16
25
  "vue": "^3.2.16"
17
26
  },
18
27
  "devDependencies": {
package/src/App.vue CHANGED
@@ -16,6 +16,11 @@ const start = (startEvent: Function) => {
16
16
  };
17
17
 
18
18
  const recordingEnd = (url: string) => {
19
+ console.log(url);
20
+ // to do sth for url
21
+ };
22
+
23
+ const customRecordingEnd = (url: string) => {
19
24
  recording.value = false;
20
25
  console.log(url);
21
26
  // to do sth for url
@@ -40,7 +45,7 @@ const recordingEnd = (url: string) => {
40
45
  preview
41
46
  short-key="Alt+Shift+R"
42
47
  :video-options="videoOptions"
43
- @recording-end="recordingEnd"
48
+ @recording-end="customRecordingEnd"
44
49
  >
45
50
  <template v-slot:start="{ startEvent }">
46
51
  <button v-if="!recording" @click="start(startEvent)">开始录屏</button>
package/src/components/ScreenRecorder.vue CHANGED
@@ -99,7 +99,6 @@ const defaultBtnStyle = `
99
99
  display: inline-flex;
100
100
  align-items: center;
101
101
  justify-content: center;
102
- cursor: pointer;
103
102
  user-select: none;
104
103
  border: 0 solid transparent;
105
104
  border-radius: 2px;
@@ -118,7 +117,7 @@ const defaultBtnStyle = `
118
117
  @click="start"
119
118
  :style="`${defaultBtnStyle}${startBtnStyle}`"
120
119
  >{{ startBtnText || "开始录屏" }}</button>
121
- <slot name="start" v-else-if="!state.recording" :startEvent="start"></slot>
120
+ <slot name="start" v-else-if="!state.recording" :startEvent="start" :endEvent="end"></slot>
122
121
 
123
122
  <button
124
123
  v-if="notSlotEnd && state.recording"
@@ -130,7 +129,6 @@ const defaultBtnStyle = `
130
129
  <video
131
130
  v-if="preview && notSlotPreview"
132
131
  v-show="state.recording"
133
- class="previewRef"
134
132
  ref="previewRef"
135
133
  muted
136
134
  autoplay
package/src/env.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  /// <reference types="vite/client" />
2
+ /// <reference types="screen-recorder-base/env" />
2
3
 
3
4
  declare module '*.vue' {
4
5
  import { DefineComponent } from 'vue'
package/tsconfig.json CHANGED
@@ -19,6 +19,5 @@
19
19
  "src/**/*.d.ts",
20
20
  "src/**/*.tsx",
21
21
  "src/**/*.vue",
22
- "../../node_modules/screen-recorder-base/src/env.d.ts"
23
22
  ]
24
23
  }
package/vite.config.ts CHANGED
@@ -1,25 +1,8 @@
1
1
  import { defineConfig } from 'vite'
2
2
  import vue from '@vitejs/plugin-vue'
3
- import path from 'path'
4
3
 
5
4
  // https://vitejs.dev/config/
6
5
  export default defineConfig({
7
6
  plugins: [vue()],
8
- build: {
9
- target: 'modules',
10
- outDir: 'lib',
11
- lib: {
12
- entry: path.resolve(__dirname, 'src/index.ts'),
13
- name: 'screen-recorder-vue',
14
- fileName: (format) => `screen-recorder-vue.${format}.js`
15
- },
16
- rollupOptions: {
17
- external: ['vue'],
18
- output: {
19
- globals: {
20
- vue: 'Vue'
21
- }
22
- }
23
- }
24
- }
7
+ base: './'
25
8
  })