英文:
How to embed mjpg streams with <img> tag without browser getting out of memory
问题
I will only translate the code portion you provided:
原因我使用`<img>`标签来显示mjpg流的原因是，我可以使用CSS调整图像的大小。然而，经过一段时间后，浏览器会崩溃，因为内存不足。
我目前使用`URL.revokeObjectURL(mjpgURLwithOutdatedRandomParam)`，并在URL中每隔几秒钟添加一个新的随机参数。但不幸的是，当前版本的Chrome仍然会因为`内存不足`而崩溃。
我还尝试将流加载到画布中，但经过一段时间后，浏览器仍然会出现内存不足的问题：
<!-- 开始代码片段: js 隐藏: false 控制台: true babel: false -->
<!-- 语言: lang-js -->
const canvas = document.getElementById('canvas');
const image = new Image();
image.src = 'http://example.com';
const FRAME_RATE = 30;
image.onload = function() {
canvas.width = image.width;
canvas.height = image.height;
setInterval(function() {
const context = canvas.getContext('2d');
context.drawImage(image, 0, 0, canvas.width, canvas.height);
}, 1000 / FRAME_RATE);
};
<!-- 语言: lang-html -->
<canvas id="canvas"></canvas>
<!-- 结束代码片段 -->
有什么简单/最佳的解决方案吗？
PS：我不明白为什么浏览器可以支持mjpg（在`<img>`标签中），但却无法处理内存...
Please note that the translation includes the code comments.
英文:
The reason I'm using an <img> tag for the mjpg stream is that I'm able to size the image with css. However, after letting it run for a while, the browser crashes becuase it's getting out of memory.
I'm currently using URL.revokeObjectURL(mjpgURLwithOutdatedRandomParam) and add a new random param to the URL every few seconds. But unfortunately, the current Chrome still crashes with Out of Memory.
I also tried loading the stream into a canvas, but after a while the browser still gets out of memory:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const canvas = document.getElementById('canvas');
const image = new Image();
image.src = 'http://example.com';
const FRAME_RATE = 30;
image.onload = function() {
canvas.width = image.width;
canvas.height = image.height;
setInterval(function() {
const context = canvas.getContext('2d');
context.drawImage(image, 0, 0, canvas.width, canvas.height);
}, 1000 / FRAME_RATE);
};
<!-- language: lang-html -->
<canvas id="canvas"></canvas>
<!-- end snippet -->
What simple/optimal solution is there?
PS: I don't understand how a browser can support mjpg (within an <img> tag) but not be prepared to handle the memory...
答案1
得分: 2
这是因为你正在不断地在画布上绘制。你需要正确清除资源。请参考以下示例：
const canvas = document.getElementById('canvas');
const image = new Image();
image.src = 'http://example.com';
const FRAME_RATE = 30;
image.onload = function() {
canvas.width = image.width;
canvas.height = image.height;
setInterval(function() {
const context = canvas.getContext('2d');
// 在每一帧绘制之前清除画布
context.clearRect(0, 0, canvas.width, canvas.height);
// 将图像绘制到画布上
context.drawImage(image, 0, 0, canvas.width, canvas.height);
}, 1000 / FRAME_RATE);
};
英文:
This is because you are continuously drawing on the canvas. You need to clear the resources properly. See Example Below:
const canvas = document.getElementById('canvas');
const image = new Image();
image.src = 'http://example.com';
const FRAME_RATE = 30;
image.onload = function() {
canvas.width = image.width;
canvas.height = image.height;
setInterval(function() {
const context = canvas.getContext('2d');
// Clear the canvas before drawing each frame
context.clearRect(0, 0, canvas.width, canvas.height);
// Draw the image onto the canvas
context.drawImage(image, 0, 0, canvas.width, canvas.height);
}, 1000 / FRAME_RATE);
};
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论