feat: 截图线程 + 编码线程。
每个显示器分别使用一个截图线程和一个编码(png+base64)线程。避免程序不明原因崩溃。
This commit is contained in:
20
src/App.tsx
20
src/App.tsx
@ -3,6 +3,7 @@ import { invoke } from "@tauri-apps/api/tauri";
|
||||
import "./App.css";
|
||||
import { DisplayInfo } from './models/display-info.model';
|
||||
import { DisplayInfoPanel } from './components/display-info-panel';
|
||||
import { ScreenView } from './components/screen-view';
|
||||
|
||||
function App() {
|
||||
const [screenshots, setScreenshots] = createSignal<string[]>([]);
|
||||
@ -14,9 +15,9 @@ function App() {
|
||||
});
|
||||
});
|
||||
|
||||
createEffect(() => {
|
||||
take_all_display_screenshot();
|
||||
}, [displays]);
|
||||
// createEffect(() => {
|
||||
// take_all_display_screenshot();
|
||||
// }, [displays]);
|
||||
|
||||
async function take_all_display_screenshot() {
|
||||
console.log('take_all_display_screenshot');
|
||||
@ -37,18 +38,7 @@ function App() {
|
||||
return (
|
||||
<li>
|
||||
<DisplayInfoPanel display={display} />
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ol>
|
||||
<ol>
|
||||
{screenshots().map((screenshot) => {
|
||||
return (
|
||||
<li>
|
||||
<img
|
||||
style="object-fit: contain; height: 400px; width: 600px"
|
||||
src={screenshot}
|
||||
/>
|
||||
<ScreenView displayId={display.id} />
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
|
38
src/components/screen-view.tsx
Normal file
38
src/components/screen-view.tsx
Normal file
@ -0,0 +1,38 @@
|
||||
import { invoke } from '@tauri-apps/api';
|
||||
import { listen } from '@tauri-apps/api/event';
|
||||
import { Component, createEffect, createSignal, onCleanup } from 'solid-js';
|
||||
|
||||
type ScreenViewProps = {
|
||||
displayId: number;
|
||||
};
|
||||
|
||||
async function subscribeScreenshotUpdate(displayId: number) {
|
||||
await invoke('subscribe_encoded_screenshot_updated', {
|
||||
displayId,
|
||||
});
|
||||
}
|
||||
|
||||
export const ScreenView: Component<ScreenViewProps> = (props) => {
|
||||
const [image, setImage] = createSignal<string>();
|
||||
createEffect(() => {
|
||||
const unlisten = listen<{ base64_image: string; display_id: number }>(
|
||||
'encoded-screenshot-updated',
|
||||
(event) => {
|
||||
if (event.payload.display_id === props.displayId) {
|
||||
setImage(event.payload.base64_image);
|
||||
}
|
||||
|
||||
console.log(event.payload.display_id, props.displayId);
|
||||
},
|
||||
);
|
||||
subscribeScreenshotUpdate(props.displayId);
|
||||
|
||||
onCleanup(() => {
|
||||
unlisten.then((unlisten) => {
|
||||
unlisten();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
return <img src={image()} class="object-contain" />;
|
||||
};
|
Reference in New Issue
Block a user