Hi, I’m brand new to p5.js and I’m enjoying it quite a bit but now I’m experiencing a memory leak using a video texture with a WebGL renderer. I’m on a Mac running macOS 10.15.1 and I’ve tried Safari 13.0.3 and Chrome 78.0.3904.108 with p5.js 0.10.2 from the jsdelivr.net cdn. I am using Activity Monitor to watch memory usage. In each browser, memory usage seems to increase for as long as the sketch runs. If I use a P2D renderer and display the video with the image function, memory is stable. I experience the same problem with any mp4 video that I try. I have not tried other video formats yet.
My use case requires WebGL, so P2D is not a solution for me.
What is the correct way to display a video texture while keeping memory stable?
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/p5@0.10.2/lib/p5.min.js"></script>
</head>
<body>
<script type="text/javascript" charset="utf-8">
let vid
const VIDEO_FILE_NAME = 'https://CommonDataStorage.GoogleApis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4'
function preload( ) {
vid = createVideo( [ VIDEO_FILE_NAME ], ( ) => {
vid.size( 480, 360 )
} )
}
function setup( ) {
createCanvas( 800, 600, WEBGL )
}
function draw( ) {
background( 40, 100, 100 )
// image( vid, 10, 10 )
texture( vid )
box( 480, 360, 20 )
}
function mousePressed( ) {
vid.loop( )
vid.hide( )
}
</script>
</body>
</html>