4

I'm working on a web application in which a watermark must be applied to a video before it is sent to the user. Currently this watermark is static, and is created using ffmpeg when a video is updated. However, the application is changing so that a unique watermark will be added to the video for every request made for the video. This prevents a problem, as the video files may be fairly large and adding a watermark may be time-consuming (e.g., in some cases it may take over a minute to add a watermark), but the watermarks cannot be added on upload.

I figured that streaming video could be a solution and implemented a solution using the nginx-rtmp-module, but several problems cropped up:

  1. RTMP solutions are a no-go as they appear to require Flash. This application must be supported on devices that don't support Flash at all, or don't (and won't) have it installed.
  2. I have considered using MPEG-DASH, but that enjoys only limited support. Namely, it is not supported on versions of Firefox targeted by the application, nor is it supported on iOS or some versions of Safari.
  3. I have considered HLS, but that enjoys even more limited support than MPEG-DASH.
  4. Regardless, I haven't actually been able to get Dash.js (the reference player for MPEG-DASH streams) to work, although that may be due to an encoding issue, I'm not sure.

I wondered if there is a better (perhaps simpler) solution to this problem; perhaps streaming video isn't the way to go at all? Is there an efficient way to transcode a video file on-the-fly and start sending it to the browser quickly?

I am not against using solutions like node.js or other platforms/frameworks, and solutions can use HTML5 <video> if necessary.

2 Answers 2

1
  1. You are wrong about HLS having limited support. It's widely supported on modern mobile devices, both iOS (since Apple created the protocol) and Android (it's true there are some bugs on some earlier 4.x versions but starting with 4.4 it works fine). See the encoding.com's 2015 Global Media Delivery Report.

    Only on desktops you need a Flash fallback, with the exception of Safari on MacOS. Both paid and free HLS players with Flash fallback support on desktops are available.

  2. The Nginx RTMP module can also output HLS based on an input RTMP stream. You just feed the module with an RTMP stream using H.264 and it re-muxes it in HLS for you.

    Example using ffmpeg (from the docs):

     ffmpeg -loglevel verbose -re -i movie.avi  -vcodec libx264
            -vprofile baseline -acodec libmp3lame -ar 44100 -ac 1
            -f flv rtmp://localhost:1935/hls/movie
    

    Nginx config:

    application hls {
        live on;
        hls on;
        hls_path /tmp/hls;
    }
    

    The public playback URL will be http://<server>/hls/movie/playlist.m3u8. You can also use exec to launch the ffmpeg command (with the watermark overlay) on request.

6
  • 1
    You don't even need Flash for HLS playback on desktops anymore. You can use player like Viblast, Theo, and hls.js (this one is free and open source). Dec 20, 2015 at 11:38
  • 1
    From the code snippets you give I don't see where the watermarks is supposed to go. The ffmpeg command transcodes the input video and outputs an rtmp stream. The Nginx config takes the rtmp stream and remuxes it to hls. I don't see a watermark? Am I missing something? Dec 20, 2015 at 11:44
  • I'm not familiar with those players, see if they work without a 3rd party decoder. The overlay goes in the ffmpeg command ofc, and you can use nginx exec to launch it on demand
    – aergistal
    Dec 20, 2015 at 12:02
  • I have experience with Viblast and Theo and they are complete HTML5 solutions that don't require any particular 3rd party decoder or plugins. They use the built-in MSE API in order to implement HLS playback. The ffmpeg command in your snippet transcodes the input stream (-vcodec libx264 will make ffmpeg transcode even if input is already h264). Dec 20, 2015 at 12:14
  • The example is from the nginx docs. You will use your own command. If you overlay a watermark you will be forced to re-encode.
    – aergistal
    Dec 20, 2015 at 14:18
1

Here is a solution that I've seen some websites implement:

  1. Add a canvas to the DOM where a video element would otherwise be placed
  2. Create a video element and render it to the canvas
  3. Render the watermark image on top of the rendered video in the canvas

Pros:

  • Relatively easy to implement. No need for server side configuration or ffmpeg or nginx plugins.
  • All the work is done in the client so you get less server load
  • You can put any watermark you like. You can even animate it or render it in 3D (using webgl)

Cons:

  • HTML5 specific. Older browsers like IE 7, 8 most won't work. Flash is required for these browsers anyway.
  • Requires more processing power from the client browser. This is no issue for desktop browsers but could lead to choppy playback and/or higher battery consumption on older, under-powered phones.
  • If someone plays the media stream directly (without using your webpage, for example in VLC) then there will be no logo.
1
  • I'm actually doing that now, but I want the watermark to actually be embedded in the video. Good idea, though!
    – mipadi
    Dec 21, 2015 at 22:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.