locked
High memory usage displaying real--time images

    Question

  • Hi,

    We are displaying an image updating every 100 milliseconds and we are experiencing high memory usage.  I couldn't find any suitable sample and I'm sure there is a better way to implement this:

    html:

    <body>
        <h2 id="watch-title"></h2>
        <div id="watch-image"></div>
    </body>

    var elem = document.getElementById('watch-image');
    if (elem) {
        elem.style.background = "url(data:image/png;base64," + e.detail.image + ")";
        elem.style.backgroundRepeat = "no-repeat";
        elem.style.backgroundPosition = "center center";
        elem.style.backgroundSize = "contain";
    }


    Thanks for the help.

    Wednesday, December 10, 2014 11:03 AM

Answers

All replies

  • Forgot to mention that if the displaying is commented out:

    //elem.style.background = "url(data:image/png;base64," + e.detail.image + ")";

    Then the memory usage is stable.  This implies that the image capture and processing bit of the solution is not at fault, it looks to be displaying the image in the Javascript UI.

    Wednesday, December 10, 2014 1:44 PM
  • Why you set the background image so frequently, is it make sense? Please explain more, I think you need rethink this rather than solving it.

    Thursday, December 11, 2014 8:52 AM
  • Why does changing the background image at a high frequency cause the memory usage to rocket?  

    I assume something is being leaked but I performed a memory snapshot comparison via "performance and diagnostics" and that didn't reveal anything.

    Any ideas?

    Thanks

    Thursday, December 11, 2014 9:10 AM
  • Tuesday, December 16, 2014 7:19 AM