feat: 截图线程 + 编码线程。

每个显示器分别使用一个截图线程和一个编码(png+base64)线程。避免程序不明原因崩溃。
This commit is contained in:
2023-03-18 23:14:59 +08:00
parent 6ea8325b15
commit f92883199c
8 changed files with 478 additions and 28 deletions

View File

@ -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>
);
})}

View 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" />;
};