core 1.1.8

packages/core/src/lib/basicSimaqRecorder.ts

@@ -148,11 +148,6 @@ export class BasicSimaqRecorder extends EventEmitter {
                     console.error('当前浏览器不支持录屏或不存在https环境');
                     return;
                 }
-                if (!isSupport()) {
-                    console.error('当前浏览器不支持录屏或不存在https环境');
-                    return;
-                }
-
                 // const media = this.isElectron
                 //     ? await this.getEletronDisplayMedia()
                 //     : await this.getDisplayMedia();
@@ -211,7 +206,12 @@ export class BasicSimaqRecorder extends EventEmitter {
                     this.audioInput = audioInput;
                 }
                 this.debug && console.log('audioInput', audioInput);
-                const stream = this.canvasElement.captureStream(60);
+                console.log('this.canvasElement', this.canvasElement);
+                let defaultFrame = 30;
+                if (typeof this.platformConfig.frameRate == 'number') {
+                    defaultFrame = this.platformConfig.frameRate;
+                }
+                const stream = this.canvasElement.captureStream(defaultFrame);
                 if (stream) {
                     return resolve(stream);
                 }
@@ -355,9 +355,9 @@ export class BasicSimaqRecorder extends EventEmitter {
         });
     }
 
-    public async setMuteMode() {
+    // public async setMuteMode() {
 
-    }
+    // }
 
     private streamStop(): void {
         if (this.stream) {

packages/core/tsconfig.json

@@ -1,3 +1,5 @@
 {
   "extends": "../../tsconfig.json"
 }
+
+

play/README.md

@@ -1,16 +1,2 @@
-# Vue 3 + TypeScript + Vite
-
-This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
-
-## Recommended IDE Setup
-
-- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar)
-
-## Type Support For `.vue` Imports in TS
-
-Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can enable Volar's Take Over mode by following these steps:
-
-1. Run `Extensions: Show Built-in Extensions` from VS Code's command palette, look for `TypeScript and JavaScript Language Features`, then right click and select `Disable (Workspace)`. By default, Take Over mode will enable itself if the default TypeScript extension is disabled.
-2. Reload the VS Code window by running `Developer: Reload Window` from the command palette.
-
-You can learn more about Take Over mode [here](https://github.com/johnsoncodehk/volar/discussions/471).
+__SIMAQ__.stream.getVideoTracks()[0].applyConstraints({frameRate: 90})
+__SIMAQ__.stream.getVideoTracks()[0].getSettings() 

play/package.json

@@ -9,7 +9,7 @@
         "preview": "vite preview"
     },
     "dependencies": {
-        "@simaq/core": "workspace:^1.1.2-beta.0",
+        "@simaq/core": "workspace:^1.1.7",
         "lodash-es": "^4.17.21",
         "vue": "^3.2.40",
         "howler": "^2.2.3"

play/src/App.vue

@@ -16,15 +16,17 @@ const videoRecorder = new VideoRecorder({
     // uploadUrl: '',
     resolution: '4k',
     autoDownload: false,
-    platform: 'web',
+    platform: 'canvas',
     // disabledAudio: false,
     config: {
         frameRate: 60,
+        canvasId: '#testCanvas',
     },
     systemAudio: true,
     debugShowVideo: false,
     debug: true,
 });
+// window.videoRecorder = videoRecorder;
 console.log('videoRecorder', videoRecorder);
 sound.on('end', () => {
     console.log('sound end');
@@ -71,7 +73,7 @@ const handleAutoDownload = async (chunks: Blob[]) => {
     window.URL.revokeObjectURL(url);
 };
 onMounted(() => {
-    const GoldPlay = (window as any).GoldPlay;
+    // const GoldPlay = (window as any).GoldPlay;
 
     // let el = document.querySelector('.play-container');
     // //播放器参数
@@ -89,6 +91,10 @@ onMounted(() => {
     //     'testFrame',
     // ) as HTMLIFrameElement;
     // console.log('testFrame', testFrame);
+    // const canvas = testFrame.contentWindow?.document.getElementsByName(
+    //     'canvas',
+    // ) as unknown as HTMLCanvasElement;
+    // console.log('testFrame-load', canvas);
     // testFrame.onload = () => {
     //     const canvas = testFrame.contentWindow?.document.getElementsByName(
     //         'canvas',
@@ -114,10 +120,17 @@ onMounted(() => {
             <source src="2825345580.mp3" type="audio/mpeg" />
         </audio> -->
     </div>
-    <button type="button" @click="videoRecorder.startRecord">开始录屏</button>
-    <button type="button" @click="videoRecorder.holdRecord">暂停录屏</button>
-    <!-- <button type="button" @click="videoRecorder.holdRecord">resume录屏</button> -->
-    <button type="button" @click="videoRecorder.endRecord">停止录屏</button>
+    <div class="control">
+        <button type="button" @click="videoRecorder.startRecord">
+            开始录屏
+        </button>
+        <button type="button" @click="videoRecorder.holdRecord">
+            暂停录屏
+        </button>
+        <!-- <button type="button" @click="videoRecorder.holdRecord">resume录屏</button> -->
+        <button type="button" @click="videoRecorder.endRecord">停止录屏</button>
+    </div>
+    <canvas id="testCanvas"></canvas>
     <!-- <iframe
         id="testFrame"
         src="https://cszfb.4dkankan.com/spc.html?m=c-bHsbx73"
@@ -126,6 +139,13 @@ onMounted(() => {
 </template>
 
 <style scoped>
+#app {
+    position: relative;
+    z-index: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+}
 .play-container {
     width: 800px;
     height: 600px;
@@ -133,15 +153,20 @@ onMounted(() => {
     margin: 20px 0 0 100px;
     float: left;
 }
-.logo {
-    height: 6em;
-    padding: 1.5em;
-    will-change: filter;
-}
-.logo:hover {
-    filter: drop-shadow(0 0 2em #646cffaa);
+
+.control {
+    position: absolute;
+    z-index: 100;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
 }
-.logo.vue:hover {
-    filter: drop-shadow(0 0 2em #42b883aa);
+iframe {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    z-index: 0;
+    top: 0;
+    left: 0;
 }
 </style>

play/src/style.css

@@ -28,8 +28,9 @@ body {
   margin: 0;
   display: flex;
   place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
 }
 
 h1 {
@@ -60,13 +61,6 @@ button:focus-visible {
   padding: 2em;
 }
 
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
 @media (prefers-color-scheme: light) {
   :root {
     color: #213547;

pnpm-lock.yaml

@@ -1,5 +1,9 @@
 lockfileVersion: '6.0'
 
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
 importers:
 
   .:
@@ -24,7 +28,7 @@ importers:
         version: 8.5.0(eslint@8.20.0)
       eslint-plugin-import:
         specifier: ~2.26.0
-        version: 2.26.0(@typescript-eslint/parser@5.35.1)(eslint-import-resolver-typescript@3.5.1)(eslint@8.20.0)
+        version: 2.26.0(@typescript-eslint/parser@5.40.0)(eslint@8.20.0)
       eslint-plugin-prettier:
         specifier: ^4.2.1
         version: 4.2.1(eslint-config-prettier@8.5.0)(eslint@8.20.0)(prettier@2.7.1)
@@ -57,7 +61,7 @@ importers:
   play:
     dependencies:
       '@simaq/core':
-        specifier: workspace:^1.1.2-beta.0
+        specifier: workspace:^1.1.7
         version: link:../packages/core
       howler:
         specifier: ^2.2.3
@@ -1516,6 +1520,35 @@ packages:
       - supports-color
     dev: true
 
+  /eslint-module-utils@2.7.4(@typescript-eslint/parser@5.40.0)(eslint-import-resolver-node@0.3.6)(eslint@8.20.0):
+    resolution: {integrity: sha512-j4GT+rqzCoRKHwURX7pddtIPGySnX9Si/cgMI5ztrcqOPtk5dDEeZ34CQVPphnqkJytlc97Vuk05Um2mJ3gEQA==}
+    engines: {node: '>=4'}
+    peerDependencies:
+      '@typescript-eslint/parser': '*'
+      eslint: '*'
+      eslint-import-resolver-node: '*'
+      eslint-import-resolver-typescript: '*'
+      eslint-import-resolver-webpack: '*'
+    peerDependenciesMeta:
+      '@typescript-eslint/parser':
+        optional: true
+      eslint:
+        optional: true
+      eslint-import-resolver-node:
+        optional: true
+      eslint-import-resolver-typescript:
+        optional: true
+      eslint-import-resolver-webpack:
+        optional: true
+    dependencies:
+      '@typescript-eslint/parser': 5.40.0(eslint@8.20.0)(typescript@4.7.4)
+      debug: 3.2.7
+      eslint: 8.20.0
+      eslint-import-resolver-node: 0.3.6
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /eslint-plugin-import@2.26.0(@typescript-eslint/parser@5.35.1)(eslint-import-resolver-typescript@3.5.1)(eslint@8.20.0):
     resolution: {integrity: sha512-hYfi3FXaM8WPLf4S1cikh/r4IxnO6zrhZbEGz2b660EJRbuxgpDS5gkCuYgGWg2xxh2rBuIr4Pvhve/7c31koA==}
     engines: {node: '>=4'}
@@ -1547,6 +1580,37 @@ packages:
       - supports-color
     dev: true
 
+  /eslint-plugin-import@2.26.0(@typescript-eslint/parser@5.40.0)(eslint@8.20.0):
+    resolution: {integrity: sha512-hYfi3FXaM8WPLf4S1cikh/r4IxnO6zrhZbEGz2b660EJRbuxgpDS5gkCuYgGWg2xxh2rBuIr4Pvhve/7c31koA==}
+    engines: {node: '>=4'}
+    peerDependencies:
+      '@typescript-eslint/parser': '*'
+      eslint: ^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8
+    peerDependenciesMeta:
+      '@typescript-eslint/parser':
+        optional: true
+    dependencies:
+      '@typescript-eslint/parser': 5.40.0(eslint@8.20.0)(typescript@4.7.4)
+      array-includes: 3.1.5
+      array.prototype.flat: 1.3.0
+      debug: 2.6.9
+      doctrine: 2.1.0
+      eslint: 8.20.0
+      eslint-import-resolver-node: 0.3.6
+      eslint-module-utils: 2.7.4(@typescript-eslint/parser@5.40.0)(eslint-import-resolver-node@0.3.6)(eslint@8.20.0)
+      has: 1.0.3
+      is-core-module: 2.10.0
+      is-glob: 4.0.3
+      minimatch: 3.1.2
+      object.values: 1.1.5
+      resolve: 1.22.1
+      tsconfig-paths: 3.14.1
+    transitivePeerDependencies:
+      - eslint-import-resolver-typescript
+      - eslint-import-resolver-webpack
+      - supports-color
+    dev: true
+
   /eslint-plugin-jsx-a11y@6.6.1(eslint@8.20.0):
     resolution: {integrity: sha512-sXgFVNHiWffBq23uiS/JaP6eVR622DqwB4yTzKvGZGcPq6/yZ3WmOZfuBks/vHWo9GaFOqC2ZK4i6+C35knx7Q==}
     engines: {node: '>=4.0'}