mirror of
https://github.com/rustdesk/rustdesk.git
synced 2024-12-24 12:24:07 +08:00
123 lines
3.5 KiB
HTML
123 lines
3.5 KiB
HTML
|
<html window-icon="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAB1UlEQVR4nJWTP2hTcRDHP3epS4TqqHHtVNNCFzNFaZD8sxQkKQrOUnCLBoIoOIkG0nYQBbO4OiRLadpEIQ6dxEGxcdclg6Ngpt/vPZd78vqwBQ+O3933vtz97o4TEvKodDkP3ADyQNbgCXAIDJ6Ovh3G+RIZD0vZDNAENoF0MrHJDHgNdJ6NJlMABWiVljIBshUgjQBJB8iHANkMEAKkZu/QYo0A2WqVljJ/E3i06dHbHv3u0QceXWuPjroexaP99uhIPFqz2NS4TQBplFfywPCUb0fS2xl+3miUV+4CXWunnLqycOleiKyGSC1EboUIJ+hibiEzDZFiiCyGyJkQ+Tnn0LxV6Ccq/gBemv0YmAeKQB2oGT+vDs06FIcuvxp+ErNx6HmHVhxadui8YRcc2nNo3/ysOklhKgAx/5yT1KqTVCGGvegOP244SS1HmHp0YtO+ZhuJ9ItHczbxCHtinK/mT+RO5epzoAX8sj6TkgPenxBrq0MHDp3F+kyqOvTNP/CZQwcCUK8UtoFGbLpnewfjWbxUvVJIA79jnJ3ewfj+HIAX7QAXY6vcu1m9vguMzS94WI+t+y3QgdgxrVeL/3VMu/vvpscSRLJWLZ16znv7o2Pn/AeeJco8j/W3vQAAAABJRU5ErkJggg==">
|
||
|
|
<head>
|
||
|
|
<title>Video behavior demo</title>
|
||
|
|
<style>
|
||
|
|
body { background: gold; padding: 5dip; margin: 0; }
|
||
|
|
|
||
|
|
form { margin: 5dip; }
|
||
|
|
|
||
|
|
p { padding: 4dip; }
|
||
|
|
|
||
|
|
video.generator {
|
||
|
|
behavior: video-generator video;
|
||
|
|
border: 1px solid orange;
|
||
|
|
size: *;
|
||
|
|
foreground-size: contain;
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|
||
|
|
<script type="text/tiscript">
|
||
|
|
|
||
|
|
$(video).onSize = function() {
|
||
|
|
var (w,h) = this.box(#dimension);
|
||
|
|
$(form).value = { width: w, height: h };
|
||
|
|
}
|
||
|
|
|
||
|
|
function self.ready() {
|
||
|
|
var (w,h) = this.box(#dimension);
|
||
|
|
$(form).value = { width: w, height: h };
|
||
|
|
}
|
||
|
|
|
||
|
|
event click $(#snapshot) {
|
||
|
|
var curframe = $(video).style.foregroundImage;
|
||
|
|
var fname = view.selectFile(#save, "Images|*.png;*.jpg|All files|*.*", "png");
|
||
|
|
if (fname) {
|
||
|
|
var image = curframe.toBytes();
|
||
|
|
image.save(fname);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
var video = $(video);
|
||
|
|
var host;
|
||
|
|
var body = $(body);
|
||
|
|
|
||
|
|
event click $(#show-detached) {
|
||
|
|
|
||
|
|
if (body && !video.parent) {
|
||
|
|
// recreate element
|
||
|
|
video = body.$append(<video class="generator" />);
|
||
|
|
}
|
||
|
|
|
||
|
|
// It creates a new window and moves the current video element to it.
|
||
|
|
if( this.value )
|
||
|
|
{
|
||
|
|
host = view.window {
|
||
|
|
type: View.TOOL_WINDOW,
|
||
|
|
html: $(#templates).text,
|
||
|
|
width: 640,
|
||
|
|
height: 480,
|
||
|
|
alignment: 5,
|
||
|
|
};
|
||
|
|
video.detach();
|
||
|
|
host.root.$(body).append(video);
|
||
|
|
|
||
|
|
host.on("closing", function(evt) {
|
||
|
|
// detach
|
||
|
|
video.detach();
|
||
|
|
body.append(video);
|
||
|
|
$(#show-detached).value = false;
|
||
|
|
});
|
||
|
|
|
||
|
|
} else {
|
||
|
|
|
||
|
|
// and back
|
||
|
|
video.detach();
|
||
|
|
body.append(video);
|
||
|
|
host.close();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<script id="templates" type="text/html+template">
|
||
|
|
|
||
|
|
<html window-resizable>
|
||
|
|
<head>
|
||
|
|
<title>Hosted element</title>
|
||
|
|
<style>
|
||
|
|
body { margin: 0; padding: 0; }
|
||
|
|
|
||
|
|
video.generator {
|
||
|
|
display: block;
|
||
|
|
behavior: video-generator video;
|
||
|
|
size: *;
|
||
|
|
foreground-size: contain;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
</body>
|
||
|
|
</html>
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<p>This demo simulates partial video frame update.
|
||
|
|
On each frame (24 FPS) it updates another portion of the frame.</p>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<button id="snapshot">Save the current frame</button>
|
||
|
|
<button type=checkbox id="show-detached">Show video in a separate window</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<form>frame size: <output name=width /> x <output name=height /></form>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<video class="generator" />
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|