Question

Here is the thing, I am working with ASP.NET and I am using this particular SignalR library to broadcast a video to my clients, but as far as I know I can not stream video because signalR is a messaging system and it is not intended to stream video, files or things like that.

Now what I am trying to do is to split the video into buffers that is Base64-encoded into a string, then on the client I am trying to load it into the source of a Video tag.

Here I show you what I am doing on the client:

HTML Code:

<video id="myVideo">
   <source id="video_source">
</video>

Javascript Code:

 //here somehow I am getting the string with the base64-encoded video
 function playVideo(message) {
          var myVideo = document.getElementById("myVideo");
          var mySource = document.getElementById("video_source");
          mySource.setAttribute("src", getEncodedVideoString("mp4", message));
          myVideo.load();
          myVideo.play();         
      };

  // here I am formatting and concatenating the string for my source attribute 
  function getEncodedVideoString(type, message) {
        return 'data:video/' + type + ';base64,' + message;
    }

Well as you can see, at the moment I’m facing a scenario a little weird, but I already have the video encoded on the client, now I just need to find out the way to reproduce that video.

And here is when my question comes up, does any one has done something like this before, or you have any idea or suggestion to do that?

Answer 1

Thanks for an interesting question; it had never crossed my mind before, but it does seem to be possible. Ian Devlin has an explanation on how to use Data URIs with HTML5 media, including video – a working example is also included.

The only difference that I see is that a type attribute is added to the <source> tag; if adding this doesn’t work, are you sure that you’ve got your encoding correct? What happens when you try, do you get any errors?