How to upload video stream using binaryJS

[Neeraj Sharma]

Hi All,

I'm building an application with the implementation using easyrtc.  My concept is quite simple that the users will be on real time communication and i want to recording happen to node server directly.

Initially i used recordrtc to make it possible but it records the data at client side only and then upload to the server. it runs fine in case of file of small size but as the file size grows, the browser get hang and stops responding. 

Then i heard about binaryjs library, which can make it possible, My idea is the capture the streaming from video element and upload the stream in chunks using binaryjs. 

please see the client side sample code for the same:  

var client = new BinaryClient('ws://localhost:3000');

// wait for connection to binaryjs server

client.on('open', function(){

var box = $('#selfVideo');

var video = document.querySelector('#selfVideo');

box.on('dragenter', doNothing);

box.on('dragover', doNothing);

box.on('play', function(e){

e.originalEvent.preventDefault();

//var file = e.originalEvent.dataTransfer.files[0];

var file = easyrtc.getLocalStream();

alert(file);

// `client.send` is a helper function that creates a stream with the 

        // given metadata, and then chunks up and streams the data.

        var stream = client.send(file, {name: 'demo.wav', size: file.size});

});

});

But im not able to upload this stream to node js server. a file with size of zero bytes gets uploaded and nothing......

please help me achieve this

[Eric Davies]

This is outside the scope of EasyRTC. Suggest asking the author of binaryJS

[Neeraj Sharma]

Hi Eric, 

can you please tell me what does easyrtc.getLocalStream() return and how to get the full stream or the chunks of playing stream ?
i want to get the stream and convert into into stream to be sent to the server. But every time i try to getlocalstream it gives me nothing except an unknown file of zero bytes size. 

My idea is now to get the stream from easyrtc anyhow and to upload to make it more realtime. 

Thanks for paying attention anyways........

[Ataul Mukit]

I think it is possible to divide the captured stream in chunks and upload them as small files.

Maybe you can record at 10 second intervals.

When you finished recording the first 10 second chunk start uploading it in the server, and at the same time start recording the next 10 second chunk.

You do get a local stream from camera, but it is not directly in a state to send through the socket.

The easiest way to get it done is to draw the video frames of the local camera in a canvas and send the canvas data (jpeg/png format) to the server.

[Eric Davies]

easyrtc.getLocalStream() returns you a Webrtc mediaStream.

It's a data type with a few methods on it for accessing video and audio tracks, again as data types that you can't do much with directly.

As Atual says, the only way to get video out of a media stream is to attach it to a video object and render the video objects to a Canvas.

Muaz Khan does something similar with his RTCRecorder project, but he's the first person to say it's a demonstration, not production quality.

If you want to save video, there is only one correct way to do it at this point, find yourself a media server (like Licode), establish peer connections to it, and let it do the recording.

This isn't something Easyrtc supports, but trying to capture frames on the client is just going to be an effort in frustration for you.

[Neeraj Sharma]

Yes Eric, I complete agree with your point. What mauj khan has set up, can record the video on the client side but still it is not production efficient b'coz while saving video, it gets the browser overloaded.

Now i'm up to looking at what you've suggested and will let you know if i found something good.

thanks