12 ms·

Show HN: A stupid website for animating images on top of videos (HTML5 and WASM)

161 points by TrevorSundberg 7y ago

willcipriano 7y ago
Try the "track motion" feature, mind blowing doing that in the browser.
dang 7y ago
You should add a comment to the thread giving the backstory of how you came to work on this, and explaining what's different about it. That tends to seed discussion in a good direction. Other Show HN tips here: https://news.ycombinator.com/item?id=22336638 https://news.ycombinator.com/item?id=22336638
- TrevorSundberg 7y ago
  Thanks for the tip, I'll try and write something up :)
  - dang 7y ago
    Looks like you did well!
netgusto 7y ago
Very impressed by the motion tracking! I was able to track the head of the bunny with an object with 2 clicks and withing 20s. Shared anim: https://madeitfor.fun/?data=eNq9XF2PVLkR%2FSutiVazq4Cxy3aVjcRD3puHVt6I8tDMDDDaAUZM70K02v%2BeU%2F7ouZ0QXyKPelkhm%2Fb1ubbLVaeq7PvHxeHL%2FurXh4uXf1z85fb6%2BdvI6crvw%2FMrIX4e6Mo%2B39%2Fs%2Bbnsb66I9%2FEqe6tty1949NPDu89fPl68rOW7%2FeHmZy%2FOiLv%2F9mzjOZrE8f7bL5svnw%2F6m72%2Bef%2FL5uFqf4eyCTEyPdu0wi%2BbYx9vfrZ46OLPZxfWWMsk0XrhaNlSsPl80I5itMQ%2BxkCOE6cRdDBZAYEt1uCZWeyUKHq8gg3JZRpCZ5N8KNApGBdpEpqis9b7lNq4R9jJG5e8YgdrMfkyie2dF%2FweJGbr2cURdDZOyrCDI5Odn4V%2BFDH2KfL%2FhkYLExN1aOE0CR18JgzaNng5IzQE3FpslTLmGNxo2J5NFCmClpNJeRr7uM4hREm0hs38dNhFq2TMYVv0AXR0JtcpV3EP08gZOsWxqEaRMFprtsbbqlM4mRBmJVwWCkXEuRE09GeqOiVic9nZQScXhSlQ4JwkRzontKToAicvPmQ%2F3FywHy7VCffB%2BOgmoRfyVZTKCDqYmOuoXYSoT44aGjxYF7FtpEz5EJoNcZFvyih6moVmFvzJ2NJQ5xRH0AIVVkZNyRqatB7OUY4uWSFK2UUeIQOOpRgukqdAzkScQlDh1jc4H3LhKFZsm%2BzRzoL2ijkXZIbtsJMcxXknUCM2BV%2F21giZjcRUkCOWnPIscrKRsKkb9shwZHTl6qBjMClOKlGYKk8Cpln0mJPRqHPAJEuF9oZ5FnpJT0DN%2FAg6GwhkH7VNsxMOhSQSgtSNxXRGaIZCJOyYarRGWwtuAghK3VrsYKmnoXOgRwmPI%2BRgKB03Nc%2BSUSdRLElIxWLFEQWHUJgkdb6xwfO0gIMdiGQJCqzkbAANS5Wqv2V1U%2FIs8onLI6P5pmg4VirqoESnVVkOERYoZG7b%2BnzQSr8tVErse3sA7aPxrpJgJ6p%2FZ6GPZqNO%2BwA6kPFUSbDLZpYjkPM%2B4n%2Fb2P9o0EGUw3Vm5NM0dGZKYKONJwyQI%2Fh3tZcebhfPxhOIFs4OZn2ETCaGSkShWSRN7ixwOodOYDKrKqNzQqcQPQho29cjTRY1mFA1WRYTZpEX5kpJ%2BPmAS%2FwEirjtrDBGpli5d4KcZ5mFFpIMVlLiVUMNinV2jRdJBGmfRX4MkxWPY7ShM6Y4Vittq9czhwzvPINrNOovZ4QWdhak37aBj5AZRr2KWIBrmWaRE3lZODsjZDi1rnJvEgMTO4sMRYIGsXtZI3sVTJYqY06dpElqQjlkbNDkVjc0JXCi4le6lPEOk2M%2BCZtAhQ6hNZ5XkFlMpmlkCZJT5AZ9PuASiLWJmls5UiVOY0uF%2FDrdYLMBaA9KtJzxsa8RqoXGSxq2eRaZvQWrTY0SjTzaDNe7sBJsLpNmZxt4YIEpNH4wCkdK7uEaKG306mahj4H%2BtXCkGM9FkeQEUzVrqzxeHcYx5ho98OeEji5YuLRxPS4X2QgVi5HJwLTOzvYj8Vzzo0My0RXvKlsDR3TSYngGJQG6bWs9ipkEX%2B3Esw3EHHI5Cw1fFgw6cWO%2BI2QM1Vdk7CpI5CzySU5nFBD0yeTKAYGsEfpJ5EQwVJZdjb%2FmcyJnyDboZB26j2sZnSJjYJ%2Feza7zI%2Bct2nsEHHqkJjGMh0wiB%2BvYsuce%2Fx0hg3FXYPVu7DSwpASD0XXoSHHDQqF1gfYGFn3SWAUXjr4NJHy0q7yFhaoSRgbyNgmMtfWOucOfEZjFMsS7belRAJQ0O1yAneE4q0ewdvmR%2Fvk1YM4dWWbTVzU1nDm2wMFIbYPeB0cN2qZZug246MnlnsMaIUf0VNfZGok0qcLCMovDw7wweezi1JCjnU2nBNCwRMTcdlY8IzQHsAN4OC1HOkImEAlqyORm0ykBu8ovQq8jZBWs0JCdZ5pF5mwF27NtrBGyngUqOxoEGBM0K2LgITDRuSdIR4rbYUtb36GnvQz4DiEu4q4j5GQoUEcOeTIyFTKMLiWo0LXQ%2FlMj12MmNrcE6QhYDNe4lAI78rPA3YUt4j3aVY7NETfMEn14GBF%2BpNiqyfIYlyS2PQWaPItMNnnvc0%2BOjpCjibmrbe9mYwaRFtng8UkLF2qIohqM6bgneKdPPoirmVE6JzJsc%2BLcQ81jZM%2FdOtMsMYiPnrNmCIcCpoaqk6FgwyTnjZHw9iK0ekZPkZ10RpKnA4DYUdDbObe06HDMGg6ixjx9UWVTyP9xVG2MbENqyCJ%2BVsCwpzzcDL9%2BsuTJkQVeO%2BWeFB0hOxObC6sr7mYVSfJxoUd4jGyPyOxnI%2FrYSAn7SoZCrZsvNRfS5jg72MzOB7Y9FzpGttU2Jj0uNhsSOjlNAqdlfOxUGi42oMzigoIEFq50058N14EA5Wx7GnSMW49Up2hcnD3NzeDoTVGXRV4B9umIHGeHXI65ZpG20GNk20Jv8OZ4lgAxJjiBi9SI0JAA2QTCxQ2ZZRr5eJC6ivYYOfXJhts3u8wBgwYJSs1KnA84EjsbbfebV4BrxkSRp4NQ%2FBj6WksfnCBnbyc9Crjojm2UvJoksnogrccaXTmbNgUsDo56sj0BOkbmmBsy%2FI9Z4OVpyxU74fqAwfxmpQuaN2Gd3eoBpacGLiflnV1PfiowU2qBbOJZ6rMIuKnz6McEpATOC3KydpLiiqXknINOWMuuK7JIzxtovGoWOcMuB%2FsDyU93PCOUskaPJpUI%2BOJisod3MZxewEgtKRZm7bJAbXmGS7F%2BgvmpgTWViIn7gb0cDJhDAYbz5meNI%2BBcO6KzctBRowPSM5%2FsJt1VEBBwCgHtq3RzHAGyvrC%2B7PU5mUVmuELWtcSnjINeLSuVg8lpepVP79uMg5vtdGWOZnY3wTFIYlNcPbX8tLCsP0I%2B1xOeRHoLqsCy4aJJppDFHS%2F3KL8eh%2BxT28UCN2R2LwlUNXlMdlni4ZC5ntQoBxj0bPckMtY2Cff7Liv5KKmpGSDDlZ9FzvYx5wg2MM60NlfGWVejMXPIDMec%2ByHx8wHr8WzMdE%2B3hnE%2BndohLCvKFGeR8%2FFG0fisckV2R%2BTZs8r1vl7umYrhbMOPqHFN5zSlPhmUAPOxPtGREoyzy430QcvW4hzy8iz8MMYHPeLqdnYUYBxnJcwH8Gs6bq0zIoPvsYcntZrKBxsIVI%2FaEQz0bM4xHYP1ayeVldtTO8xJaV5rpwgK5GN2qyeVQT1M9G2yoUZn420pZqiv5H4g22m5X6JyXo%2F0zIr28YL36tkvG%2BGppo48%2FRGFBMWF14e%2FXzQYnRNZ7%2F3ClVpPdtpQdbUiuyeQbQj3D108UGAfQgem2dQfQC0Hd7y1NkZ29QiBIvtZeo9J9h64P5DuhEmuYUanx8Nnr0%2Bd3KgZX3%2B1%2Bm2LNtlcb2bOIWfIdchx9bbakyM7dhzgvLYdPfhIhh6Q5iNyng33ZaLjvUDMOo%2BQk%2BbeK7KY6cNI6tO4AA64FmfE65kc6ml0D3Mxq7QzHItsLa1nO3XI3uaOnGfzrP%2FH1wNsucLYkWe3VJCIHrOsn1F%2BWtzoQTt9v9gy1JveUKYuXFEmQ7r5MfumimSsNkPmDjzrWUCaPUds0vXjyTYZ2%2FU119tqU8gCR8YyrSTvk6ejpnbTkAubOP7iCpHhxB3ZyqzWAhHIVo63Ss6IDK8R1ItappPGJ6KFm9rS4%2FdpFvmY81MTEc%2BD%2FCewf7%2B9vvn8t8Phy%2B3b3w4313%2F%2F%2FNuXqxuF37d%2Fu%2F38CS9w8ezi4csVCve%2Fvb27vXpxHePb6%2Bt36RpuJ7iL5Jvr%2FI6tHjZxIe%2FT84f9x%2Fu7G%2FPxPugIv95ev785PFy8%2FMdjxz8Adr0%2F7F%2Fefty%2Fv3nx8Pv7v377ePfsJ3%2BF4gbFTw%2BvLj8cDvcvX7z4%2BvWr%2BerN5y%2FvX5C1Vhtf1iYvv93dfvr1ew0dzOuL8uvlBq93%2BPDq0pM6d3S5%2BXBz%2B%2F7D4dWlXl%2FR%2FGT%2Fz13%2B5G%2FwBvf7w4fNu9u7u1eXXz%2FcHm4uNw%2BHL59%2FvXl1%2BfZuf4UOr19dvg6aRNqQfh5mW8sCmy5bn7FqJ2X9cE7easyaT8q1Df5Ky2LtsbZYloMAo%2FW4LC%2FfoJTfvBa907jxGnnYLso7vawktayHUhLK2sUusQmyCfplJc1eoH2IYFS7rLf8NqHA1HKMxqbtd8qwsHbLEFiu5R1jw7oN61HkDYshlPUa4E705PhGSJ8S1Z21vF2U9T1TbG3wnoyWGjnaJQwvbET5R82ybDiDU2z%2Fu6yXaEXbs1OUUMYrfiN6fb33L6XnCLpcy9tFWd%2FTh9aG9bqotgy8Y8wS2sDkYWE1o1jG5XdRr2xsMOoQNrWMvzNvF%2BXWJmIs5Vm01Ov0WfvEOwcyMZYZc5ugX%2B7ZsV4ua%2Bu1WMe6wFYfSGG7KOsDIrWsk%2B6CLqSwLkZEpyBgsqkLE3WptsuyntjhWt6Vb9No%2B8x6VsxzEwhMnPOt%2FwXum9fwdHRZobApblulyrRTup1OKyfNSgU9UNCJbT%2FVSnvIpTIBy8pJs96DaChWp5rtdlnZtYrOSNo4zHAuEhj8DtwdKqAtM1wwbVZlYVnZgevq1LVmATOVVBx83DnsIK14nUhlIVgk1rti%2BAX7o093q7R3W1R6s6CXjTbaW%2BK2mOA%2FKl51%2BUHF2oY%2BlnYOO82l3oBJRTLowWwMizEl2g9k2On74BdWSejz4kAVN8tJwvyFKpj1HReVXatU4dbX8rQp30ArE2PbZJb5y75WtstKeVPh3kzF3fYO0Cn53nWttDdYVHqzqJmN3kHQT630rjFUKC8FTa2yXVbwohCf2JthCKrYagdtpLXrxbDfvCZd3Nw0bKtUMSS9uOROK1W1k34Bhk8rrZnV2NFppXVdm51UqopvXZ9UTl6naXzKmMBjd7XSgKDcc9%2BMpFqHNuAYVCvYzaWy04raBgiJdqo3eVWWYii%2FCGZbv6mz6RU9j779XqXj%2BKJtl5X2blg76kaLoKyrAnWuVHKolZ1WMAkQY2ggrWBtIAIQ%2Bv6MXroov8AiFD1cfoF4xbLQvQLFl7bfq5xMVZtF72L7dw%2BbS1ZRIuys1SsHx4o82v3jA3jWavasKIK0XVZ2vVIMnz6uo9QTbTvtmMqQVc07%2FTRArWyXlZ0vX9Q8NgvlmdqBnhlPvetWqW%2BwqByb6Xmu3gHWBpa%2FdQ3Fhm3RQEtlu6z0F23N6hBaB21wtevFsN80LvVCyVQrgrehpITx8K97EMML%2FAPI4O01ij%2F6vds%2F%2F%2FnnvwEVPQDr https://madeitfor.fun/?data=eNq9XF2PVLkR%2FSutiVazq4Cxy3aVjc...
- TrevorSundberg 7y ago
  Haha thanks for sharing, it's the first time I've seen anyone use it and share the link so I'm pretty excited!
dajomu 7y ago
I really want to think of something to use this for now, it's really good!
- dajomu 7y ago
  https://madeitfor.fun/?data=eNrtWVlv3MgR%2FiuEgo3WiIbqi30YEIK8BhR2iX1TkAeKMyMNrAvSeG1j4f%2Berw7O9MSSYXuNwA%2FRA%2FUVp9ldVV1n9x9H28dxevN09PqPo79slotu6kJKo1%2Bs3RQXwUzjYgwrvyhlmYoro1lNhcYaekw3m4ej10dv755W26OPJ0emtb50rkRnc8iJcDVsfLu9l1HGmJCi6UxwxsZsYuJx4OTuaX3%2FeIvBjG%2FG7epnl0obuof3J43zpvX54f2r5vF%2BSz%2BZ5erqVfM0jTfAbXQu23DSzOhVs5vk4meDz3YsluJdSt6a4oJPn1k6%2B7Yr32dprM36XYdsVzktSkrdIiR7ubh0MSySTc6a5Tp2KXytfp9n3poY2yiKc7bNubzMvjU2JWaf0Quac9GGYFIXvXEduI2fbK4KmccS3LjOi%2BV6HBehTBDSLN0iTEu%2FtuM45nH8jJDPrvO8kNEX7EskIX2K2KzuRSG7rkvFkpCCXhDSZ59ztzfNF4WczORsnFaL5WQhmi%2FT4jLESzjOpQvTevJh%2FbmdfHad54X0XWyd2GF0pn3JDC3cxBZ30ih4QcCu%2BOhyl2yQ5%2BfWhasGXhcaa2MMf27lkDBbMl3OzsOKg%2F%2Fc0r6NRZYuvk3B%2Fbmlo4W3I8y4mAssK720qd7HvL6M68UyjmERrF8txtUqL6LzIU4m2DIuP7Opzy3zknca11o2XNh5a9PLhptiQbgkwxX0gojJlGjdPqo%2BG3lL6TBJ51O2HQZ%2FI38JVhi8%2FVouScm%2Fb5ar%2B39st4%2Bby7fb1fK3%2B7eP04rYGPXd5v4OjFxvtw9Pr09PrzYP1x%2Fa6f4WaP10CrBaflhsN7eL8W65WD1upoX%2Fxf16d%2FvbP3%2F59eL3D0cnR0%2BPUzUBxm9G0%2B7n4RenBx%2FpKrcP4e%2FTZnm2vOzcKppx6qb1yl%2Bm1XIyl5d2WkJt0EqyET%2BvVpfeu2UpNv%2F1ER%2FtpiA9v9ssr1Zb5NR%2F7eV6WdYdz8txO77e3I5Xq9On36%2F%2B9v725uQnPwE2gHdPZ8ckFGR69%2B5d%2B863949Xpw6plAYfy5DX7282d2%2BeG2iR9E751%2BMG7G2vz45tyNjXaHZ%2F7ri5Xm2urrdnxyW3Job9T%2Fb4J78CMw%2Fj9rpZb25uzo7fXW%2B2q%2BPmaft4%2F2Z1dnx5gzLiuFmeHZ8nfNu4ru1i7yjQNYgj2fcefpz0fYCZdPMYuLprEGCMU4xIXlJvU2vDAcYYb3uj3%2B2XuTgvtrVd0%2BFZ%2BgoPiktrc5MzQkQTu9a6IXe0frI0RYYxxyYFcDok%2FJqahGBXmpj4PeG%2BwgNmC%2FOYLtDM8i3UmYvOGWLrDa1lyhAgt2EebKMYXLm%2BwjoGT5f0Ww9Zvc7pbevntRx2JisPLpBGwVsXBPcVJlmcYpKxM%2FxtUNlpTqc6wVouqq6IB9NUOrw4x%2FZhUlFuhQfBEVHFEnMRyo1twPvMynWtSbMSCfcVHrCtpDgeA%2BbAqHyboUqrcwqWdSusY4IlFdC3ufFdWyLN6SAMb6cognFfYeVNxgjP8q3IInNWMl6cW%2FzunJqcxYD4XwRmzG5QIgbSG6o05gHKDYOlnTQkanL4xbUZRo05zWCxH%2FAOsSSLGi1aNbeaGKy14HAeZuAPhWYLabCI0caRrJBbCbATc%2F8coVybzKZQExhWwI4Q5CCxoUVzRyJECGeJX90t4q0k3dKaYHnKvPEkqck0gY%2BDKhHaiZhaCNZb%2FxwhPq0R55RCjkIEOiCKsNsPD4ikR3iB6LlBSj760t7l48kPHZNhmdmF7xSIA0x7jqAwSbfDvjXYW4pU2ME2JsUooDsdYvQ%2FArgptCM%2B9HgWp7iaGj4SEN9RI8LOe8QVaxTz0AYrpzAAW0%2FYctyCr3gqKQdgCxwpvlP0h0OGtnMDMAIEjKjAWPlJBgUm9ngARgzDeERNGGKyNE8wg2MePMwZ7BqyOeahr3HFMyKcI6cSn4A3UZglTBFlTlNN5oDpCnkuQqgwgSkEI6HZ3FdYx4RA8YkiVm4Cpbgh4ysE%2BUIzU1j2FGmCHRKyMYK8p%2FSB%2BBAN4eL7GudCQsrOYB4771YsnEoQ2H0vqaHGMkZkrLHmTgTe7CgfQIAay8c17qg3UwUxHpJHiBNMU0NBEJJyD6mpgZE4LCmYQ3GFdQxcPnDGp9322A2a03ayblPxAzNzkQIUMqxDUFOC5SlYNB9gjW8y6IDAZK5D5AvE8wERKFBjGLi2hwTpy83DDohDZoj4lsD1JYcCP3bgQtFiTP5%2F3Pqfxq2vt7QvOpn5sS3NQw%2FFur1p%2Be9ldQgcYe5PGIspcTif%2BxC2Ot45wgjqjFH6UCDHLiaq5OjbQEUkvUfpJklAcYY9959iDeRtyTWcK02u9oUzS3aEssraPjhKGYwHwo7iJc0LK7NSbQ06Hrx2VN5m7kRiR%2B%2Bpf4lUsSmG%2Feb%2BU1xrRFOGNWyRGnD9nv%2BcuCMRr0zUtSi2ZOuafAJVwoLROWWrrolkGIPiegFkqEIOLr6JtIqMoNhQshQ%2FRTZBvSp%2BCkz%2By36KtIqCW%2FwU2Cf1U5TT4o94Umnt1E8rTGNMUD8FK8GrnybmQfwUmKyAfbPGFc8UaJDxdnkIsVKE3hNzE8GENhFBWippIrCloeyaiEz1vDYRCIrdrjtwbIFzE7EnUMJLNy3DYHLSfXETkSjFzU0EE3Pf8CmhXFu%2FtwwltIkQYm4iWIHaRMhZwNxEJK5etInYE5AnMKPaRCTSvTYRokRtIoTQvuEZYrZUlEkYjn2APSuB2gvjEEGo9z0goFJUaLZE3XHYry3cPLEpDDZLoSFazG7XvvU1MVg%2BEJiHgXs0s3gV8mAjF0xcKOAXQ6VdJIsfbJeoIqRCyzQzYaneqol5mJwU0AQ561GBhWKM07MCC%2FOjCi%2FT4YKFWIWzFzzBUi1ahOhrAsJlSkU6DGJ3fLwSPSsERZrjJ0IySssGe5bB2yGRuBn3LGkJ3HVDLR7fWM6WKHS9KNFQD46QSRwYL0RfE6xE8jIZBnko8EYKdSQpPE%2BikxKqqoqYh9GhEemaKzTEQQsjJaeai0tLTuUbLEB%2BliQCi%2FVlzyc6YqQVwSK4tBtGAZX2NIE3NRdL8dZSaMQw7BKKzGeIA7Nk4uLcdTyrno0JoTUNipeuHBJcyffOcpV0QOgwykbxkNCpZdgBIUWvTn1AHLCjvuXE5qWGVkIXStz8HBA6rJM4XRM6d%2BHofEAcTM3Exbk3cX8g48F3F3YHjJDfz79wmTATqLjgt3LGqISWlJZP2w4IOWZ0MG07K6te9BvKri%2B6K%2FrBTyaCP6ytvtdp8fMlDx2AqTEMvPHahXvZB06KgVtEOchUnMlkK6xjAp%2B64Q1FfyRvP0hBQMerc8hEIkCa%2BxTzJdiArBQ9YWkAqA1EYZUHWFnmrl3Kq8AtRE5UjhVOnTQbYy7B%2BgrrmCjFCkXqhlvfgdpg9V%2BS2uzct8J7rdERJZ02cgPTC4brho5bjiR4cIVDZuLjXjgxN%2BfekVyoK%2BTQVzAkIifZYx2DZ2Jtd1I2oY1BAWRlXWpjysxDjSveEDA8JQPEEIqA%2FEONE01NNwDobxgPiP0wgiRLslIQuGXzIADCt%2BWUQJhOK%2FsK6xi4Mm0wxJOeyQ969Os48FT8VPjiHAYd5xPvCg%2BK%2BTqhcCcp1wmI5i7M1wmJD0H5SkACu9QBeEPvuVqo8CAlu145sNXLtyjNKZ7ynLAv6F6uE5gTvU5QzNcJFdYxUiTIt1IjyJxi17KWXCcID3JVwDWQXidUmGShTC%2FXCYk9la8TRHbxQtGJXiewrvQ6Ya%2FDi3M4hfHzdcIeD4Ll6J%2Fy9HwlgKebC0JVHGfkCg9IzjHO1wmJ8zl%2FW7jjkTkF7%2B6IZqxj9DqB%2Bxe5Esh076xXBaIIuU6osPKmVw7Ms14nsCx6nbCXkTqnss9yFh4ai2YvSxa77%2Fj8%2FhKNDqGQ1yR7KaHtqC1cttaEZC868%2Fe7cr1a9Buy1xddin%2F898f%2FAAAjkrs%3D https://madeitfor.fun/?data=eNrtWVlv3MgR%2FiuEgo3WiIbqi30YEI...
gameofcode 7y ago
This is brilliant - I'm amazed how humble you are in calling it a stupid website. I've always wanted to do "something" with video development, just because it's always been a massive black hole for me. Any tips?
- dylan604 7y ago
  What aspect do you want to get into? Making plugins for post production? Developing new codecs? Streaming? Broadcast? Apps? There's lots of work doing less sexy things like building workflows for transforming existing video libraries to something to use in various OTT platforms. Think B&W films or older TV programs. Understanding old video formats and how to prep them for modern platforms is something that not everyone does well. Of course that would require deep dive into the history of Film->Video. There's also lots of options on developing supporting software to do non-sexy things like storing descriptive metadata and making it available. Transforming closed captions, subtitles and other ancillary file formats that support video.
- TrevorSundberg 7y ago
  I would definitely recommend trying something with JavaScript/HMTL5 videos. Doing anything native has always been decently complicated and there's a lot of setup work involved. If you want to get your toes wet, writing basic filters is fun :)
colecut 7y ago
This is what the internet needs more of
transitivebs 7y ago
This is really awesome -- was interesting to see FFmpeg being used fully client-side. I had previously used this ffmpeg WASM port (https://github.com/Kagami/ffmpeg.js https://github.com/Kagami/ffmpeg.js) and hadn't seen the one you're using before (https://github.com/ffmpegjs/ffmpeg.js https://github.com/ffmpegjs/ffmpeg.js). Any thoughts on their pros & cons? Also, I'm the maintainer of the awesome-ffmpeg list - mind if I add this to there?
- TrevorSundberg 7y ago
  Absolutely, feel free to add it! Overall ffmpegjs/ffmpeg.js has been really nice. I would honestly prefer less API: they wrapped everything into a worker and made their own API calls, but I'd prefer the raw Emscripten filesystem and no worker/proxying. Then maybe a second library that wraps it up would be nice for ease of use. I ran into one issue where the memory being used by ffmpeg was too great for running on an Android Pixel 3a (malloc failed). I split up the video encoding into 30 frame chunks. I don't think this was related to ffmpegjs/ffmpeg.js however.
  - sitkack 7y ago
    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, for any feedback all I would have are nits. Well done, you have made my Friday.
Rinum 7y ago
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.
- TrevorSundberg 7y ago
  Good suggestion. What would you think about a marker that sits above the timeline that you can drag?
  - Rinum 7y ago
    That sounds perfect. Would it be on both sides of the time segment (2 handles)?
    - TrevorSundberg 7y ago
      Indeed, I made a bug to track it for myself: https://github.com/TrevorSundberg/madeitforfun/issues/2 https://github.com/TrevorSundberg/madeitforfun/issues/2
jernoble 7y ago
This is really cool! It’d be even better if you added “playsinline” attributes to your video elements so your videos didn’t play in fullscreen on iPhones.
- TrevorSundberg 7y ago
  Will do!
- TrevorSundberg 7y ago
  Done! I took a bit of a shotgun approach because I don't have an iOS device to test, and the documentation on playsinline seems lacking (or at least non-standard). Hope that works!
gediz 7y ago
Great job. Buttery smooth even on a low end mobile device.
Aaronstotle 7y ago
This is perfect for me, I took a funny video last night with my phone and I can edit it with this site and save it for later. Great job!
TrevorSundberg 7y ago
The original inspiration for this was a very old video from 2007, the 300 PG version: https://www.youtube.com/watch?v=gNqiSkd1M6k https://www.youtube.com/watch?v=gNqiSkd1M6k I had originally named this project Cake Town as an homage to a scene in that video, however the domain cake.town was taken so I chose https://madeitfor.fun/ https://madeitfor.fun/ instead :) The goal was to be able to animate images and gifs over a video with controls that worked easily on both mobile and desktop, all on a website. I started to realize that with more things being compiled to WebAssembly, I could take advantage of video encoding directly on the page (no server encoding required). The web is truly a powerful platform!
op03 7y ago
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://vimeo.com/hawkeyeinnovations https://vimeo.com/hawkeyeinnovations - in the browser. What would it take? Edit - better example clip - https://vimeo.com/402159917 https://vimeo.com/402159917
- TrevorSundberg 7y ago
  It could certainly be adapted to work on live streams, but I'm not sure what kind of setup they have to track the ball in that example. Seems decently complicated!
  - op03 7y ago
    Yup looks complicated. I think they are using multiple cameras to work things out. Who knows, one day maybe the browser will handle multiple vid feeds and the compute. Atleast thats what your site made me imagine.
KaoruAoiShiho 7y ago
This is actually a little bit mindblowing. What are some other WASM ports for a new gen of client side apps?
- db48x 7y ago
  https://archive.org/details/sg_Sonic_the_Hedgehog_Rev_1_1991_Sega_JP-KR_en https://archive.org/details/sg_Sonic_the_Hedgehog_Rev_1_1991...
gitgud 7y ago
This is incredible. The humble little meteor icon does motion-tracking! How is that even possible in the browser?!
superasn 7y ago
This is anything but stupid. Live motion tracking, ffmpeg browser encoding, plus it's open source - so a great resource to learn! What more can you ask for? It's incredible work. Keep it up!
greggman3 7y ago
Be careful how you use ffmpeg. ffmpeg is LGPLed. you can call it like a DLL. You can not run some compiler/transpiler on top of it that combines it with other non GPLable code. AFAICT you must keep the LGPLed code a separate file and connect at runtime. Which means sticking in npm and running a standard bundler over it so it gets all put into a single file would either make your code illegal or require you to also release your app as LGPL (assuming the 650 other deps you probably pulled in were LGPL compatible)
- TrevorSundberg 7y ago
  This is a good point, actually this might be what ffmpeg.js is already doing. I was wondering why they went out of the way to run the worker and pull ffmpeg code from unpkg.com, but I suppose that makes sense now! Thanks for the tip, I'm certainly no legal expert!
  - FraKtus 7y ago
    If you use the GPL license what codec are you using when encoding? If I remember right the H264 encoder is not in the GPL version.
    - TrevorSundberg 7y ago
      I am using H264, but I'm now considering other options!
- abetusk 7y ago
  This is the standard for GPL licenses and your focus on this particular aspect of the license amounts to FUD. LGPL, GPL and many other copyleft licenses are in common usage across the ecosystem, including the Linux kernel. From Wikipedia[1]: "... The license allows developers and companies to use and integrate a software component released under the LGPL into their own (even proprietary) software without being required by the terms of a strong copyleft license to release the source code of their own components. ... " " ... For proprietary software, code under the LGPL is usually used in the form of a shared library, so that there is a clear separation between the proprietary and LGPL components. ..." [1] https://en.wikipedia.org/wiki/GNU_Lesser_General_Public_License https://en.wikipedia.org/wiki/GNU_Lesser_General_Public_Lice...
blululu 7y ago
This is super cool. Very impressive project. I had not realized ffmpeg could run client side. This opens up some really interesting possibilities for media editing and sharing (imagine if video sharing platforms enabled people to edit/annotate videos in the browser before publishing)
- TrevorSundberg 7y ago
  For sure! Although this project is using a worker for ffmpeg, currently it only runs one which means it's like you're running encoding on a single core machine, but with even more JavaScript overhead. You could spin up simultaneous workers but you'd have to figure out how to break up what you're doing into separable parts. The file system is not shared between workers so you'd need to either send all the data back over or do something clever. This would be very doable, but I don't want to overload the browser especially on mobile. Looking forward to when web threads are safe again... SharedArrayBuffer ;)
ksec 7y ago
Is this working on Safari? I got nothing other than a Side Bar and Black Screen
- TrevorSundberg 7y ago
  I haven't tested in Safari since I don't own any Apple devices :( However, I'll happily take fixes for it!
atum47 7y ago
Really cool indeed. Congratulations.
limograf 7y ago
Wow this is absolutely fantastic. I'd really love to read a walk through of how you built this.
s369610 7y ago
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] https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/captureStream https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasE... [2] https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Recording_API https://developer.mozilla.org/en-US/docs/Web/API/MediaStream...
- TrevorSundberg 7y ago
  Great suggestion! I could use this with requestFrame()! https://developer.mozilla.org/en-US/docs/Web/API/CanvasCaptureMediaStreamTrack/requestFrame https://developer.mozilla.org/en-US/docs/Web/API/CanvasCaptu... I think I will make this change because the ffmpeg legality seems hairy. Thank you!

Try the "track motion" feature, mind blowing doing that in the browser.

dang 7y ago

You should add a comment to the thread giving the backstory of how you came to work on this, and explaining what's different about it. That tends to seed discussion in a good direction. Other Show HN tips here: https://news.ycombinator.com/item?id=22336638 https://news.ycombinator.com/item?id=22336638

TrevorSundberg 7y ago
Thanks for the tip, I'll try and write something up :)
- dang 7y ago
  Looks like you did well!

netgusto 7y ago

Very impressed by the motion tracking! I was able to track the head of the bunny with an object with 2 clicks and withing 20s. Shared anim: https://madeitfor.fun/?data=eNq9XF2PVLkR%2FSutiVazq4Cxy3aVjcRD3puHVt6I8tDMDDDaAUZM70K02v%2BeU%2F7ouZ0QXyKPelkhm%2Fb1ubbLVaeq7PvHxeHL%2FurXh4uXf1z85fb6%2BdvI6crvw%2FMrIX4e6Mo%2B39%2Fs%2Bbnsb66I9%2FEqe6tty1949NPDu89fPl68rOW7%2FeHmZy%2FOiLv%2F9mzjOZrE8f7bL5svnw%2F6m72%2Bef%2FL5uFqf4eyCTEyPdu0wi%2BbYx9vfrZ46OLPZxfWWMsk0XrhaNlSsPl80I5itMQ%2BxkCOE6cRdDBZAYEt1uCZWeyUKHq8gg3JZRpCZ5N8KNApGBdpEpqis9b7lNq4R9jJG5e8YgdrMfkyie2dF%2FweJGbr2cURdDZOyrCDI5Odn4V%2BFDH2KfL%2FhkYLExN1aOE0CR18JgzaNng5IzQE3FpslTLmGNxo2J5NFCmClpNJeRr7uM4hREm0hs38dNhFq2TMYVv0AXR0JtcpV3EP08gZOsWxqEaRMFprtsbbqlM4mRBmJVwWCkXEuRE09GeqOiVic9nZQScXhSlQ4JwkRzontKToAicvPmQ%2F3FywHy7VCffB%2BOgmoRfyVZTKCDqYmOuoXYSoT44aGjxYF7FtpEz5EJoNcZFvyih6moVmFvzJ2NJQ5xRH0AIVVkZNyRqatB7OUY4uWSFK2UUeIQOOpRgukqdAzkScQlDh1jc4H3LhKFZsm%2BzRzoL2ijkXZIbtsJMcxXknUCM2BV%2F21giZjcRUkCOWnPIscrKRsKkb9shwZHTl6qBjMClOKlGYKk8Cpln0mJPRqHPAJEuF9oZ5FnpJT0DN%2FAg6GwhkH7VNsxMOhSQSgtSNxXRGaIZCJOyYarRGWwtuAghK3VrsYKmnoXOgRwmPI%2BRgKB03Nc%2BSUSdRLElIxWLFEQWHUJgkdb6xwfO0gIMdiGQJCqzkbAANS5Wqv2V1U%2FIs8onLI6P5pmg4VirqoESnVVkOERYoZG7b%2BnzQSr8tVErse3sA7aPxrpJgJ6p%2FZ6GPZqNO%2BwA6kPFUSbDLZpYjkPM%2B4n%2Fb2P9o0EGUw3Vm5NM0dGZKYKONJwyQI%2Fh3tZcebhfPxhOIFs4OZn2ETCaGSkShWSRN7ixwOodOYDKrKqNzQqcQPQho29cjTRY1mFA1WRYTZpEX5kpJ%2BPmAS%2FwEirjtrDBGpli5d4KcZ5mFFpIMVlLiVUMNinV2jRdJBGmfRX4MkxWPY7ShM6Y4Vittq9czhwzvPINrNOovZ4QWdhak37aBj5AZRr2KWIBrmWaRE3lZODsjZDi1rnJvEgMTO4sMRYIGsXtZI3sVTJYqY06dpElqQjlkbNDkVjc0JXCi4le6lPEOk2M%2BCZtAhQ6hNZ5XkFlMpmlkCZJT5AZ9PuASiLWJmls5UiVOY0uF%2FDrdYLMBaA9KtJzxsa8RqoXGSxq2eRaZvQWrTY0SjTzaDNe7sBJsLpNmZxt4YIEpNH4wCkdK7uEaKG306mahj4H%2BtXCkGM9FkeQEUzVrqzxeHcYx5ho98OeEji5YuLRxPS4X2QgVi5HJwLTOzvYj8Vzzo0My0RXvKlsDR3TSYngGJQG6bWs9ipkEX%2B3Esw3EHHI5Cw1fFgw6cWO%2BI2QM1Vdk7CpI5CzySU5nFBD0yeTKAYGsEfpJ5EQwVJZdjb%2FmcyJnyDboZB26j2sZnSJjYJ%2Feza7zI%2Bct2nsEHHqkJjGMh0wiB%2BvYsuce%2Fx0hg3FXYPVu7DSwpASD0XXoSHHDQqF1gfYGFn3SWAUXjr4NJHy0q7yFhaoSRgbyNgmMtfWOucOfEZjFMsS7belRAJQ0O1yAneE4q0ewdvmR%2Fvk1YM4dWWbTVzU1nDm2wMFIbYPeB0cN2qZZug246MnlnsMaIUf0VNfZGok0qcLCMovDw7wweezi1JCjnU2nBNCwRMTcdlY8IzQHsAN4OC1HOkImEAlqyORm0ykBu8ovQq8jZBWs0JCdZ5pF5mwF27NtrBGyngUqOxoEGBM0K2LgITDRuSdIR4rbYUtb36GnvQz4DiEu4q4j5GQoUEcOeTIyFTKMLiWo0LXQ%2FlMj12MmNrcE6QhYDNe4lAI78rPA3YUt4j3aVY7NETfMEn14GBF%2BpNiqyfIYlyS2PQWaPItMNnnvc0%2BOjpCjibmrbe9mYwaRFtng8UkLF2qIohqM6bgneKdPPoirmVE6JzJsc%2BLcQ81jZM%2FdOtMsMYiPnrNmCIcCpoaqk6FgwyTnjZHw9iK0ekZPkZ10RpKnA4DYUdDbObe06HDMGg6ixjx9UWVTyP9xVG2MbENqyCJ%2BVsCwpzzcDL9%2BsuTJkQVeO%2BWeFB0hOxObC6sr7mYVSfJxoUd4jGyPyOxnI%2FrYSAn7SoZCrZsvNRfS5jg72MzOB7Y9FzpGttU2Jj0uNhsSOjlNAqdlfOxUGi42oMzigoIEFq50058N14EA5Wx7GnSMW49Up2hcnD3NzeDoTVGXRV4B9umIHGeHXI65ZpG20GNk20Jv8OZ4lgAxJjiBi9SI0JAA2QTCxQ2ZZRr5eJC6ivYYOfXJhts3u8wBgwYJSs1KnA84EjsbbfebV4BrxkSRp4NQ%2FBj6WksfnCBnbyc9Crjojm2UvJoksnogrccaXTmbNgUsDo56sj0BOkbmmBsy%2FI9Z4OVpyxU74fqAwfxmpQuaN2Gd3eoBpacGLiflnV1PfiowU2qBbOJZ6rMIuKnz6McEpATOC3KydpLiiqXknINOWMuuK7JIzxtovGoWOcMuB%2FsDyU93PCOUskaPJpUI%2BOJisod3MZxewEgtKRZm7bJAbXmGS7F%2BgvmpgTWViIn7gb0cDJhDAYbz5meNI%2BBcO6KzctBRowPSM5%2FsJt1VEBBwCgHtq3RzHAGyvrC%2B7PU5mUVmuELWtcSnjINeLSuVg8lpepVP79uMg5vtdGWOZnY3wTFIYlNcPbX8tLCsP0I%2B1xOeRHoLqsCy4aJJppDFHS%2F3KL8eh%2BxT28UCN2R2LwlUNXlMdlni4ZC5ntQoBxj0bPckMtY2Cff7Liv5KKmpGSDDlZ9FzvYx5wg2MM60NlfGWVejMXPIDMec%2ByHx8wHr8WzMdE%2B3hnE%2BndohLCvKFGeR8%2FFG0fisckV2R%2BTZs8r1vl7umYrhbMOPqHFN5zSlPhmUAPOxPtGREoyzy430QcvW4hzy8iz8MMYHPeLqdnYUYBxnJcwH8Gs6bq0zIoPvsYcntZrKBxsIVI%2FaEQz0bM4xHYP1ayeVldtTO8xJaV5rpwgK5GN2qyeVQT1M9G2yoUZn420pZqiv5H4g22m5X6JyXo%2F0zIr28YL36tkvG%2BGppo48%2FRGFBMWF14e%2FXzQYnRNZ7%2F3ClVpPdtpQdbUiuyeQbQj3D108UGAfQgem2dQfQC0Hd7y1NkZ29QiBIvtZeo9J9h64P5DuhEmuYUanx8Nnr0%2Bd3KgZX3%2B1%2Bm2LNtlcb2bOIWfIdchx9bbakyM7dhzgvLYdPfhIhh6Q5iNyng33ZaLjvUDMOo%2BQk%2BbeK7KY6cNI6tO4AA64FmfE65kc6ml0D3Mxq7QzHItsLa1nO3XI3uaOnGfzrP%2FH1wNsucLYkWe3VJCIHrOsn1F%2BWtzoQTt9v9gy1JveUKYuXFEmQ7r5MfumimSsNkPmDjzrWUCaPUds0vXjyTYZ2%2FU119tqU8gCR8YyrSTvk6ejpnbTkAubOP7iCpHhxB3ZyqzWAhHIVo63Ss6IDK8R1ItappPGJ6KFm9rS4%2FdpFvmY81MTEc%2BD%2FCewf7%2B9vvn8t8Phy%2B3b3w4313%2F%2F%2FNuXqxuF37d%2Fu%2F38CS9w8ezi4csVCve%2Fvb27vXpxHePb6%2Bt36RpuJ7iL5Jvr%2FI6tHjZxIe%2FT84f9x%2Fu7G%2FPxPugIv95ev785PFy8%2FMdjxz8Adr0%2F7F%2Fefty%2Fv3nx8Pv7v377ePfsJ3%2BF4gbFTw%2BvLj8cDvcvX7z4%2BvWr%2BerN5y%2FvX5C1Vhtf1iYvv93dfvr1ew0dzOuL8uvlBq93%2BPDq0pM6d3S5%2BXBz%2B%2F7D4dWlXl%2FR%2FGT%2Fz13%2B5G%2FwBvf7w4fNu9u7u1eXXz%2FcHm4uNw%2BHL59%2FvXl1%2BfZuf4UOr19dvg6aRNqQfh5mW8sCmy5bn7FqJ2X9cE7easyaT8q1Df5Ky2LtsbZYloMAo%2FW4LC%2FfoJTfvBa907jxGnnYLso7vawktayHUhLK2sUusQmyCfplJc1eoH2IYFS7rLf8NqHA1HKMxqbtd8qwsHbLEFiu5R1jw7oN61HkDYshlPUa4E705PhGSJ8S1Z21vF2U9T1TbG3wnoyWGjnaJQwvbET5R82ybDiDU2z%2Fu6yXaEXbs1OUUMYrfiN6fb33L6XnCLpcy9tFWd%2FTh9aG9bqotgy8Y8wS2sDkYWE1o1jG5XdRr2xsMOoQNrWMvzNvF%2BXWJmIs5Vm01Ov0WfvEOwcyMZYZc5ugX%2B7ZsV4ua%2Bu1WMe6wFYfSGG7KOsDIrWsk%2B6CLqSwLkZEpyBgsqkLE3WptsuyntjhWt6Vb9No%2B8x6VsxzEwhMnPOt%2FwXum9fwdHRZobApblulyrRTup1OKyfNSgU9UNCJbT%2FVSnvIpTIBy8pJs96DaChWp5rtdlnZtYrOSNo4zHAuEhj8DtwdKqAtM1wwbVZlYVnZgevq1LVmATOVVBx83DnsIK14nUhlIVgk1rti%2BAX7o093q7R3W1R6s6CXjTbaW%2BK2mOA%2FKl51%2BUHF2oY%2BlnYOO82l3oBJRTLowWwMizEl2g9k2On74BdWSejz4kAVN8tJwvyFKpj1HReVXatU4dbX8rQp30ArE2PbZJb5y75WtstKeVPh3kzF3fYO0Cn53nWttDdYVHqzqJmN3kHQT630rjFUKC8FTa2yXVbwohCf2JthCKrYagdtpLXrxbDfvCZd3Nw0bKtUMSS9uOROK1W1k34Bhk8rrZnV2NFppXVdm51UqopvXZ9UTl6naXzKmMBjd7XSgKDcc9%2BMpFqHNuAYVCvYzaWy04raBgiJdqo3eVWWYii%2FCGZbv6mz6RU9j779XqXj%2BKJtl5X2blg76kaLoKyrAnWuVHKolZ1WMAkQY2ggrWBtIAIQ%2Bv6MXroov8AiFD1cfoF4xbLQvQLFl7bfq5xMVZtF72L7dw%2BbS1ZRIuys1SsHx4o82v3jA3jWavasKIK0XVZ2vVIMnz6uo9QTbTvtmMqQVc07%2FTRArWyXlZ0vX9Q8NgvlmdqBnhlPvetWqW%2BwqByb6Xmu3gHWBpa%2FdQ3Fhm3RQEtlu6z0F23N6hBaB21wtevFsN80LvVCyVQrgrehpITx8K97EMML%2FAPI4O01ij%2F6vds%2F%2F%2FnnvwEVPQDr https://madeitfor.fun/?data=eNq9XF2PVLkR%2FSutiVazq4Cxy3aVjc...

TrevorSundberg 7y ago
Haha thanks for sharing, it's the first time I've seen anyone use it and share the link so I'm pretty excited!

dajomu 7y ago

I really want to think of something to use this for now, it's really good!

dajomu 7y ago
https://madeitfor.fun/?data=eNrtWVlv3MgR%2FiuEgo3WiIbqi30YEIK8BhR2iX1TkAeKMyMNrAvSeG1j4f%2Berw7O9MSSYXuNwA%2FRA%2FUVp9ldVV1n9x9H28dxevN09PqPo79slotu6kJKo1%2Bs3RQXwUzjYgwrvyhlmYoro1lNhcYaekw3m4ej10dv755W26OPJ0emtb50rkRnc8iJcDVsfLu9l1HGmJCi6UxwxsZsYuJx4OTuaX3%2FeIvBjG%2FG7epnl0obuof3J43zpvX54f2r5vF%2BSz%2BZ5erqVfM0jTfAbXQu23DSzOhVs5vk4meDz3YsluJdSt6a4oJPn1k6%2B7Yr32dprM36XYdsVzktSkrdIiR7ubh0MSySTc6a5Tp2KXytfp9n3poY2yiKc7bNubzMvjU2JWaf0Quac9GGYFIXvXEduI2fbK4KmccS3LjOi%2BV6HBehTBDSLN0iTEu%2FtuM45nH8jJDPrvO8kNEX7EskIX2K2KzuRSG7rkvFkpCCXhDSZ59ztzfNF4WczORsnFaL5WQhmi%2FT4jLESzjOpQvTevJh%2FbmdfHad54X0XWyd2GF0pn3JDC3cxBZ30ih4QcCu%2BOhyl2yQ5%2BfWhasGXhcaa2MMf27lkDBbMl3OzsOKg%2F%2Fc0r6NRZYuvk3B%2Fbmlo4W3I8y4mAssK720qd7HvL6M68UyjmERrF8txtUqL6LzIU4m2DIuP7Opzy3zknca11o2XNh5a9PLhptiQbgkwxX0gojJlGjdPqo%2BG3lL6TBJ51O2HQZ%2FI38JVhi8%2FVouScm%2Fb5ar%2B39st4%2Bby7fb1fK3%2B7eP04rYGPXd5v4OjFxvtw9Pr09PrzYP1x%2Fa6f4WaP10CrBaflhsN7eL8W65WD1upoX%2Fxf16d%2FvbP3%2F59eL3D0cnR0%2BPUzUBxm9G0%2B7n4RenBx%2FpKrcP4e%2FTZnm2vOzcKppx6qb1yl%2Bm1XIyl5d2WkJt0EqyET%2BvVpfeu2UpNv%2F1ER%2FtpiA9v9ssr1Zb5NR%2F7eV6WdYdz8txO77e3I5Xq9On36%2F%2B9v725uQnPwE2gHdPZ8ckFGR69%2B5d%2B863949Xpw6plAYfy5DX7282d2%2BeG2iR9E751%2BMG7G2vz45tyNjXaHZ%2F7ri5Xm2urrdnxyW3Job9T%2Fb4J78CMw%2Fj9rpZb25uzo7fXW%2B2q%2BPmaft4%2F2Z1dnx5gzLiuFmeHZ8nfNu4ru1i7yjQNYgj2fcefpz0fYCZdPMYuLprEGCMU4xIXlJvU2vDAcYYb3uj3%2B2XuTgvtrVd0%2BFZ%2BgoPiktrc5MzQkQTu9a6IXe0frI0RYYxxyYFcDok%2FJqahGBXmpj4PeG%2BwgNmC%2FOYLtDM8i3UmYvOGWLrDa1lyhAgt2EebKMYXLm%2BwjoGT5f0Ww9Zvc7pbevntRx2JisPLpBGwVsXBPcVJlmcYpKxM%2FxtUNlpTqc6wVouqq6IB9NUOrw4x%2FZhUlFuhQfBEVHFEnMRyo1twPvMynWtSbMSCfcVHrCtpDgeA%2BbAqHyboUqrcwqWdSusY4IlFdC3ufFdWyLN6SAMb6cognFfYeVNxgjP8q3IInNWMl6cW%2FzunJqcxYD4XwRmzG5QIgbSG6o05gHKDYOlnTQkanL4xbUZRo05zWCxH%2FAOsSSLGi1aNbeaGKy14HAeZuAPhWYLabCI0caRrJBbCbATc%2F8coVybzKZQExhWwI4Q5CCxoUVzRyJECGeJX90t4q0k3dKaYHnKvPEkqck0gY%2BDKhHaiZhaCNZb%2FxwhPq0R55RCjkIEOiCKsNsPD4ikR3iB6LlBSj760t7l48kPHZNhmdmF7xSIA0x7jqAwSbfDvjXYW4pU2ME2JsUooDsdYvQ%2FArgptCM%2B9HgWp7iaGj4SEN9RI8LOe8QVaxTz0AYrpzAAW0%2FYctyCr3gqKQdgCxwpvlP0h0OGtnMDMAIEjKjAWPlJBgUm9ngARgzDeERNGGKyNE8wg2MePMwZ7BqyOeahr3HFMyKcI6cSn4A3UZglTBFlTlNN5oDpCnkuQqgwgSkEI6HZ3FdYx4RA8YkiVm4Cpbgh4ysE%2BUIzU1j2FGmCHRKyMYK8p%2FSB%2BBAN4eL7GudCQsrOYB4771YsnEoQ2H0vqaHGMkZkrLHmTgTe7CgfQIAay8c17qg3UwUxHpJHiBNMU0NBEJJyD6mpgZE4LCmYQ3GFdQxcPnDGp9322A2a03ayblPxAzNzkQIUMqxDUFOC5SlYNB9gjW8y6IDAZK5D5AvE8wERKFBjGLi2hwTpy83DDohDZoj4lsD1JYcCP3bgQtFiTP5%2F3Pqfxq2vt7QvOpn5sS3NQw%2FFur1p%2Be9ldQgcYe5PGIspcTif%2BxC2Ot45wgjqjFH6UCDHLiaq5OjbQEUkvUfpJklAcYY9959iDeRtyTWcK02u9oUzS3aEssraPjhKGYwHwo7iJc0LK7NSbQ06Hrx2VN5m7kRiR%2B%2Bpf4lUsSmG%2Feb%2BU1xrRFOGNWyRGnD9nv%2BcuCMRr0zUtSi2ZOuafAJVwoLROWWrrolkGIPiegFkqEIOLr6JtIqMoNhQshQ%2FRTZBvSp%2BCkz%2By36KtIqCW%2FwU2Cf1U5TT4o94Umnt1E8rTGNMUD8FK8GrnybmQfwUmKyAfbPGFc8UaJDxdnkIsVKE3hNzE8GENhFBWippIrCloeyaiEz1vDYRCIrdrjtwbIFzE7EnUMJLNy3DYHLSfXETkSjFzU0EE3Pf8CmhXFu%2FtwwltIkQYm4iWIHaRMhZwNxEJK5etInYE5AnMKPaRCTSvTYRokRtIoTQvuEZYrZUlEkYjn2APSuB2gvjEEGo9z0goFJUaLZE3XHYry3cPLEpDDZLoSFazG7XvvU1MVg%2BEJiHgXs0s3gV8mAjF0xcKOAXQ6VdJIsfbJeoIqRCyzQzYaneqol5mJwU0AQ561GBhWKM07MCC%2FOjCi%2FT4YKFWIWzFzzBUi1ahOhrAsJlSkU6DGJ3fLwSPSsERZrjJ0IySssGe5bB2yGRuBn3LGkJ3HVDLR7fWM6WKHS9KNFQD46QSRwYL0RfE6xE8jIZBnko8EYKdSQpPE%2BikxKqqoqYh9GhEemaKzTEQQsjJaeai0tLTuUbLEB%2BliQCi%2FVlzyc6YqQVwSK4tBtGAZX2NIE3NRdL8dZSaMQw7BKKzGeIA7Nk4uLcdTyrno0JoTUNipeuHBJcyffOcpV0QOgwykbxkNCpZdgBIUWvTn1AHLCjvuXE5qWGVkIXStz8HBA6rJM4XRM6d%2BHofEAcTM3Exbk3cX8g48F3F3YHjJDfz79wmTATqLjgt3LGqISWlJZP2w4IOWZ0MG07K6te9BvKri%2B6K%2FrBTyaCP6ytvtdp8fMlDx2AqTEMvPHahXvZB06KgVtEOchUnMlkK6xjAp%2B64Q1FfyRvP0hBQMerc8hEIkCa%2BxTzJdiArBQ9YWkAqA1EYZUHWFnmrl3Kq8AtRE5UjhVOnTQbYy7B%2BgrrmCjFCkXqhlvfgdpg9V%2BS2uzct8J7rdERJZ02cgPTC4brho5bjiR4cIVDZuLjXjgxN%2BfekVyoK%2BTQVzAkIifZYx2DZ2Jtd1I2oY1BAWRlXWpjysxDjSveEDA8JQPEEIqA%2FEONE01NNwDobxgPiP0wgiRLslIQuGXzIADCt%2BWUQJhOK%2FsK6xi4Mm0wxJOeyQ969Os48FT8VPjiHAYd5xPvCg%2BK%2BTqhcCcp1wmI5i7M1wmJD0H5SkACu9QBeEPvuVqo8CAlu145sNXLtyjNKZ7ynLAv6F6uE5gTvU5QzNcJFdYxUiTIt1IjyJxi17KWXCcID3JVwDWQXidUmGShTC%2FXCYk9la8TRHbxQtGJXiewrvQ6Ya%2FDi3M4hfHzdcIeD4Ll6J%2Fy9HwlgKebC0JVHGfkCg9IzjHO1wmJ8zl%2FW7jjkTkF7%2B6IZqxj9DqB%2Bxe5Esh076xXBaIIuU6osPKmVw7Ms14nsCx6nbCXkTqnss9yFh4ai2YvSxa77%2Fj8%2FhKNDqGQ1yR7KaHtqC1cttaEZC868%2Fe7cr1a9Buy1xddin%2F898f%2FAAAjkrs%3D https://madeitfor.fun/?data=eNrtWVlv3MgR%2FiuEgo3WiIbqi30YEI...

gameofcode 7y ago

This is brilliant - I'm amazed how humble you are in calling it a stupid website. I've always wanted to do "something" with video development, just because it's always been a massive black hole for me. Any tips?

dylan604 7y ago
What aspect do you want to get into? Making plugins for post production? Developing new codecs? Streaming? Broadcast? Apps? There's lots of work doing less sexy things like building workflows for transforming existing video libraries to something to use in various OTT platforms. Think B&W films or older TV programs. Understanding old video formats and how to prep them for modern platforms is something that not everyone does well. Of course that would require deep dive into the history of Film->Video. There's also lots of options on developing supporting software to do non-sexy things like storing descriptive metadata and making it available. Transforming closed captions, subtitles and other ancillary file formats that support video.
TrevorSundberg 7y ago
I would definitely recommend trying something with JavaScript/HMTL5 videos. Doing anything native has always been decently complicated and there's a lot of setup work involved. If you want to get your toes wet, writing basic filters is fun :)

colecut 7y ago

This is what the internet needs more of

transitivebs 7y ago

This is really awesome -- was interesting to see FFmpeg being used fully client-side. I had previously used this ffmpeg WASM port (https://github.com/Kagami/ffmpeg.js https://github.com/Kagami/ffmpeg.js) and hadn't seen the one you're using before (https://github.com/ffmpegjs/ffmpeg.js https://github.com/ffmpegjs/ffmpeg.js). Any thoughts on their pros & cons? Also, I'm the maintainer of the awesome-ffmpeg list - mind if I add this to there?

TrevorSundberg 7y ago
Absolutely, feel free to add it! Overall ffmpegjs/ffmpeg.js has been really nice. I would honestly prefer less API: they wrapped everything into a worker and made their own API calls, but I'd prefer the raw Emscripten filesystem and no worker/proxying. Then maybe a second library that wraps it up would be nice for ease of use. I ran into one issue where the memory being used by ffmpeg was too great for running on an Android Pixel 3a (malloc failed). I split up the video encoding into 30 frame chunks. I don't think this was related to ffmpegjs/ffmpeg.js however.
- sitkack 7y ago
  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, for any feedback all I would have are nits. Well done, you have made my Friday.

Rinum 7y ago

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.

TrevorSundberg 7y ago
Good suggestion. What would you think about a marker that sits above the timeline that you can drag?
- Rinum 7y ago
  That sounds perfect. Would it be on both sides of the time segment (2 handles)?
  - TrevorSundberg 7y ago
    Indeed, I made a bug to track it for myself: https://github.com/TrevorSundberg/madeitforfun/issues/2 https://github.com/TrevorSundberg/madeitforfun/issues/2

jernoble 7y ago

This is really cool! It’d be even better if you added “playsinline” attributes to your video elements so your videos didn’t play in fullscreen on iPhones.

TrevorSundberg 7y ago
Will do!
TrevorSundberg 7y ago
Done! I took a bit of a shotgun approach because I don't have an iOS device to test, and the documentation on playsinline seems lacking (or at least non-standard). Hope that works!

gediz 7y ago

Great job. Buttery smooth even on a low end mobile device.

Aaronstotle 7y ago

This is perfect for me, I took a funny video last night with my phone and I can edit it with this site and save it for later. Great job!

TrevorSundberg 7y ago

The original inspiration for this was a very old video from 2007, the 300 PG version: https://www.youtube.com/watch?v=gNqiSkd1M6k https://www.youtube.com/watch?v=gNqiSkd1M6k I had originally named this project Cake Town as an homage to a scene in that video, however the domain cake.town was taken so I chose https://madeitfor.fun/ https://madeitfor.fun/ instead :) The goal was to be able to animate images and gifs over a video with controls that worked easily on both mobile and desktop, all on a website. I started to realize that with more things being compiled to WebAssembly, I could take advantage of video encoding directly on the page (no server encoding required). The web is truly a powerful platform!

op03 7y ago

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://vimeo.com/hawkeyeinnovations https://vimeo.com/hawkeyeinnovations - in the browser. What would it take? Edit - better example clip - https://vimeo.com/402159917 https://vimeo.com/402159917

TrevorSundberg 7y ago
It could certainly be adapted to work on live streams, but I'm not sure what kind of setup they have to track the ball in that example. Seems decently complicated!
- op03 7y ago
  Yup looks complicated. I think they are using multiple cameras to work things out. Who knows, one day maybe the browser will handle multiple vid feeds and the compute. Atleast thats what your site made me imagine.

KaoruAoiShiho 7y ago

This is actually a little bit mindblowing. What are some other WASM ports for a new gen of client side apps?

db48x 7y ago
https://archive.org/details/sg_Sonic_the_Hedgehog_Rev_1_1991_Sega_JP-KR_en https://archive.org/details/sg_Sonic_the_Hedgehog_Rev_1_1991...

gitgud 7y ago

This is incredible. The humble little meteor icon does motion-tracking! How is that even possible in the browser?!

superasn 7y ago

This is anything but stupid. Live motion tracking, ffmpeg browser encoding, plus it's open source - so a great resource to learn! What more can you ask for? It's incredible work. Keep it up!

greggman3 7y ago

Be careful how you use ffmpeg. ffmpeg is LGPLed. you can call it like a DLL. You can not run some compiler/transpiler on top of it that combines it with other non GPLable code. AFAICT you must keep the LGPLed code a separate file and connect at runtime. Which means sticking in npm and running a standard bundler over it so it gets all put into a single file would either make your code illegal or require you to also release your app as LGPL (assuming the 650 other deps you probably pulled in were LGPL compatible)

TrevorSundberg 7y ago
This is a good point, actually this might be what ffmpeg.js is already doing. I was wondering why they went out of the way to run the worker and pull ffmpeg code from unpkg.com, but I suppose that makes sense now! Thanks for the tip, I'm certainly no legal expert!
- FraKtus 7y ago
  If you use the GPL license what codec are you using when encoding? If I remember right the H264 encoder is not in the GPL version.
  - TrevorSundberg 7y ago
    I am using H264, but I'm now considering other options!
abetusk 7y ago
This is the standard for GPL licenses and your focus on this particular aspect of the license amounts to FUD. LGPL, GPL and many other copyleft licenses are in common usage across the ecosystem, including the Linux kernel. From Wikipedia[1]: "... The license allows developers and companies to use and integrate a software component released under the LGPL into their own (even proprietary) software without being required by the terms of a strong copyleft license to release the source code of their own components. ... " " ... For proprietary software, code under the LGPL is usually used in the form of a shared library, so that there is a clear separation between the proprietary and LGPL components. ..." [1] https://en.wikipedia.org/wiki/GNU_Lesser_General_Public_License https://en.wikipedia.org/wiki/GNU_Lesser_General_Public_Lice...

blululu 7y ago

This is super cool. Very impressive project. I had not realized ffmpeg could run client side. This opens up some really interesting possibilities for media editing and sharing (imagine if video sharing platforms enabled people to edit/annotate videos in the browser before publishing)

TrevorSundberg 7y ago
For sure! Although this project is using a worker for ffmpeg, currently it only runs one which means it's like you're running encoding on a single core machine, but with even more JavaScript overhead. You could spin up simultaneous workers but you'd have to figure out how to break up what you're doing into separable parts. The file system is not shared between workers so you'd need to either send all the data back over or do something clever. This would be very doable, but I don't want to overload the browser especially on mobile. Looking forward to when web threads are safe again... SharedArrayBuffer ;)

ksec 7y ago

Is this working on Safari? I got nothing other than a Side Bar and Black Screen

TrevorSundberg 7y ago
I haven't tested in Safari since I don't own any Apple devices :( However, I'll happily take fixes for it!

atum47 7y ago

Really cool indeed. Congratulations.

limograf 7y ago

Wow this is absolutely fantastic. I'd really love to read a walk through of how you built this.

s369610 7y ago

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] https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/captureStream https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasE... [2] https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Recording_API https://developer.mozilla.org/en-US/docs/Web/API/MediaStream...

TrevorSundberg 7y ago
Great suggestion! I could use this with requestFrame()! https://developer.mozilla.org/en-US/docs/Web/API/CanvasCaptureMediaStreamTrack/requestFrame https://developer.mozilla.org/en-US/docs/Web/API/CanvasCaptu... I think I will make this change because the ffmpeg legality seems hairy. Thank you!