I am trying to stream MP3 file from a nodeJS server using BinaryJS - http://binaryjs.com/
But, when I am decoding the buffers on the client side they are seems to be overlapping, Meaning that the new chunk of data is being played few milliseconds before the previous one ended, causing the audio to lag.
is there any way to make the client wait until the current buffer is finished before starting the new one?
Server:
var BinaryServer = require('binaryjs').BinaryServer;
var fs = require('fs');
var server = BinaryServer({port: 9000});
server.on('connection', function(client){
var file = fs.createReadStream(__dirname + '/Song.mp3', {
'flags': 'r',
'bufferSize': 4 * 1024
});
});
client.send(file);
});
Client:
var client = new BinaryClient('ws://localhost:9000');
window.AudioContext = window.AudioContext || window.webkitAudioContext;
var context = new AudioContext();
client.on('stream', function (stream, meta) {
var parts = [];
var last = 0;
stream.on('data', function (data) {
var source = context.createBufferSource();
context.decodeAudioData(data, function (buf) {
source.buffer = buf;
source.connect(context.destination);
source.loop = false;
source.start(last);
last += buf.duration;
source.onended = function() {
console.log('Your audio has finished playing');
};
},
function (e) {
"Error with decoding audio data" + e.err
});
parts.push(data);
});
stream.on('end', function () {
console.log(parts);
});
});
Not sure about this, but instead of initializing last to 0, you might want to initialize it to context.currentTime.
Related
I am using MediaRecorder to record chunks of my live video in webm format from MediaStream and converting these chunks to .ts files on the server using ffmpeg and then updating my playlist.m3u8 file with this code:
function generateM3u8Playlist(fileDataArr, playlistFp, isLive, cb) {
var durations = fileDataArr.map(function(fd) {
return fd.duration;
});
var maxT = maxOfArr(durations);
var meta = [
'#EXTM3U',
'#EXT-X-VERSION:3',
'#EXT-X-MEDIA-SEQUENCE:0',
'#EXT-X-ALLOW-CACHE:YES',
'#EXT-X-TARGETDURATION:' + Math.ceil(maxT),
];
fileDataArr.forEach(function(fd) {
meta.push('#EXTINF:' + fd.duration.toFixed(2) + ',');
meta.push(fd.fileName2);
});
if (!isLive) {
meta.push('#EXT-X-ENDLIST');
}
meta.push('');
meta = meta.join('\n');
fs.writeFile(playlistFp, meta, cb);
}
Here fileDataArr holds information for all the chunks that have been created.
After that i use this code to create a hls server :
var runStreamServer = (function(streamFolder) {
var executed = false;
return function(streamFolder) {
if (!executed) {
executed = true;
var HLSServer = require('hls-server')
var http = require('http')
var server = http.createServer()
var hls = new HLSServer(server, {
path: '/stream', // Base URI to output HLS streams
dir: 'C:\\Users\\Work\\Desktop\\live-stream\\webcam2hls\\videos\\' + streamFolder // Directory that input files are stored
})
console.log("We are going to stream from folder:" + streamFolder);
server.listen(8000);
console.log('Server Listening on Port 8000');
}
};
})();
The problem is that if i stop creating new chunks and then use the hls server link:
http://localhost:8000/stream/playlist.m3u8 then the video plays in VLC but if i try to play during the recording it keeps loading the file but does not play. I want it to play while its creating new chunks and updating playlist.m3u8. The quirk in generateM3u8Playlist function is that it adds '#EXT-X-ENDLIST' to the playlist file after i have stopped recording.
The software is still in production so its a bit messy code. Thank you for any answers.
The client side that generates blobs is as follows:
var mediaConstraints = {
video: true,
audio:true
};
navigator.getUserMedia(mediaConstraints, onMediaSuccess, onMediaError);
function onMediaSuccess(stream) {
console.log('will start capturing and sending ' + (DT / 1000) + 's videos when you press start');
var mediaRecorder = new MediaStreamRecorder(stream);
mediaRecorder.mimeType = 'video/webm';
mediaRecorder.ondataavailable = function(blob) {
var count2 = zeroPad(count, 5);
// here count2 just creates a blob number
console.log('sending chunk ' + name + ' #' + count2 + '...');
send('/chunk/' + name + '/' + count2 + (stopped ? '/finish' : ''), blob);
++count;
};
}
// Here we have the send function which sends our blob to server:
function send(url, blob) {
var xhr = new XMLHttpRequest();
xhr.open('POST', url, true);
xhr.responseType = 'text/plain';
xhr.setRequestHeader('Content-Type', 'video/webm');
//xhr.setRequestHeader("Content-Length", blob.length);
xhr.onload = function(e) {
if (this.status === 200) {
console.log(this.response);
}
};
xhr.send(blob);
}
The code that receives the XHR request is as follows:
var parts = u.split('/');
var prefix = parts[2];
var num = parts[3];
var isFirst = false;
var isLast = !!parts[4];
if ((/^0+$/).test(num)) {
var path = require('path');
shell.mkdir(path.join(__dirname, 'videos', prefix));
isFirst = true;
}
var fp = 'videos/' + prefix + '/' + num + '.webm';
var msg = 'got ' + fp;
console.log(msg);
console.log('isFirst:%s, isLast:%s', isFirst, isLast);
var stream = fs.createWriteStream(fp, { encoding: 'binary' });
/*stream.on('end', function() {
respond(res, ['text/plain', msg]);
});*/
//req.setEncoding('binary');
req.pipe(stream);
req.on('end', function() {
respond(res, ['text/plain', msg]);
if (!LIVE) { return; }
var duration = 20;
var fd = {
fileName: num + '.webm',
filePath: fp,
duration: duration
};
var fileDataArr;
if (isFirst) {
fileDataArr = [];
fileDataArrs[prefix] = fileDataArr;
} else {
var fileDataArr = fileDataArrs[prefix];
}
try {
fileDataArr.push(fd);
} catch (err) {
fileDataArr = [];
console.log(err.message);
}
videoUtils.computeStartTimes(fileDataArr);
videoUtils.webm2Mpegts(fd, function(err, mpegtsFp) {
if (err) { return console.error(err); }
console.log('created %s', mpegtsFp);
var playlistFp = 'videos/' + prefix + '/playlist.m3u8';
var fileDataArr2 = (isLast ? fileDataArr : lastN(fileDataArr, PREV_ITEMS_IN_LIVE));
var action = (isFirst ? 'created' : (isLast ? 'finished' : 'updated'));
videoUtils.generateM3u8Playlist(fileDataArr2, playlistFp, !isLast, function(err) {
console.log('playlist %s %s', playlistFp, (err ? err.toString() : action));
});
});
runStreamServer(prefix);
}
You don't show us how you use MediaRecorder to generate your "chunks" of data. Do you you use its ondataavailable event for this purpose?
If so, please keep this in mind: You must concatenate all the chunks handed to you by ondataavailable to get a valid .webm (or .matroska) data stream.
You can't just store an arbitrary chunk of data in a media file and expect it to play. Even ffmpeg needs all your chunks streamed to it to generate valid output. That's because the first couple of chunks contain the mandatory .webm initialization segment, and the other chunks do not.
I am trying to implement websocket through uwsgi Gevent. But, in between 2,3 requests I am always getting no PONG received in 3 seconds error.
Server Side code:
#ws.route('/websocket')
def audio(ws):
first_message = True
total_msg = ""
sample_rate = 0
total_data = []
while True:
msg = ws.receive()
# processing message here and sending response back
ws.send("response")
if __name__ == '__main__':
app.run(https='0.0.0.0:443,{},{}'.format(ssl_cert,ssl_key), port = 5002, gevent=1000)
Client side code:
ws = new WebSocket('wss://ec2-54-72-7-110.eu-west-1.compute.amazonaws.com/websocket');
//ws = new WebSocket('wss://ec2-54-72-7-110.eu-west-1.compute.amazonaws.com:5000/websocket');
ws.onopen = function(evt) {
console.log('Connected to websocket.');
alert("Recording started")
navigator.getUserMedia({audio: true, video: false}, initializeRecorder, function(e) {
console.log('No live audio input: ' + e);
});
}
function initializeRecorder(stream){
audio_context = new AudioContext;
sampleRate = audio_context.sampleRate;
ws.send("sample rate:" + sampleRate);
var audioInput = audio_context.createMediaStreamSource(stream);
console.log("Created media stream.");
var bufferSize = 4096;
// record only 1 channel
recorder = audio_context.createScriptProcessor(bufferSize, 1, 1);
// specify the processing function
recorder.onaudioprocess = recorderProcess;
// connect stream to our recorder
audioInput.connect(recorder);
// connect our recorder to the previous destination
recorder.connect(audio_context.destination);
}
function recorderProcess(e) {
var left = e.inputBuffer.getChannelData(0);
if (ws.readyState === WebSocket.OPEN) {
var view = new Int16Array(convertFloat32ToInt16(left))
console.log(view);
ws.send(view);
}
}
function close_WebSocket(){
console.log("done")
ws.send("done")
ws.onmessage = function(evt) {
console.log(evt.data)
ws.close()
}
audio_context.close();
}
I don't know what is wrong with it?
I am trying to send audio file (or chunk) via socket.io.
I tried:
// server
socket.on('client-get-audio', function (data) {
//data.fname - name of requested file
var buffer = fs.readFileSync(data.fname, null);
// try 2 - read arraybuffer
//var buffer = fs.readFileSync(data.fname, null).buffer;
buffer = new Uint8Array(buffer);
socket.emit('audio-data', {count: 1, buff: buffer});
});
I can not decode data:
// client
// ctx - AudioContext
// source - buffer source
socket.on('audio-data', function(data){
ctx.decodeAudioData(data.buff, decoded => {
source.buffer = decoded;
source.start(0);
});
I will not describe all my attempts, there were a lot of them.
update
working variant
// server
socket.on('client-get-audio', function (data) {
//data.fname - name of requested file
var buffer = fs.readFileSync(data.fname, null);
socket.emit('audio-data', {count: 1, buff: buffer});
});
// client
function toArrayBuffer(buf) {
var ab = new ArrayBuffer(buf.length);
var view = new Uint8Array(ab);
for (var i = 0; i < buf.length; ++i) {
view[i] = buf[i];
}
return ab;
}
// ctx - AudioContext
// source - buffer source
socket.on('audio-data', function(data){
ctx.decodeAudioData(toArrayBuffer(data.buff.data), decoded => {
source.buffer = decoded;
source.start(0);
});
Maybe someone can suggest a more correct variant?
Try to build an API using the socket.
It's more convenient.
I think.
What i'm trying to do here is to broadcast a file to other clients connected to the server via websocket/binaryjs using a binaryjs client/server system.
The problem comes with large files (or maybe is totally random?!?!). The client stops sending data to the server giving an error.
This is the first time i try something like this and i'm pretty new to socket programming so i might be missing something.... or everything.
Here is the client
<html>
<head>
<script src="http://cdn.binaryjs.com/0/binary.js" type="text/javascript" language="javascript"></script>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript" language="javascript"></script>
<script>
$(document).ready(start);
function upload(e){
var file = e.target.files[0];
var chunkSize = 1024 * 1024; //1mb in this case but the problem seems to be uneffected by the chunk size
var fileSize = file.size;
var start = 0;
var end = chunkSize;
var s = client.createStream({name: file.name, size: file.size});
while(start < fileSize) {
w = s.write(file.slice(start, end));
console.log(w);
start = end;
end = start + chunkSize;
}
/*
//the client.send way
var reader = new FileReader();
reader.onload = function(e) {
var contents = e.target.result;
client.send(contents, {name: file.name, size: file.size});
};
reader.readAsArrayBuffer(file);
*/
}
var client = new BinaryClient('ws://0.0.0.0');
function start() {
var o = $('#output');
client.on('stream', function(stream, meta){
var parts = [];
var meta = meta;
var downloaded = 0;
var element = $('<div />');
o.append(element);
stream.on('data', function(data){
downloaded += data.byteLength;
element.html(meta.name+' '+(Math.round(downloaded/meta.size*100 *100)/100)+'% ');
parts.push(data);
});
stream.on('end', function(){
var a = document.createElement("a");
a.innerHTML='download';
a.href = (window.URL || window.webkitURL).createObjectURL(new Blob(parts));
a.download = meta.name;
a.target = '_blank';
element.append(a);
});
});
}
</script>
</head>
<body>
<input type="file" id="files" name="files" />
<div id="output"></div>
<script>
document.getElementById('files').addEventListener('change', upload, false);
</script>
</body>
</html>
And then comes the server code
var BinaryServer = require('binaryjs').BinaryServer;
var server = BinaryServer({port:80});
var clients = [];
server.on('connection', function(client){
clients.push(client);
console.log(clients.length);
client.on('stream', function(stream, meta){
var s = [];
var d = 0;
for (var i=0;i<clients.length;i++) {
if (clients[i].id == client.id) {
} else {
s.push(clients[i].createStream(meta));
}
}
var name = meta;
var parts = [];
stream.on('data', function(data){
d += data.length;
console.log('data in '+d);
for (var i=0;i<s.length;i++) {
s[i].write(data);
}
});
stream.on('end', function(){
console.log('end');
for (var i=0;i<s.length;i++) {
s[i].end();
}
});
});
client.on('close', function() {
for (var i=0;i<clients.length;i++) {
if(clients[i].id == client.id) {
clients.splice(i, 1);
}
}
client.close();
});
client.on('error', function(){
console.log('error');
});
});
While uploading from the client, i get this error message at random moments (client binary.js)
WebSocket connection to 'ws://0.0.0.0/' failed: Failed to send WebSocket frame. binary.js:1341
WebSocket connection to 'ws://0.0.0.0/' failed: Failed to load Blob: error code = 3 binary.js:1341
No problem with small files (for instance it NEVER fails broadcasting a 25mb wmv). Dunno if it's just a coincidence.
Any help would be appreciated.
I'm trying to play audio mp3 file from webserver without downloading it to the filesystem. This is how I get this file and play it:
var url = require('url');
var http = require('http');
var player = require('./player.js');
function initPlayback(res) {
player.play(res);
player.onPlaybackEnds(function() {
console.log('Playback ends.');
});
}
exports.add = function(file_url) {
var options = {
host: url.parse(file_url).host,
port: 80,
path: url.parse(file_url).pathname
};
http.get(options, function(res) {
initPlayback(res);
});
};
player.js:
var fs = require('fs');
var lame = require('lame');
var Speaker = require('speaker');
var options = {
audio: {
channels: 2,
bitDepth: 16,
sampleRate: 44100
}
};
var decoderMp3 = lame.Decoder();
var speaker = new Speaker(options);
var onPlaybackEnds = function() {};
function playMp3(dataStream) {
speaker = new Speaker(options);
decoderMp3 = lame.Decoder();
dataStream.pipe(decoderMp3).pipe(speaker);
speaker.on('flush', function() {
onPlaybackEnds();
});
}
exports.play = function(dataStream) {
playMp3(dataStream);
};
exports.onPlaybackEnds = function(callback) {
onPlaybackEnds = callback;
};
The output I got from running the add("http://localhost/file.mp3") is:
Note: Illegal Audio-MPEG-Header 0x41504554 at offset 201915.
Note: Trying to resync...
Note: Hit end of (available) data during resync.
Playback ends.
It seems that before flush event some error happens. Track plays until the end. Yet when I try to run the same thing, it doesn't even start. Any ideas?