Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>You can get much more frequent redraws by using <a href="http://paulirish.com/2011/requestanimationframe-for-smart-animating/" rel="noreferrer">requestAnimationFrame</a> to determine when to update your canvas, rather than relying on <code>timeupdate</code>, which only updates every 200-250ms. It's definitely not enough for frame-accurate animation. <code>requestAnimationFrame</code> will update at most every 16ms (approx 60fps), but the browser will throttle it as necessary and sync with video buffer draw calls. It's pretty much exactly what you want for this sort of thing.</p> <p>Even with higher frame rates, processing video frames with a 2D canvas is going to be pretty slow. For one thing, you're processing every pixel sequentially in the CPU, running Javascript. The other problem is that you're copying around a lot of memory. There's no way to directly access pixels in a video element. Instead, you have to copy the whole frame into a canvas first. Then, you have to call <code>getImageData</code>, which not only copies the whole frame a second time, but it also has to allocate the whole block of memory again, since it creates a new <code>ImageData</code> every time. Would be nice if you could copy into an existing buffer, but you can't.</p> <p>It turns out you can do extremely fast image processing with WebGL. I've written a library called <a href="https://github.com/brianchirls/Seriously.js" rel="noreferrer">Seriously.js</a> for exactly this purpose. Check out the <a href="https://github.com/brianchirls/Seriously.js/wiki" rel="noreferrer">wiki</a> for a FAQ and tutorial. There's a Hue/Saturation plugin you can use - just drop the saturation to -1 to get your video to grayscale.</p> <p>The code will look something like this:</p> <pre><code>var composition = new Seriously(); var effect = composition.effect('hue-saturation'); var target = composition.target('#mycanvas'); effect.source = '#myvideo'; effect.saturation = -1; target.source = effect; composition.go(); </code></pre> <p>The big down side of using WebGL is that not every browser or computer will support it - Internet Explorer is out, as is any machine with old or weird video drivers. Most mobile browsers don't support it. You can get good stats on it <a href="http://webglstats.com/" rel="noreferrer">here</a> and <a href="http://caniuse.com/#search=webgl" rel="noreferrer">here</a>. But you can get very high frame rates on pretty large videos, even with much more <a href="http://seriouslyjs.org" rel="noreferrer">complex effects</a>.</p> <p>(There is also a small issue with a browser bug that, oddly enough, shows up in both <a href="http://code.google.com/p/chromium/issues/detail?id=96160" rel="noreferrer">Chrome</a> and <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=686955" rel="noreferrer">Firefox</a>. Your canvas will often be one frame behind the video, which is only an issue if the video is paused, and is most egregious if you're skipping around. The only workaround seems to be to keep forcing updates, even if your video is paused, which is less efficient. Please feel free to vote those tickets up so they get some attention.)</p>
    singulars
    1. This table or related slice is empty.
    1. POHow do I process video frames in HTML5 quickly?
      singulars
      1. PTQuestion
    1. PTAnswer
    1. This table or related slice is empty.
    1. USbrianchirls
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POHow do I process video frames in HTML5 quickly?
      singulars
      1. PTQuestion
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTAcceptedByOriginator
    1. COWow, thank you very much. I am looking through seriously.js and really appreciate your work!
      singulars
      1. PO
      1. USNick Ruta
    2. COYou're very welcome. Pleased to help. I'd appreciate if you'd accept the answer if you have everything you need. Thx.
      singulars
      1. PO
      1. USbrianchirls
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload