why does canvas.captureStream() is maxing out my CPU when I have a video and image on the canvas?
The context
I have a canvas with a the user's video piped in along with an image. The canvas is running in a loop to repaint the video and image at 30 fps. This set up take around 25% of the CPU, which I'm okay with. My recording function is called within a Redux Thunk, which get a dispatch when the recording starts and when the recording finishes.
My configuration is Windows 10, with 8GB of ram, and running in the latest version of Chrome. Everything runs client side.
The code
The below code is what I'm using to record the canvas.
export const startRecordingStream =(audioStream) => {
return (dispatch) => {
const canvas = window.document.getElementById('canvas');
let recordStream;
if ('captureStream' in canvas) {
recordStream = canvas.captureStream(25);
} else if ('mozCaptureStream' in canvas) {
recordStream = canvas.mozCaptureStream();
} else if (!options.disableLogs) {
console.error('Upgrade to latest Chrome or otherwise enable this flag: chrome://flags/#enable-experimental-web-platform-features');
}
recordStream.addTrack(audioStream.getAudioTracks()[0]);
let recorder = null;
const options = {mimeType: 'video/webm;codecs=h264'};
try {
recorder = new MediaRecorder(recordStream, options);
} catch (e){
console.error('Exception while creating MediaRecorder', + e)
}
recorder.start();
recorder.chunks = ;
recorder.ondataavailable = (event) => {
event.data.size && event.currentTarget.chunks.push(event.data)
}
recorder.onpause = event => {
console.log('paused', event)
}
recorder.onresume = event => {
console.log('resume', event)
}
recorder.onstop = function(event) {
dispatch({
type: "STOP_RECORDING",
payload: event
});
}
dispatch({
type: "START_RECORDING",
payload: recorder
});
}
}
The problem
The moment I run this function the CPU starts to max out.
The question
Is is normal for my CPU to max out given that the canvas is 1080p wide, and has a video and image continously looping throught it?
javascript canvas html5-canvas redux-thunk html5-capture
asked Nov 12 at 1:21
Jason Allshorn
9261720
add a comment |
The context
I have a canvas with a the user's video piped in along with an image. The canvas is running in a loop to repaint the video and image at 30 fps. This set up take around 25% of the CPU, which I'm okay with. My recording function is called within a Redux Thunk, which get a dispatch when the recording starts and when the recording finishes.
My configuration is Windows 10, with 8GB of ram, and running in the latest version of Chrome. Everything runs client side.
The code
The below code is what I'm using to record the canvas.
export const startRecordingStream =(audioStream) => {
return (dispatch) => {
const canvas = window.document.getElementById('canvas');
let recordStream;
if ('captureStream' in canvas) {
recordStream = canvas.captureStream(25);
} else if ('mozCaptureStream' in canvas) {
recordStream = canvas.mozCaptureStream();
} else if (!options.disableLogs) {
console.error('Upgrade to latest Chrome or otherwise enable this flag: chrome://flags/#enable-experimental-web-platform-features');
}
recordStream.addTrack(audioStream.getAudioTracks()[0]);
let recorder = null;
const options = {mimeType: 'video/webm;codecs=h264'};
try {
recorder = new MediaRecorder(recordStream, options);
} catch (e){
console.error('Exception while creating MediaRecorder', + e)
}
recorder.start();
recorder.chunks = ;
recorder.ondataavailable = (event) => {
event.data.size && event.currentTarget.chunks.push(event.data)
}
recorder.onpause = event => {
console.log('paused', event)
}
recorder.onresume = event => {
console.log('resume', event)
}
recorder.onstop = function(event) {
dispatch({
type: "STOP_RECORDING",
payload: event
});
}
dispatch({
type: "START_RECORDING",
payload: recorder
});
}
}
The problem
The moment I run this function the CPU starts to max out.
The question
Is is normal for my CPU to max out given that the canvas is 1080p wide, and has a video and image continously looping throught it?
javascript canvas html5-canvas redux-thunk html5-capture
asked Nov 12 at 1:21
Jason Allshorn
9261720
Second question: you ought to just try it yourself. Your question is a bit broad and will be hard to get a definitive answer, just opinions, which is not what SO is for
– Juan Mendes
Nov 12 at 1:25
What if you use the default VP8 codec instead of Chrome only h264? Now, for the CPU usage, yes, it's quite an expensive operation to encode on the fly, but it's also hard to tell if it is normal, given we don't know anything about your config. For the second part, that would logically, just add more burden to the CPU to deal with two streams instead of one, can't see the rationale behind it...
– Kaiido
Nov 12 at 1:32
@JuanMendes Thanks, I got the tip and removed the second question.
– Jason Allshorn
Nov 12 at 1:57
I found that I can reduce excessive CPU burden by reducing the frame rate to 15 FPS. Although the video is a tiny bit choppy for my purposes it will pass as acceptible.
– Jason Allshorn
Nov 12 at 3:38
add a comment |
The context
I have a canvas with a the user's video piped in along with an image. The canvas is running in a loop to repaint the video and image at 30 fps. This set up take around 25% of the CPU, which I'm okay with. My recording function is called within a Redux Thunk, which get a dispatch when the recording starts and when the recording finishes.
My configuration is Windows 10, with 8GB of ram, and running in the latest version of Chrome. Everything runs client side.
The code
The below code is what I'm using to record the canvas.
export const startRecordingStream =(audioStream) => {
return (dispatch) => {
const canvas = window.document.getElementById('canvas');
let recordStream;
if ('captureStream' in canvas) {
recordStream = canvas.captureStream(25);
} else if ('mozCaptureStream' in canvas) {
recordStream = canvas.mozCaptureStream();
} else if (!options.disableLogs) {
console.error('Upgrade to latest Chrome or otherwise enable this flag: chrome://flags/#enable-experimental-web-platform-features');
}
recordStream.addTrack(audioStream.getAudioTracks()[0]);
let recorder = null;
const options = {mimeType: 'video/webm;codecs=h264'};
try {
recorder = new MediaRecorder(recordStream, options);
} catch (e){
console.error('Exception while creating MediaRecorder', + e)
}
recorder.start();
recorder.chunks = ;
recorder.ondataavailable = (event) => {
event.data.size && event.currentTarget.chunks.push(event.data)
}
recorder.onpause = event => {
console.log('paused', event)
}
recorder.onresume = event => {
console.log('resume', event)
}
recorder.onstop = function(event) {
dispatch({
type: "STOP_RECORDING",
payload: event
});
}
dispatch({
type: "START_RECORDING",
payload: recorder
});
}
}
The problem
The moment I run this function the CPU starts to max out.
The question
Is is normal for my CPU to max out given that the canvas is 1080p wide, and has a video and image continously looping throught it?
javascript canvas html5-canvas redux-thunk html5-capture
asked Nov 12 at 1:21
Jason Allshorn
9261720
The context
I have a canvas with a the user's video piped in along with an image. The canvas is running in a loop to repaint the video and image at 30 fps. This set up take around 25% of the CPU, which I'm okay with. My recording function is called within a Redux Thunk, which get a dispatch when the recording starts and when the recording finishes.
My configuration is Windows 10, with 8GB of ram, and running in the latest version of Chrome. Everything runs client side.
The code
The below code is what I'm using to record the canvas.
export const startRecordingStream =(audioStream) => {
return (dispatch) => {
const canvas = window.document.getElementById('canvas');
let recordStream;
if ('captureStream' in canvas) {
recordStream = canvas.captureStream(25);
} else if ('mozCaptureStream' in canvas) {
recordStream = canvas.mozCaptureStream();
} else if (!options.disableLogs) {
console.error('Upgrade to latest Chrome or otherwise enable this flag: chrome://flags/#enable-experimental-web-platform-features');
}
recordStream.addTrack(audioStream.getAudioTracks()[0]);
let recorder = null;
const options = {mimeType: 'video/webm;codecs=h264'};
try {
recorder = new MediaRecorder(recordStream, options);
} catch (e){
console.error('Exception while creating MediaRecorder', + e)
}
recorder.start();
recorder.chunks = ;
recorder.ondataavailable = (event) => {
event.data.size && event.currentTarget.chunks.push(event.data)
}
recorder.onpause = event => {
console.log('paused', event)
}
recorder.onresume = event => {
console.log('resume', event)
}
recorder.onstop = function(event) {
dispatch({
type: "STOP_RECORDING",
payload: event
});
}
dispatch({
type: "START_RECORDING",
payload: recorder
});
}
}
The problem
The moment I run this function the CPU starts to max out.
The question
Is is normal for my CPU to max out given that the canvas is 1080p wide, and has a video and image continously looping throught it?
javascript canvas html5-canvas redux-thunk html5-capture
javascript canvas html5-canvas redux-thunk html5-capture
asked Nov 12 at 1:21
Jason Allshorn
9261720
asked Nov 12 at 1:21
Jason Allshorn
9261720
edited Nov 12 at 1:58
asked Nov 12 at 1:21
Jason Allshorn
9261720
asked Nov 12 at 1:21
Jason Allshorn
9261720
asked Nov 12 at 1:21
Jason Allshorn
9261720
9261720
Second question: you ought to just try it yourself. Your question is a bit broad and will be hard to get a definitive answer, just opinions, which is not what SO is for
– Juan Mendes
Nov 12 at 1:25
What if you use the default VP8 codec instead of Chrome only h264? Now, for the CPU usage, yes, it's quite an expensive operation to encode on the fly, but it's also hard to tell if it is normal, given we don't know anything about your config. For the second part, that would logically, just add more burden to the CPU to deal with two streams instead of one, can't see the rationale behind it...
– Kaiido
Nov 12 at 1:32
@JuanMendes Thanks, I got the tip and removed the second question.
– Jason Allshorn
Nov 12 at 1:57
I found that I can reduce excessive CPU burden by reducing the frame rate to 15 FPS. Although the video is a tiny bit choppy for my purposes it will pass as acceptible.
– Jason Allshorn
Nov 12 at 3:38
add a comment |
Second question: you ought to just try it yourself. Your question is a bit broad and will be hard to get a definitive answer, just opinions, which is not what SO is for
– Juan Mendes
Nov 12 at 1:25
What if you use the default VP8 codec instead of Chrome only h264? Now, for the CPU usage, yes, it's quite an expensive operation to encode on the fly, but it's also hard to tell if it is normal, given we don't know anything about your config. For the second part, that would logically, just add more burden to the CPU to deal with two streams instead of one, can't see the rationale behind it...
– Kaiido
Nov 12 at 1:32
@JuanMendes Thanks, I got the tip and removed the second question.
– Jason Allshorn
Nov 12 at 1:57
I found that I can reduce excessive CPU burden by reducing the frame rate to 15 FPS. Although the video is a tiny bit choppy for my purposes it will pass as acceptible.
– Jason Allshorn
Nov 12 at 3:38
Second question: you ought to just try it yourself. Your question is a bit broad and will be hard to get a definitive answer, just opinions, which is not what SO is for
– Juan Mendes
Nov 12 at 1:25
Second question: you ought to just try it yourself. Your question is a bit broad and will be hard to get a definitive answer, just opinions, which is not what SO is for
– Juan Mendes
Nov 12 at 1:25
What if you use the default VP8 codec instead of Chrome only h264? Now, for the CPU usage, yes, it's quite an expensive operation to encode on the fly, but it's also hard to tell if it is normal, given we don't know anything about your config. For the second part, that would logically, just add more burden to the CPU to deal with two streams instead of one, can't see the rationale behind it...
– Kaiido
Nov 12 at 1:32
What if you use the default VP8 codec instead of Chrome only h264? Now, for the CPU usage, yes, it's quite an expensive operation to encode on the fly, but it's also hard to tell if it is normal, given we don't know anything about your config. For the second part, that would logically, just add more burden to the CPU to deal with two streams instead of one, can't see the rationale behind it...
– Kaiido
Nov 12 at 1:32
@JuanMendes Thanks, I got the tip and removed the second question.
– Jason Allshorn
Nov 12 at 1:57
@JuanMendes Thanks, I got the tip and removed the second question.
– Jason Allshorn
Nov 12 at 1:57
I found that I can reduce excessive CPU burden by reducing the frame rate to 15 FPS. Although the video is a tiny bit choppy for my purposes it will pass as acceptible.
– Jason Allshorn
Nov 12 at 3:38
I found that I can reduce excessive CPU burden by reducing the frame rate to 15 FPS. Although the video is a tiny bit choppy for my purposes it will pass as acceptible.
– Jason Allshorn
Nov 12 at 3:38
add a comment |
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53254895%2fwhy-does-canvas-capturestream-is-maxing-out-my-cpu-when-i-have-a-video-and-ima%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53254895%2fwhy-does-canvas-capturestream-is-maxing-out-my-cpu-when-i-have-a-video-and-ima%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Second question: you ought to just try it yourself. Your question is a bit broad and will be hard to get a definitive answer, just opinions, which is not what SO is for
– Juan Mendes
Nov 12 at 1:25
What if you use the default VP8 codec instead of Chrome only h264? Now, for the CPU usage, yes, it's quite an expensive operation to encode on the fly, but it's also hard to tell if it is normal, given we don't know anything about your config. For the second part, that would logically, just add more burden to the CPU to deal with two streams instead of one, can't see the rationale behind it...
– Kaiido
Nov 12 at 1:32
@JuanMendes Thanks, I got the tip and removed the second question.
– Jason Allshorn
Nov 12 at 1:57
I found that I can reduce excessive CPU burden by reducing the frame rate to 15 FPS. Although the video is a tiny bit choppy for my purposes it will pass as acceptible.
– Jason Allshorn
Nov 12 at 3:38