6 ms·

Show HN: Video2WebP – convert videos to animated WebP in the browser

46 points by devadvance 5y ago

aeharding 5y ago
> [...] directly in the browser. The video does not leave your local machine. It would be cool if there were a special browser badge for a website that ensured uploaded content couldn't be transmitted to the server. Something in the spirit of `Content-Security-Policy: connect-src 'none';` (not sure if that covers all edge cases though, I'm not super familiar with CSP)
- pattyj 5y ago
  i've wondered about this myself for a while maybe an html meta tag that blocks all XMLHTTPRequests until the user consents. i don't think it would even matter if it was browser-specific
  - zamadatix 5y ago
    And WebSockets and WebRTC and form submissions and so on. It'd be a whole policy for many things like gp suggests not just blocking one function. Of course that being said the policy would basically have to be "disable network" at a trigger point not just uploads as you can just as easily leak large amounts of data via triggering GETs by making img placeholders come into view or other equally tricky things that can't be distinguished from "app is just still loading".
    - aeharding 5y ago
      Even just basic hyperlinking would have to be heavily restricted. For example... 1. Cross origin hyperlinks would have to be completely disabled 2. Same-origin URLs would need all url information (query params, path, etc) to remain completely client-side. The only thing transmitted to the server would be the base domain. It's interesting to think about, at least.
      - zamadatix 5y ago
        Post restriction there is no such thing as allowing network requests (same origin or cross origin) without opening a side channel which can work around said restriction (e.g. timing). However pre restricted mode there is no reason to restrict anything be it same origin or cross origin.
        aeharding 5y ago
        Pre-restriction would have to disallow running javascript in that case. Otherwise an app could save data to localstorage, refresh the page programmatically (or wait for the user), and then transmit.
        zamadatix 5y ago
        Or rather have the browser treat the no-network session period with private window logic where the session is deleted if the no-network browsing session ends or dies (e.g. incognito puts a virtual session data container in RAM). That would even allow the app data (prior to triggering the mode) to stay cached without risking side channels with future resource loads.
        pattyj 5y ago
        The whole premise was to return to the pre-web 2.0 days but have the option for a user to enable modern web app capabilities. Which your idea would be a step towards.
    - pattyj 5y ago
      Please remind me, what extra data can be sent via img URL besides the data in the original html request?
  - dylan604 5y ago
    I think DoNotTrack shows how well webdevs will respect flag/switch/honor system type of ideas. They won't.
    - rhizome 5y ago
      I've thought that a great grassroots response to GDPR and superfluous cookie banners is for websites to start respecting DNT on their own.
      - dylan604 5y ago
        Alanis says wouldn't that be ironic.
    - pattyj 5y ago
      Unfortunately, we've learned that the hard way. Surely, though, a blocked network request never reaches the server and so it can't be used a 'flag'?
- EMM_386 5y ago
  This is a pretty wild concept, not that I disagree with it. But when you think about it, we're asking a tool originally designed to browse documents on the web, to now execute what is essentially a (safe) binary application, and not to let it connect to the internet, while inside a document in a web browser. I can't see how the future of the desktop is not going to be radically shaped by WASM, in whatever form that takes.
  - astlouis44 5y ago
    Agree 100%, next few years of webapps are going to be revolutionary. WebAssembly gaming in particular is going to disrupt Steam on PC, and the App Stores on mobile. Our startup is working on this btw
- kevincox 5y ago
  That would be very simplistic. It means that all resources you need must be inlined in the initial download. This makes it hard to balance reasonable update time and log caching, especially if you have a slowly-updating ffmpeg.wasm and a more frequently updated UI. Maybe it could add the CSP at some point after everything is loaded and then the badge appears? Of course you still want updates, how do you ensure that updates can occur without sneaking out information? Wiping all site data before downloading the new version would work but having local persistent data would be useful. Maybe all local data would be unavailable from the start of the new version fetch to until the no-network policy is applied?
- zamadatix 5y ago
  Not sure that can exist separate from just being a completely "offline mode" switch. The most naïve example being doing a bunch of GETs to www.datasucker.com/Base64EncodedDataHere.
- gecko39 5y ago
  I made a simple static site that processes user images and videos with WASM and it would be great for users to be certain that their data will not leave the browser. It seems possible to define some list of resources I plan on loading, and anything else should not be allowed.
TicklishTiger 5y ago
Talking about online animation tools ... Does anybody know a site where one can create "zoom in animations"? I mean you upload an image, select the point where the animation should zoom in and get a "fly into the image" animation.
- devadvance 5y ago
  I don't know if there's a pre-existing site that will do it, but you could do this with FFmpeg and therefore FFmpeg.wasm. A brief search [1] indicates that it would likely be about the combination of the right filters. Ostensibly, you could put those filter options into the FFmpeg.wasm demo app [2] (scroll down) and get your video out. [1] https://stackoverflow.com/questions/54547061/ffmpeg-animation-zoom-in-and-zoom-out https://stackoverflow.com/questions/54547061/ffmpeg-animatio... [2]https://ffmpegwasm.netlify.app https://ffmpegwasm.netlify.app
zamadatix 5y ago
Looks to be using https://github.com/ffmpegwasm/ffmpeg.wasm https://github.com/ffmpegwasm/ffmpeg.wasm In the future https://www.w3.org/TR/webcodecs/ https://www.w3.org/TR/webcodecs/ may allow for a native API to do this.
- nacs 5y ago
  > In the future https://www.w3.org/TR/webcodecs/ https://www.w3.org/TR/webcodecs/ may allow for a native API to do this. It may make some things this can do possible but ffmpeg has support for so many codecs and so many operations and is incredibly extensible that I doubt anything short of making ffmpeg available in the browser will give you that much power.
go_prodev 5y ago
Thanks for linking to this, I was looking for something similar today, I'll give it a crack I didn't realize that WebP supported animation. Wasn't that the purpose of WebM?
- devadvance 5y ago
  Happy to share! WebP [1] is based upon VP8 encoding. VP8 is one of the codecs for which WebM is frequently a container. Ultimately, it's similar but achieves different objectives. [1] https://en.wikipedia.org/wiki/WebP#Technology https://en.wikipedia.org/wiki/WebP#Technology
nickphx 5y ago
Excellent work, thanks for sharing. I did notice an issue where transcoding will fail if the filename chosen contains a space, the transcoding will fail with 'file not found'.
- dylan604 5y ago
  I have often been heard telling people that I'm going to remap the spacebar to an underscore on everyone's computer.

46 points by devadvance 5y ago

> [...] directly in the browser. The video does not leave your local machine. It would be cool if there were a special browser badge for a website that ensured uploaded content couldn't be transmitted to the server. Something in the spirit of `Content-Security-Policy: connect-src 'none';` (not sure if that covers all edge cases though, I'm not super familiar with CSP)

pattyj 5y ago
i've wondered about this myself for a while maybe an html meta tag that blocks all XMLHTTPRequests until the user consents. i don't think it would even matter if it was browser-specific
- zamadatix 5y ago
  And WebSockets and WebRTC and form submissions and so on. It'd be a whole policy for many things like gp suggests not just blocking one function. Of course that being said the policy would basically have to be "disable network" at a trigger point not just uploads as you can just as easily leak large amounts of data via triggering GETs by making img placeholders come into view or other equally tricky things that can't be distinguished from "app is just still loading".
  - aeharding 5y ago
    Even just basic hyperlinking would have to be heavily restricted. For example... 1. Cross origin hyperlinks would have to be completely disabled 2. Same-origin URLs would need all url information (query params, path, etc) to remain completely client-side. The only thing transmitted to the server would be the base domain. It's interesting to think about, at least.
    - zamadatix 5y ago
      Post restriction there is no such thing as allowing network requests (same origin or cross origin) without opening a side channel which can work around said restriction (e.g. timing). However pre restricted mode there is no reason to restrict anything be it same origin or cross origin.
      - aeharding 5y ago
        Pre-restriction would have to disallow running javascript in that case. Otherwise an app could save data to localstorage, refresh the page programmatically (or wait for the user), and then transmit.
        zamadatix 5y ago
        Or rather have the browser treat the no-network session period with private window logic where the session is deleted if the no-network browsing session ends or dies (e.g. incognito puts a virtual session data container in RAM). That would even allow the app data (prior to triggering the mode) to stay cached without risking side channels with future resource loads.
        pattyj 5y ago
        The whole premise was to return to the pre-web 2.0 days but have the option for a user to enable modern web app capabilities. Which your idea would be a step towards.
  - pattyj 5y ago
    Please remind me, what extra data can be sent via img URL besides the data in the original html request?
- dylan604 5y ago
  I think DoNotTrack shows how well webdevs will respect flag/switch/honor system type of ideas. They won't.
  - rhizome 5y ago
    I've thought that a great grassroots response to GDPR and superfluous cookie banners is for websites to start respecting DNT on their own.
    - dylan604 5y ago
      Alanis says wouldn't that be ironic.
  - pattyj 5y ago
    Unfortunately, we've learned that the hard way. Surely, though, a blocked network request never reaches the server and so it can't be used a 'flag'?
EMM_386 5y ago
This is a pretty wild concept, not that I disagree with it. But when you think about it, we're asking a tool originally designed to browse documents on the web, to now execute what is essentially a (safe) binary application, and not to let it connect to the internet, while inside a document in a web browser. I can't see how the future of the desktop is not going to be radically shaped by WASM, in whatever form that takes.
- astlouis44 5y ago
  Agree 100%, next few years of webapps are going to be revolutionary. WebAssembly gaming in particular is going to disrupt Steam on PC, and the App Stores on mobile. Our startup is working on this btw
kevincox 5y ago
That would be very simplistic. It means that all resources you need must be inlined in the initial download. This makes it hard to balance reasonable update time and log caching, especially if you have a slowly-updating ffmpeg.wasm and a more frequently updated UI. Maybe it could add the CSP at some point after everything is loaded and then the badge appears? Of course you still want updates, how do you ensure that updates can occur without sneaking out information? Wiping all site data before downloading the new version would work but having local persistent data would be useful. Maybe all local data would be unavailable from the start of the new version fetch to until the no-network policy is applied?
zamadatix 5y ago
Not sure that can exist separate from just being a completely "offline mode" switch. The most naïve example being doing a bunch of GETs to www.datasucker.com/Base64EncodedDataHere.
gecko39 5y ago
I made a simple static site that processes user images and videos with WASM and it would be great for users to be certain that their data will not leave the browser. It seems possible to define some list of resources I plan on loading, and anything else should not be allowed.

TicklishTiger 5y ago

Talking about online animation tools ... Does anybody know a site where one can create "zoom in animations"? I mean you upload an image, select the point where the animation should zoom in and get a "fly into the image" animation.

devadvance 5y ago
I don't know if there's a pre-existing site that will do it, but you could do this with FFmpeg and therefore FFmpeg.wasm. A brief search [1] indicates that it would likely be about the combination of the right filters. Ostensibly, you could put those filter options into the FFmpeg.wasm demo app [2] (scroll down) and get your video out. [1] https://stackoverflow.com/questions/54547061/ffmpeg-animation-zoom-in-and-zoom-out https://stackoverflow.com/questions/54547061/ffmpeg-animatio... [2]https://ffmpegwasm.netlify.app https://ffmpegwasm.netlify.app

zamadatix 5y ago

Looks to be using https://github.com/ffmpegwasm/ffmpeg.wasm https://github.com/ffmpegwasm/ffmpeg.wasm In the future https://www.w3.org/TR/webcodecs/ https://www.w3.org/TR/webcodecs/ may allow for a native API to do this.

nacs 5y ago
> In the future https://www.w3.org/TR/webcodecs/ https://www.w3.org/TR/webcodecs/ may allow for a native API to do this. It may make some things this can do possible but ffmpeg has support for so many codecs and so many operations and is incredibly extensible that I doubt anything short of making ffmpeg available in the browser will give you that much power.

go_prodev 5y ago

Thanks for linking to this, I was looking for something similar today, I'll give it a crack I didn't realize that WebP supported animation. Wasn't that the purpose of WebM?

devadvance 5y ago
Happy to share! WebP [1] is based upon VP8 encoding. VP8 is one of the codecs for which WebM is frequently a container. Ultimately, it's similar but achieves different objectives. [1] https://en.wikipedia.org/wiki/WebP#Technology https://en.wikipedia.org/wiki/WebP#Technology

nickphx 5y ago

Excellent work, thanks for sharing. I did notice an issue where transcoding will fail if the filename chosen contains a space, the transcoding will fail with 'file not found'.

dylan604 5y ago
I have often been heard telling people that I'm going to remap the spacebar to an underscore on everyone's computer.