The WebM files produced by Whammy lack a Cues segment. This breaks seeking, looping, and restarting in Firefox and possibly other browsers.

https://developers.google.com/speed/webp/docs/webp_lossless_bitstream_specification

currently only loosy webp is supported by whammy. Maybe loosless webp should be added.

Anyways, for pixelated games, in chrome you can add "image-rendering: pixelated"
but when recording, the scaling is wrong (not pixelated).

It would be great if there was a license file so that people know how they should and shouldn't use your code.

I am using whammy and it give me few errors only in FIREFOX browser like

"TypeError: riff.RIFF is undefined
http://localhost/../../js/whammy.js
Line 353"
(stangely chrome doesnt throw this undefined error)
and

"InvalidCharacterError: String contains an invalid character
http://localhost/../../js/whammy.js
Line 462"
Can any one tell me whats the problem here ?

When I try to create video out of images by providing explicitly providing 4000 as second parameter to Whammy.Video().add function, whammy is creating simpleblocks with negative timestamps.

My code is:
`function saveVideo(){
recorder = new Whammy.Video(FrameRate.value);
for(var i = 0; i <= images_array.length - 1; i++){
recorder.add(images_array[i]);
}
console.log(recorder);
var output = recorder.compile(function(blob){
return blob;
});

}`

When I was trying to compile, an error :

RecordRTC.js:4343 Uncaught DOMException: Failed to execute 'postMessage' on 'Worker': function(){return 0<arguments.length?(this.elt.value=arguments[0],this):"range"===this.elt.type?parseFloat(this......e} could not be cloned.

Can anybody help me tell what to do ??

First, say thanks to @antimatter15 write this magic project whammy.
But this project is old school and event without maintain.

So i rewrite a new version of whammy call ts-whammy.

ts-whammy only include the core function of whammy then with modern frontend technology stack.

Welcome issue and PR or any other contribution.

Thanks, Love everybody.

if whammy is based on canvas, it means whammy can't capture cross domain images??

Hi,

First of all thanks for open sourcing such useful library :)

If the recording is more than 30 seconds, video becomes problematic. The code to send video data to a preview player is :

videoBlob = new Whammy.fromImageArray(frames, localframerate);
videoBlobURL = window.URL.createObjectURL(videoBlob);
document.getElementById('previewVideo');
videoElement.src = videoBlobURL;

I also tried updating cluster max size as (10 times more) :

var CLUSTER_MAX_DURATION = 300000;

but this time video stuck on 32. second.

Test platform is Chrome v.36 on Mac OSX 10.9

Regards

Demo on http://antimatter15.com/whammy/clock.html does not work correctly.
Firefox shows an error in console (no line specified):

uncaught exception: Input must be formatted properly as a base64 encoded DataURI of type image/webp

Chromium show other errors (CORS-related):

Refused to load the script 'http://antimatter15.com/whammy/whammy.js' because it violates the following Content Security Policy directive: "script-src 'none'". (clock.html:13)
Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'none'". Either the 'unsafe-inline' keyword, a hash ('sha256-BfZLB9J/Cyv0abkx6zfwQQIH+DNd2s/8O6jyPoKNp1I='), or a nonce ('nonce-...') is required to enable inline execution.

Can we get the file as a mp4?

Hello! Webm supports transparency. Is it possible to make webm with transparency with Whammy?

Hi,
there is a 32s limitation when recording to webm. That is, after 32s, the frame count shows a totally different timestamp (16h32m...and counting).
When viewed offline, the video does continue to run ( I used VLC to check that), but when run in HTML, using

Thanks
Yossi

Man, thanks for share your solution, i'm Having a problem with memory, in large videos, more than 20min, u know any solution ? You had this problem too?

Hello,

I am building a project using this tool which records a canvas. I import the Whammy script along with the CanvasRecorder script as specified here. The problem I am having is that whenever I call the function recorder.stop((blob) => {}), it uses the whammy library to convert each webP to base 64 and combine it to webM.

It is in this function where the problem occurs:

var webm = new ArrayToWebM(frames.map(function(frame) {
    var webp = parseWebP(parseRIFF(atob(frame.image.slice(23))));
    webp.duration = frame.duration;
    return webp;
}));

WhammyVideo.compile -> processInWebWorker -> whammyInWebWorker -> ArrayToWebM -> parseWebP -> parseRIFF -> atob

As stated above, on android web view through phonegap this works but on iOS it does not. I tried logging window and even tried polyfilling the function with a shim but nothing has worked so far. It seems as though the window variable is lost in the function:

function whammyInWebWorker(frames) {}

Maybe I am just thinking about this incorrectly but I think this library should be working across all devices especially iOS through Phonegap since it is a growing development community.

Best,
Aaron

Hi.
When using Whammy in Firefox i get this error in the console.
[00:05:27.913] TypeError: frames[0] is undefined @ whammy.js:184

The script is working with no problem in Chrome

Hello there

Would it be too much work to feed whammy with jpg images instead of webp for webm generation?

Cheers
Michael

I have a bunch of images (blob) that i want to convert into a movie
So i'm using html5 multiple file upload or drag and drop with multiple images

Think it would be insufficient to add everything to canvas or convert everything to base64 string (base64 takes up ~3x more in size and 2x times more memory since javascript strings are utf16 and not utf8)

encoder.add(blob);

I add almost 300 frames to make a 21 sec video.
There was no error message, however it return a webm with correct width, height and time length but the scene is whole black, and it can't be played.

The following is where I called whammy:
var whammy = new Whammy.Video();
whammy.add(webpDataURL, time);
var output = whammy.compile();

Is there any suggestion or limit I missed it?

Hello! and thanks for your work!! it's great deal for me.
i need more duration for my video - 2:30. what i need make for this ?

I ran encoder.add(canvas); in a loop. a total of 705 frames, but when I tried to compile it all together I got a error: InvalidCharacterError: String contains an invalid character How could I get this error when I rain encoder directly on canvas?

Hello!

I want ot generate webm file like you, but I have packet opus audio data.

Can you help to modify your code for me?

Can it be used for realtime capture?
If so it can be used to send a videofeed to Youtube Livestream

Images that used to work fine now fail to convert with this error:

The size of each frame image is wrong.

I found the reason, since this project seems to be unmaintained, I didn't submit a PR, but as an issue, so that more people who encounter this error can see it.

var p2 = str.substr(577)
// change into
var p2 = str.substr(ChromeVer >= 108 ? 497 : 577)

Since Chrome 108 the 80-byte whitespace is removed, so the offset of the second part is 577 - 80 = 497.

I added code to detect ChromeVer before this.encodeFrames:

    let ChromeVer = 1
    const test = navigator.appVersion.match(/.*Chrome\/([0-9]+)/)
    if(test && test[1]){
      ChromeVer = parseInt(test[1])
    }

Backgrounds

We used whammy for about 1 year, and it works well.
Recently, some customers report that the generated video is black screen.

Google Chrome Versions

I have checked an older version of Google Chrome 90.0.4430.212 (64-bit)，it works well.
But whammy gives black screen when on latest Google Chrome 92.0.4515.107 (64-bit)。

Guessing Cause

The lastest Google Chrome updated webp image format, and whammy parse latest webp incorrectly, then it get a black screen webm video file.

Can anyone help on webp and webm format?
webm-ok.zip
webm-blackscreen.zip

Does this work with webgl context?

Trying to use whammy - and in the compile step I get thie console error: "callback is not a function whammy.js line 556.

Any clue on how to troubleshoot?

this is easiest to demonstrate with a one frame video:

var video = new Whammy.Video;
video.duration = 15000;
video.quality = 1;
//assuming here that we have an image from a canvas to use:
video.add(context);
video.compile();

the compiled video will have a duration of 15 seconds. But if you actually play it, the video ends instantly. You can also test this with a video with multiple frames, just make sure the frame durations are long enough that you can clearly see each frame individually, the last frame duration is never used.

Is there a limit on the number of frames that can be compiled or the size of the blob created?
I added a print statement in WebMExporter and got:
"Got to compile 4170 movie frames"
and then I print the size and the type of the blob and this is what I get:
"Size of movie blob: 250739803 video/webm"

But when I try to save the blob using createObjectURL (blob) I get a "Failed - No file".
This happens in Chrome (latest).

Also in the Chrome downloads window I see:
"The server could not find the file.
blob:file%3A///8993d68b-503d-4221-8e34-d1d09a3e7d82"

I'm using Whammy.js on a library to capture canvas https://github.com/spite/ccapture.js/ and most of the times the videos are created correctly.

However, some big videos (long videos, or videos of 1920x1080, or videos at 60FPS), don't work correctly and pieces of 30 seconds of the video are missing/can't be played. As an example, a capture of 4:07 at 1920x1080@60FPS will have all segments correctly placed, except the 3:30 to 4:00, during which there's no image. And 4:00 to 4:07 will play correctly.

I've been using HexFiend and EBML Viewer and found that some of the lengths specified in the segments are quite wrong:

If I manually fix the values for that segment other blocks inside the file will fail, so it's not immediate to see what's really going on.

Fixing this would be perfect, since Whammy.js is an amazing library for capturing on the browser, but it's a bummer if after a few hours of rendering high quality video, the resulting file doesn't play completely.

Thanks in advance!

Currently @maxogden and I own the package, I will transfer the whammy module name to you if you publish this on npm https://www.npmjs.org/package/whammy

Are there any size constraints for WebM video?
When I create videos, some of the sizes play in the browser (ie 170x300), and some don't (84x150, 282x500). Interestingly, when I save them to disk, VLC or android players can play them without problems.

You can check it here: http://depthy.clients.stamina.pl/ . Click the left "share" icon, then "create video". The only size that works is "Small", though it's different for images with different aspect ratio.

A recent Chrome update implements lossless WebP, which is used when quality = 1 in HTMLCanvasElement.toDataURL('image/webp', quality).

AFAIK, WebM doesn't support VP8L (lossless VP8).

I was trying to record a video of my screen using html5's getUserMedia api. The recorded video plays smoothely if the resolution of the video is set to 320 x 240. When we try to set higher resolutions, Then the video tend to get sluggish and slow.
How can I fix this issue? Any pointers on this will be helpful.

Tks

Hi,

I see there's basically two issues it seems like with Whammy as a result of the passage of time -- (1) a modification to the webp code and (2) something with CreateObjectUrl (I think this has been superceded).

Has anyone successfully modified to work recently? If so, would you be open to sharing your updated .js?

Thank you,

Philip

when calling the method add(), if the argument is a string of dataURL, will encounter the error,
the codes in whammy

if('canvas' in frame){ //CanvasRenderingContext2D
	frame = frame.canvas;	
}
if('toDataURL' in frame){
	frame = frame.toDataURL('image/webp', this.quality)
}else if(typeof frame != "string"){
	throw "frame must be a a HTMLCanvasElement, a CanvasRenderingContext2D or a DataURI formatted string"
}
if (!(/^data:image\/webp;base64,/ig).test(frame)) {
	throw "Input must be formatted properly as a base64 encoded DataURI of type image/webp";
}

it seems that it is a little unreasonable

hi ,

i would like convert a long video using whammy but my initial idea was to pass frames
but whammy call me for sending chunks sequentially

Could you add the support for transparency frames ?
To build video like this : http://simpl.info/videoalpha/

Add duration argument to encoder.add so that you can make a frame last a certain amount of time without having to add frame-rate * desired-duration amount of frames.

Or instead of a duration in seconds, it could be number of frames to cover.

encoder.add(context or canvas or dataURL, /*optional*/duration);
// frame should last 3 seconds
encoder.add(context, 3000);

I am taking a simple image and trying to make a video that is 10 seconds long. However, my browser locks up at video.compile(). Has anyone seen this behavior or have any idea how I can solve my problem?

window.doIt = function() {
  var canvas = document.getElementById('canvas');
  var context = canvas.getContext('2d');

  var video = new Whammy.Video();
  var videoEl = document.getElementById('awesome')
  var img = new Image();

  var finalizeVideo = function() {
    var output = video.compile();
  };

  img.onload = function() {
    canvas.width = img.width;
    canvas.height = img.height;
    context.drawImage(img, 0, 0, canvas.width, canvas.height);
    video.add(context, 10000);
    requestAnimationFrame(finalizeVideo);
  };

  img.src = "./hqdefault.jpg";
};

 <!DOCTYPE html>
 <html>
   <head>
     <title>Test Whammy</title>
     <script src="./app.js"></script>
     <script src="./whammy.js"></script>
   </head>
   <body>
     <video id='awesome' controls></video>
     <canvas id='canvas'></canvas>
     <script type='text/javascript'>
       doIt();
     </script>
   </body>
 </html>

Can you please add a component.json?

I am attempting to create a webm video from an array of images (webp). I am using the below code:
var webmBlob = Whammy.fromImageArray(frames, 24);
url = window.URL.createObjectURL(webmBlob);
Every time this code runs, it throws an error that 1 frame has a different width and the video fails to render.
I have set the width and height of the video source and the canvas both inline and in the css and don't know what else I can do.

Can I add a sound track when compiling it? I didn't find such function in the source code though..

Recording at high res / fps is pretty choppy. Is there some way we can improve this by offloading the .toDataURL() call to web workers? I assume that is where the bottleneck is, but I don't think you can reference dom elements in worker scripts.

Thoughts?

Is there a way to add some text to the frames?

I am trying to join a

Where can someone find the documentation on how to do it with whammy.js?

Thank you

I want to save webm to local.