api.video

Features

Documentation

Secure live streams with unique overlay

March 12, 2021 - Doug in Private Live

We were recently asked in our website chat:

chat screenshot

I love hard questions. Befiore I come up with my answer, let's walk through a few definitions to describe what we are attempting to do.

Live streaming

When you livestream a video with api.video, we take your live video input and turn it into multiple output streams (of different sizes) on the fly. If your upload stream is 1080p, we will deliver 240p, 260p, 480p, 720p and 1080p streams to your viewers.

If your users are on a smaller screen (like a phone) - they’ll get a smaller resolution video. If they are on a slower connection - we’ll serve the biggest video that will play in their network conditions.

Watermarking

Adding a watermark requires ‘burning’ text into the video. If you use our sandbox, you’ve seen what a watermark could look like:

screenshot showing sandbox watermark

In our sandbox, we watermark each video to show that it is being delivered from the sandbox.

What the ask was:

Burn the user’s name into the video. For example, if I were watching their highly sensitive video, it might look like:

personalized watermark

The idea here is to prevent leakage of the information. If anyone takes a screenshot, or they share the video stream - it is clear that the culprit was Doug, not Cedric, Anne-Sophie or Erikka.

Why we cannot do this

If we create a unique stream for each user, and the video is 1080p, we’d have to encode 5 streams per viewer. Since we can host live streams with hundreds of thousands of viewers, it is not feasible (or cost effective for the account holder) to encode 100k unique videos.

But...

It turns out, there is a pretty good workaround that satisfies the requirements of our user.

First, we’ll use a private livestream. Private livestreams work just like a regular livestream, but our player URL has an added token on the url:

https://embed.api.video/live/li5rw3I105fgajJEpfvr59AK?token=1d5a3684-c653-4f2a-a9cb-0ae25c00fe66

If the token is removed, the live stream will not play. Each token can be used exactly once. If your viewer starts watching your event and they grab the URL from the source code and share with their friends - all views past count 1 will get an error message.

So that takes care of the live stream being shared with people who should not have access.

Screenshots

The video cannot be shared, but what if the video is showing off the latest top secret product from your company? You want to show it to your selected audience, but photo leaks of the product would be just as disastrous to your company. So, we’ll add watermarks.

As we stated above, watermarks cannot be ‘burned’ into the video. But, we can overlay the video with CSS. Here’s the HTML:

<html>
<head>
</head>

<body>

<div class="container">
    <iframe id= "video"src="https://embed.api.video/vod/vi2nVamC6JpFFNXEJrV5kI1J" width="100%" height="50%" frameborder="0" scrolling="no" allowfullscreen="true"></iframe>
    <div class="overlay">
        <p>This video is being watched by Doug.. This video is being watched by Doug.. This video is being watched by Doug.. This video is being watched by Doug.. This video is being watched by Doug.. This video is being watched by Doug.. This video is being watched by Doug.. This video is being watched by Doug.. This video is being watched by Doug.. This video is being watched by Doug..</p>
    </div>
</div>
</body>
</html>

There is a div with an iframe holding our video (in this case, it is a VOD that is not private -strictly for demo purposes, but you could add your private livestream in the src tag). Then we have a paragraph of text that we will overlay on the video.

In the head of the HTML, add this style:

<style>
	.container { position:relative; }
	.container video {
	    position:relative;
	    z-index:0;
	}
	.overlay {
		display:inline;
	    position:absolute;
		color: orange;
		font-size:100;
		opacity: 0.8;
		height: 100%;
		top:0;
		bottom: 25%;
	    left:5%;
	    z-index:1;
		pointer-events:none;
		overflow: hidden;
	}

	
	</style>

This places the overlay on top of the iframe, makes the text big, orange and slightly see through.

video with CSS overlay

Private video with a custom overlay

Now you have a custom live stream that cannot be shared. The watermark added to the video is unique for each viewer, which should prevent screenshot photos from the stream (or if there are leaks, you'll know who it was).

Security

Sharing the video: With our private tokens, sharing the live video is not possible.

Removing the watermark: There ARE workarounds that a technically savvy user might use to disable the CSS overlay. But for the vast majority of your users, this is unlikely to be an issue. As in all issues of security, your team will have to weigh this possibility and decide if it is sufficiently secure to prevent leakage of your content.

Conclusion

Private live streams are a great way to prevent the sharing of our sensitive videos. For an additional layer of security, you can add an overlay with CSS to identify each viewer’s screen - thus preventing screenshots being released from the presentation. Give it a try: sign up for your free account today!

Doug

Developer Evangelist

Get started now

Connect your users with videos