Authendicated video playback using angularjs

Question

I'm working on an angularjs SPA type project and there I came across a situation where i need to play an ordinary mp4 file, but the issue is that video is not public so in order to access it i need to send an access token in header.

so my question is

1. If this is possible how do i do the playback
2. is token based authentication is a right approach to securely access a media

Answer 1

In order not to loose streaming ability, the best (if not the only) way is to secure static videos with an access token passed as an url parameter. I mean you need to give up authentication via token in header.

So you need to make changes to your service on your server to authenticate request by query parameter.

For example your url will look like: www.yourawesomeserver/your_video?access_token=ue873wijweu383j3

Your server should serve the static file if the token is OK.

Answer 2

At the end I came up with this code, code you see is a part of a directive

var video = $http({
                method : "GET",
                url : "http://path/small1.mp4",
                responseType : "blob",
                headers : { X-Access-Token : "token" }
         });


          video.success(function(data,status,headers,config){
              if((data != undefined)){
                var dataURL= window.URL.createObjectURL(data);
                $scope.videourl = dataURL;
                //window.location =dataURL;

                var video = document.getElementById("emptyvideo");
                video.src = dataURL;
                video.addEventListener('error', function(err){
                    // Nothing to see here...
                    console.log(err);
                    // Will throw a MediaError code 4
                    console.log(video.error);
                });


              }else{
                alert("error");
              }
                
          });

          video.error(function(data,status){
              alert("error");
          });   

This is fine for small videos, but if the video got bigger this is not a good apporach. because in this code video need to be fully loaded in order to do a playback, please suggest me if there is a better apporach