samples/video/video-generator-behavior-full-demo.htm

<html>
  <head>
    <title></title>
    <style>
    
      body { background:gold; }
		
			video.generator {
				behavior: video-generator-full video;
				size: *;
				foreground-size:contain;
				border:1px solid #000;
			}
		
		</style>
    <script type="text/tiscript">
		
		$(video).onSize = function() {
		  var (w,h) = this.box(#dimension);
			$(form).value = { width:w, height:h };
		}

    event click $(#snapshot) {
      var frame = $(video).style.foregroundImage;
      frame.toBytes().save("d:\\test.png");
    }

    var video = $(video);
    var host;

    event click $(#show-detached) {

      if( this.value ) 
      {
        host = view.window {
          type:View.TOOL_WINDOW,
          url: self.url("sample-element-host-window.htm"),
          width : 640,
          height : 480,
          alignment: 5
        };
        video.detach();
        host.root.$(body).append(video);
      } else {
        video.detach();
        self.$(body).append(video);
        host.close();
      }
    }


		</script>
  </head>
<body>
  <p>This demo simulates full video frame update. See sdk/include/behaviors/behavior_video_generator_full.cpp source.
  On each frame (30 FPS) it updates whole frame.</p>
  <button #snapshot>Save current frame</button>
  <button|checkbox #show-detached>Show video in separate window</button>    
  <form>pixels <output(width)/>x<output(height)/></form>
  <video.generator />
</body>
</html>