2015. október 5., hétfő

Video.js Authentication with Wrench

This article shows how to set up authentication for you video streams using the probably most popular opensource video player Video.js and Wowza Streaming Engine.

The authentication will be provided by Wrench which is a quite powerful module for Wowza. The main idea behind Wrench is that you need to add a special parameter to your video URL which is transparently sent back to the streaming server. Wrench once configured properly in the Wowza Streaming Engine will grab this token from the connection request and validate it against a custom webservice that you need to implement or alternatively use any relational database to check the token with the SQL you can configure.

There are some good tutorials on how to set up Wrench with JW Player and MySQL with a simple PHP demo page. I strongly suggest reading that first to get a basic understanding of what we'll do here, because in this article I'll mainly focus on the differences that you need to add to the official example on GitHub that works with JW Player.

Now the trick is how to format our URL so that it Video.js will be able to properly pass the token to Wrench. Below is a set of examples for RTMP and HTTP streaming:
<video class="video-js vjs-default-skin" controls="" data-setup="{'techOrder': ['flash']}" height="264" id="example_video_1" preload="auto" width="640">
  <!-- source src="http://localhost:1935/vod/mp4:streetview.mp4/playlist.m3u8?t=5612e22aa1f54" type='video/mp4' /-->
  <!-- source src="rtmp://localhost:1935/vod/?t=5612e22aa1f54&mp4:streetview.mp4" type='rtmp/mp4' /-->
  <source src="http://localhost:1935/vod/mp4:sample.mp4/playlist.m3u8?t=5612e22aa1f54" type="video/mp4"></source>
</video></code>

The HTTP based streamer is quite straightforward with appending the token as normally to the end of the URL. The tricky part is the RTMP. As mentioned in this old GitHub issue there is something in the video.js code that prevents it from normally passing the query parameter to Wowza. However we can work this around and construct this ugly URL that perfectly works:

rtmp://localhost:1935/vod/?t=ce43d56daa13d&mp4:streetview.mp4
The trick is based on the way Video.js parses the src attribute into a "connection" and a "stream" part in flash-rtmp.js.

Here is the logs on the Wrench / Wowza side when we hit play:
INFO server - Client connecting with id 1394368604 and query string t=5612e22aa1f54 [caller: onHTTPSessionCreate]
INFO server - Attempting to resolve hashed token 8a4bbef80da3af21ddd99272d1cee34f
INFO server - Executing SQL select username from wtb_tokens where token=:hashedtoken with params: {hashedtoken=8a4bbef80da3af21ddd99272d1cee34f}
INFO server - Resolved hashed token 8a4bbef80da3af21ddd99272d1cee34f to User [username=john, hashedToken=8a4bbef80da3af21ddd99272d1cee34f]
INFO server - User john is connecting, performing checks.
INFO server - Accepting connection from user john, all checks passed

As you can see Wrench properly detected the token from the query string and was able to resolve it to a valid user.

Nincsenek megjegyzések:

Megjegyzés küldése