4

I am retrieving multiple encrypted data with the help of some ajax queries, and performing some manipulation to transform all theses encrypted chunks into a valid video. And now that I have the binary of the video in memory, I am stuck. How can I display it ?

Just to be sure, I have replicated all theses steps on the server side, and the final output is really a playable video. So my only problem is to display my javascript binary object as a video.

I am doing my best to use only web technologies (html5, video tag, javascript) and I would like to avoid developing my own custom player in flash, which is my very last solution.

if you have an idea, I'm interested. For my part, I am out of imagination.

4
  • 3
    Just to check I'm understanding you correctly, are you saying that encrypted chunks of video are sent to the browser, before being decrypted with javascript? If so, the decryption is not really any better than leaving your car unlocked in the street, with the keys in it and a sign on the windscreen that says "Please dont steal me". That said, as long as the video is short enough, you can just throw a Base64 encoded dataURL at the video element as it's src and it will work. I've got no idea what the size limit is, though a 52MB mp4 is okay, but a 350MB one isn't.
    – enhzflep
    Aug 14, 2015 at 20:03
  • Yes, it's exactly that. Except the fact that the access to the page is limited access and the decryption key is defined by the user. I really like the idea of the Base64, I will try it. It could work.
    – blaazzze
    Aug 14, 2015 at 20:25
  • 1
    In fact the encryption is not to secure the content itself. Once the user can access the page, he can do anything he want with. The security level is to assure the server cannot access the content of the video. It's the property of the users and we affirm that we can't look in their files even if we wanted. So everything is encrypted before entering on the server.
    – blaazzze
    Aug 14, 2015 at 20:46
  • Ahh, gotcha. That's a rather different scenario than I'd imagined. Perhaps my answer below will give you some ideas and something to chew on. :)
    – enhzflep
    Aug 14, 2015 at 21:19

2 Answers 2

2

Here's a quick example that just uses a file input instead of the AJAX you'd normally be using. Note that the first input is wired up to a function that will read the file and return a dataURL for it.

However, since you don't have a fileObject, but instead have a stream of data that represents the contents of the file, you can't use this method. So, I've included a second input, which is wired up to a function that just loads the file as a binary string. This string is then base64 encoded 'manually' with a browser function, before being turned into a dataURL. To do this,you need to know what type of file you're dealing with in order to construct the URL correctly.

It's fairly slow to load even on this laptop i7 and probably sucks memory like no-one's business - mobile phones will likely fall over in a stupor (I haven't tested with one)

You should be able to get your data-stream and continue on from the point where I have the raw data (var rawResult = evt.target.result;)

Error checking is left as an exercise for the reader.

<!DOCTYPE html>
<html>
<head>
<script>
"use strict";
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
function byId(id,parent){return (parent == undefined ? document : parent).getElementById(id);}

// callback gets data via the .target.result field of the param passed to it.
function loadFileObject(fileObj, loadedCallback)
{
    var reader = new FileReader();
    reader.onload = loadedCallback;
    reader.readAsDataURL( fileObj );
}

// callback gets data via the .target.result field of the param passed to it.
function loadFileAsBinary(fileObj, loadedCallback)
{
    var reader = new FileReader();
    reader.onload = loadedCallback;
    reader.readAsBinaryString( fileObj );
}


window.addEventListener('load', onDocLoaded, false);
function onDocLoaded()
{
    byId('fileInput1').addEventListener('change', onFileInput1Changed, false);
    byId('fileInput2').addEventListener('change', onFileInput2Changed, false);
}

function onFileInput1Changed(evt)
{
    if (this.files.length != 0)
    {
        var curFile = this.files[0];
        loadFileObject(curFile, onVideoFileReadAsURL);

        function onVideoFileReadAsURL(evt)
        {
            byId('vidTgt').src = evt.target.result;
            byId('vidTgt').play();
        }
    }
}

function onFileInput2Changed(evt)
{
    if (this.files.length != 0)
    {
        var curFile = this.files[0];
        loadFileAsBinary(curFile, onVideoFileReadAsBinary);

        function onVideoFileReadAsBinary(evt)
        {
            var rawResult = evt.target.result;
            var b64Result = btoa(rawResult);

            var prefaceString = "data:" + curFile.type + ";base64,";
//          byId('vidTgt').src = "data:video/mp4;base64," + b64Result;
            byId('vidTgt').src = prefaceString + b64Result;
            byId('vidTgt').play();
        }
    }
}
</script>
<style>
</style>
</head>
<body>
    <input type='file' id='fileInput1'/>
    <input type='file' id='fileInput2'/>
    <video id='vidTgt' src='vid/The Running Man.mp4'/>
</body>
</html>
2
  • Your answer is a great help. I have something similar. I am stuck on joining the multiple chunks as an unique blob. But when it will be done, I think it will work. I keep you in touch. Thanks.
    – blaazzze
    Aug 14, 2015 at 21:52
  • Since your answer correctly fit to my question, I will mark your message as answer. But in my case, I will finally create my own custom flash player since I will perform some change on the workflow to stream the encrypted video instead of having to keep the full video in memory (which can be from 2MB to over 1GB). But your answer totally fit with my original question, so thank you
    – blaazzze
    Aug 15, 2015 at 15:14
2

To display your video you would need to get an URL for it so that you are able to pass a reference to the video element.

There is URL.createObjectURL which should provide you with such an URL to refer to your data. See https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL for further explanations and mind the compatibility table.

Mozilla hosts an example at https://developer.mozilla.org/samples/domref/file-click-demo.html which displays local files. It should be possible to adapt this to setting the video element's src property instead. Depending on how you store your data, it should be possible to play your video this way.

I tried it in Firefox for data from a File object which left me with a URL blob:https://developer.mozilla.org/ed2e4f2f-57a6-4b06-8d56-d0a1a47a9ffd that I could use to play a video.

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

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

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