[{"data":1,"prerenderedAt":345},["ShallowReactive",2],{"project-22826236":3},{"id":4,"name":5,"line":6,"line_source":7,"title":8,"url":9,"domain":5,"maker":10,"posted_at":11,"year":12,"points":13,"comments":14,"rank_in_year":15,"shown_in_year":16,"top":17,"tier":18,"category":19,"subcategory":20,"format":21,"keywords":22,"reception":27,"sentiment":28,"stance_mix":29,"scored_comments":34,"aspects":35,"strip":44,"post_text":46,"what":47,"said":79,"maker_in_thread":162,"shape":170,"grid":175,"attempts":306,"same_week":307,"maker_shows":37,"maker_hidden":337,"reader_version":338,"card":339},"22826236","madeitfor.fun","A stupid website for animating images on top of videos (HTML5 and WASM)","title","Show HN: A stupid website for animating images on top of videos (HTML5 and WASM)","https:\u002F\u002Fmadeitfor.fun\u002F","TrevorSundberg",1586460396,2020,161,49,370,3028,13,"notable","creative","video editing","web_app",[23,24,25,26],"animate images over video","browser video editing","webassembly ffmpeg","motion tracking browser","loved",0.521,{"positive":30,"neutral":31,"mixed":32,"critical":33},16,7,0,2,25,{"execution":36,"idea":39,"design":41,"performance":42,"docs":43},{"positive":37,"critical":38},3,1,{"positive":40,"critical":32},6,{"positive":38,"critical":32},{"positive":37,"critical":32},{"positive":38,"critical":32},[32,45,32,45,45,37,32,45,37,32,37,32,37,37,32,37,32,32,32,32,45,37,32,45,32,32,45,45,45,32,32,45,45,45,38,37,32,45,45,32],5,null,{"problem":48,"audience":46,"pricing":46,"motivation":55,"time_to_build":46,"stack":59,"openness":76,"stage":77,"team_size":78},{"value":49,"source":50,"evidence":51},"Animating images and GIFs over a video with easy controls on mobile and desktop.","maker",[52],{"id":53,"by":10,"text":54},"22828505","The original inspiration for this was a very old video from 2007, the 300 PG version: https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=gNqiSkd1M6k I had originally named this project Cake Town as…",{"value":56,"source":50,"evidence":57},"Inspired by a scene from the 300 PG parody video; wanted animation over video in the browser.",[58],{"id":53,"by":10,"text":54},[60,64,70],{"value":61,"source":50,"evidence":62},"WebAssembly",[63],{"id":53,"by":10,"text":54},{"value":65,"source":50,"evidence":66},"ffmpeg.js",[67],{"id":68,"by":10,"text":69},"22828096","Absolutely, feel free to add it! Overall ffmpegjs\u002Fffmpeg.js has been really nice. I would honestly prefer less API: they wrapped everything into a worker and made their own API…",{"value":71,"source":50,"evidence":72},"H264 encoding",[73],{"id":74,"by":10,"text":75},"22835151","I am using H264, but I'm now considering other options!","open_source","launched","unknown",{"praise":80,"objections":108,"requests":123,"questions":142,"alternatives":157},[81,97],{"value":82,"source":83,"evidence":84},"Impressive client-side ffmpeg and motion tracking in the browser","commenter",[85,89,93],{"id":86,"by":87,"text":88},"22827983","transitivebs","This is really awesome -- was interesting to see FFmpeg being used fully client-side. I had previously used this ffmpeg WASM port (https:\u002F\u002Fgithub.com\u002FKagami\u002Fffmpeg.js) and hadn't…",{"id":90,"by":91,"text":92},"22829259","gitgud","This is incredible. The humble little meteor icon does motion-tracking! How is that even possible in the browser?!",{"id":94,"by":95,"text":96},"22828376","willcipriano","Try the \"track motion\" feature, mind blowing doing that in the browser.",{"value":98,"source":83,"evidence":99},"Smooth and fast, even on low-end mobile",[100,104],{"id":101,"by":102,"text":103},"22828029","Rinum","This is very well done, intuitive to use, and fast - I'm impressed! Only tweak I would want is a way to move the ends of a selected timeline segment, at least for mobile.",{"id":105,"by":106,"text":107},"22828236","gediz","Great job. Buttery smooth even on a low end mobile device.",[109,116],{"value":110,"source":83,"evidence":111},"Does not work on Safari",[112],{"id":113,"by":114,"text":115},"22830096","ksec","Is this working on Safari? I got nothing other than a Side Bar and Black Screen",{"value":117,"source":83,"evidence":118},"LGPL licensing concerns with bundling ffmpeg",[119],{"id":120,"by":121,"text":122},"22829737","greggman3","Be careful how you use ffmpeg. ffmpeg is LGPLed. you can call it like a DLL. You can not run some compiler\u002Ftranspiler on top of it that combines it with other non GPLable code.…",[124,128,135],{"value":125,"source":83,"evidence":126},"Handles for trimming timeline segment ends on mobile",[127],{"id":101,"by":102,"text":103},{"value":129,"source":83,"evidence":130},"Use Canvas captureStream instead of ffmpeg",[131],{"id":132,"by":133,"text":134},"22831764","s369610","Awesome!, If you want to try without the ffmpeg dependency in the future, you might have some luck with the Canvas captureStream API [1] and the MediaStream Recording API [1]…",{"value":136,"source":83,"evidence":137},"Walkthrough of how it was built",[138],{"id":139,"by":140,"text":141},"22831420","limograf","Wow this is absolutely fantastic. I'd really love to read a walk through of how you built this.",[143,150],{"value":144,"source":83,"evidence":145},"Does it work with live video streams?",[146],{"id":147,"by":148,"text":149},"22828939","op03","Really cool. Would this work with live video streams? Sports feeds? Any idea how far away we are from doing this kind of stuff - https:\u002F\u002Fvimeo.com\u002Fhawkeyeinnovations - in the…",{"value":151,"source":83,"evidence":152},"Performance of 30-frame chunks versus whole file",[153],{"id":154,"by":155,"text":156},"22833566","sitkack","Did you noticed a performance difference between when encoding 30 frame chunks vs whole file (barring zero completion equals divid-by zero)? This is wonderfully executed hack,…",[158],{"value":159,"source":83,"evidence":160},"ffmpeg.js (ffmpegjs\u002Fffmpeg.js and Kagami's port)",[161],{"id":86,"by":87,"text":88},{"comments":30,"answered":163,"key":164},9,[165,166,167],{"id":53,"text":54},{"id":68,"text":69},{"id":168,"text":169},"22835142","Great suggestion! I could use this with requestFrame()! https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FAPI\u002FCanvasCaptureMediaStreamTrack\u002FrequestFrame I think I will make this…",{"commenters":171,"max_depth":172,"maker_replies":30,"first_comment_mins":173,"lifespan_hours":174},28,4,87,31,[176,178,180,182,184,188,189,190,191,193,196,198,200,202,204,206,208,211,214,218,219,223,225,228,230,234,238,240,242,246,251,254,257,260,263,267,270,272,275,277,279,284,287,289,294,296,298,302,304],[53,32,32,177,10,38],"maker\u002Fneutral\u002Fidea",[86,38,45,179,87,32],"project\u002Fpositive\u002Fexecution",[68,38,32,181,10,38],"project\u002Fneutral\u002Fexecution",[154,38,45,183,155,32],"maker\u002Fpositive\u002Fexecution",[185,33,45,186,187,32],"22829390","maker\u002Fpositive\u002Fidea","superasn",[90,37,45,179,91,32],[132,172,37,181,133,32],[168,172,32,181,10,38],[101,45,45,192,102,32],"project\u002Fpositive\u002Fdesign",[194,45,32,195,10,38],"22828116","project\u002Fneutral\u002Fdesign",[197,45,37,195,102,32],"22828706",[199,45,32,195,10,38],"22839274",[147,40,37,201,148,32],"project\u002Fneutral\u002Fidea",[203,40,32,201,10,38],"22830857",[205,40,37,201,148,32],"22831413",[94,31,45,207,95,32],"project\u002Fpositive\u002Fperformance",[120,209,38,210,121,32],8,"project\u002Fcritical\u002Fnone",[212,209,32,213,10,38],"22829868","maker\u002Fneutral\u002Fnone",[215,209,37,216,217,32],"22830600","project\u002Fneutral\u002Fnone","FraKtus",[74,209,32,216,10,38],[220,209,32,221,222,32],"22829870","commenter\u002Fneutral\u002Fnone","abetusk",[224,209,32,221,121,32],"22830283",[226,209,32,221,227,32],"22831117","pwdisswordfish2",[229,209,32,221,121,32],"22835038",[231,163,45,232,233,32],"22827904","project\u002Fpositive\u002Fidea","colecut",[235,236,37,181,237,32],"22828037",10,"jernoble",[239,236,32,213,10,38],"22828098",[241,236,32,181,10,38],"22828499",[243,244,45,232,245,32],"22828494",11,"Aaronstotle",[247,248,32,249,250,32],"22828948",12,"other\u002Fneutral\u002Fnone","KaoruAoiShiho",[252,248,32,249,253,32],"22829725","db48x",[255,17,45,232,256,32],"22830093","blululu",[258,17,32,259,10,38],"22830184","project\u002Fneutral\u002Fperformance",[139,261,45,262,140,32],14,"maker\u002Fpositive\u002Fdocs",[264,265,45,186,266,32],"22827889",15,"gameofcode",[268,265,32,249,269,32],"22828190","dylan604",[271,265,32,249,10,38],"22828270",[273,30,45,207,274,32],"22827216","netgusto",[276,30,32,213,10,38],"22828142",[105,278,45,207,106,32],17,[280,281,45,282,283,32],"22830375",18,"maker\u002Fpositive\u002Fnone","atum47",[113,285,38,286,114,32],19,"project\u002Fcritical\u002Fexecution",[288,285,32,181,10,38],"22830867",[290,291,37,292,293,32],"22827069",20,"maker\u002Fneutral\u002Fdocs","dang",[295,291,32,292,10,38],"22828128",[297,291,45,282,293,32],"22828710",[299,300,45,232,301,32],"22827770",21,"dajomu",[303,300,32,249,301,32],"22827886",[305,300,32,213,10,38],"22828144",[],[308,313,317,322,327,332],{"id":309,"name":310,"points":311,"category":312},"22867775","Tom Nook's Laptop",552,"games",{"id":314,"name":315,"points":316,"category":19},"22837990","Valora",306,{"id":318,"name":319,"points":320,"category":321},"22867767","TerminusDB",231,"data",{"id":323,"name":324,"points":325,"category":326},"22858235","DJ3D",212,"consumer_social",{"id":328,"name":329,"points":330,"category":331},"22823320","LearnObit",209,"learning_science",{"id":333,"name":334,"points":335,"category":336},"22848779","Quiver Quant",202,"finance_crypto",false,"v2",{"id":340,"name":5,"line":6,"ai":337,"cat":19,"year":12,"points":13,"comments":14,"rec":27,"s":341,"top":17,"kw":342,"maker":10,"domain":5,"tier":18,"attempts":32,"strip":343,"url":9,"mix":344,"praise":82,"objection":110,"sub":20},22826236,0.52,[23,24,25,26],"0505530530303303000053050055500555130550",[30,31,32,33],1794036588862]