feat(工具箱/MSU2 USB 小屏幕控制): 支持设置屏幕捕获帧率,自动获取画布大小作为屏幕捕获分辨率

This commit is contained in:
2026-03-13 22:29:59 +08:00
parent 7e5100fc5c
commit f31020d31c

View File

@@ -61,10 +61,10 @@
class="form-no-feedback config-form" class="form-no-feedback config-form"
label-align="right" label-align="right"
label-placement="left" label-placement="left"
label-width="6.5em" label-width="8.5em"
> >
<n-form-item label="分辨率:"> <n-form-item label="设备分辨率:">
<n-select <n-select
v-model:value="deviceResolution" v-model:value="deviceResolution"
:options="Object.values(RESOLUTION_LIST).map((item) => { :options="Object.values(RESOLUTION_LIST).map((item) => {
@@ -110,6 +110,17 @@
/> />
</n-form-item> </n-form-item>
<n-form-item label="屏幕捕获帧率:">
<n-input-number
v-model:value="screenCaptureFrameRate"
:disabled="isScreenCaptureReady"
title="单位:帧/秒"
:min="1"
:max="60"
:step="1"
/>
</n-form-item>
</n-form> </n-form>
</n-card> </n-card>
@@ -207,6 +218,9 @@ const renderInterval = ref(100);
/** 发送间隔,毫秒 */ /** 发送间隔,毫秒 */
const sendInterval = ref(100); const sendInterval = ref(100);
/** 屏幕捕获帧率 */
const screenCaptureFrameRate = ref(10);
/** /**
* @desc 串口对象 * @desc 串口对象
* @type {SerialPort} * @type {SerialPort}
@@ -621,6 +635,9 @@ async function startScreenCapture() {
displayStream = await navigator.mediaDevices.getDisplayMedia({ displayStream = await navigator.mediaDevices.getDisplayMedia({
video: { video: {
displaySurface: 'monitor', displaySurface: 'monitor',
frameRate: screenCaptureFrameRate.value,
width: CANVAS_WIDTH,
height: CANVAS_HEIGHT,
}, },
audio: false, audio: false,
}); });