Question

I want to send a video file from a server written in java to a web browser client.
The socket connection works fine and I have no trouble sending text.
The library I’m using to make a socket server is this https://github.com/TooTallNate/Java-WebSocket

This is the code for sending the file

public void sendFile(WebSocket conn,String path)
{
 try
   {    
     File file = new File(path);
     byte[] data = new byte[(int)file.length()];
     DataInputStream stream = new DataInputStream(new FileInputStream(file));
     stream.readFully(data);
     stream.close();
     conn.send(data);
     ..snip catch statements..

Here is my javascript code for catching the file

function connect()
{
 conn = new WebSocket('ws://localhost:8887');
 conn.onopen = function(){alert("Connection Open");};
 conn.onmessage = function(evt){if(evt.data instanceof Blob){readFile(evt);}else{alert(evt.data);}};
 conn.onclose = function(){alert('connection closed');};
}
function readFile(file_data)
{
 var video = document.getElementById('area');
 video.src = window.URL.createObjectURL(file_data.data);
}

..skip to html element for playing the file..

<video id='area' controls="controls"></video>

I want to be able to receive the file in the browser and play it.

The error I get while trying to send a webm video file to fireox is:
HTTP “Content-Type” of “application/octet-stream” is not supported. Load of media resource blob:794345a5-4b6d-4585-b92b-3acb51612a6c failed.

Is it possible to receive a video file from a websocket and play it?
Am I implementing something wrong?

Answer 1

Video element requires right content-type, ws Blob comes with generic one, and it seems (to me) there is no way to set it serverside or clientside.
Fortunately, Blob has slice(start, end, contentType) method:

var rightBlob = originalBlob.slice(0, originalBlob.size, 'video/webm')