We Keep Coding

Record stream via JS

so i have my webRTC python server that streams audio and video to the browser via js in video and audio tag form
Now what can I do to record this stream on frontend I'm asking because i my current solution based solely on python and openCV it is to slow for modern era so Im re writing my whole project with different approach and now i'm stuck
html
Start
Stop
<div id="media">
<audio id="audio" autoplay="true"></audio>
<video id="video" autoplay="true" playsinline="true"></video>
</div>
js
var pc = null;
var dc = null, dcInterval = null;
function createPeerConnection() {
var config = {
sdpSemantics: 'unified-plan'
};
pc = new RTCPeerConnection(config);
pc.addEventListener('track', function(evt) {
if (evt.track.kind == 'video')
document.getElementById('video').srcObject = evt.streams[0];
else
document.getElementById('audio').srcObject = evt.streams[0];
});
return pc;
}
function negotiate() {
return pc.createOffer().then(function(offer) {
return pc.setLocalDescription(offer);
}).then(function() {
return new Promise(function(resolve) {
if (pc.iceGatheringState === 'complete') {
resolve();
} else {
function checkState() {
if (pc.iceGatheringState === 'complete') {
pc.removeEventListener('icegatheringstatechange', checkState);
resolve();
}
}
pc.addEventListener('icegatheringstatechange', checkState);
}
});
}).then(function() {
var offer = pc.localDescription;
return fetch('/offer', {
body: JSON.stringify({
sdp: offer.sdp,
type: offer.type,
}),
headers: {
'Content-Type': 'application/json'
},
method: 'POST'
});
}).then(function(response) {
return response.json();
}).then(function(answer) {
return pc.setRemoteDescription(answer);
}).catch(function(e) {
alert(e);
});
}
function start() {
document.getElementById('start').style.display = 'none';
pc = createPeerConnection();
var constraints = {
audio: document.getElementById('use-audio').checked,
video: false
};
if (document.getElementById('use-video').checked) {
var resolution = document.getElementById('video-resolution').value;
if (resolution) {
resolution = resolution.split('x');
constraints.video = {
width: parseInt(resolution[0], 0),
height: parseInt(resolution[1], 0)
};
} else {
constraints.video = true;
}
}
if (constraints.audio || constraints.video) {
if (constraints.video) {
document.getElementById('media').style.display = 'block';
}
navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {
stream.getTracks().forEach(function(track) {
pc.addTrack(track, stream);
});
return negotiate();
}, function(err) {
alert('Could not acquire media: ' + err);
});
} else {
negotiate();
}
document.getElementById('stop').style.display = 'inline-block';
}
function stop() {
document.getElementById('stop').style.display = 'none';
if (dc) {
dc.close();
}
if (pc.getTransceivers) {
pc.getTransceivers().forEach(function(transceiver) {
if (transceiver.stop) {
transceiver.stop();
}
});
}
pc.getSenders().forEach(function(sender) {
sender.track.stop();
});
setTimeout(function() {
pc.close();
}, 500);
}

Content script injecting iframe inside all iframes on web page

I'm trying to create an iframe and inject it into the webpage when the webpage is loaded, But when I try to do that the content script is injecting the iframe inside all the iframes on the webpage, I have used the chrome.runtime.onMessage.addListener to be used to toggle the iframe when the user clicks on the extension icon so I'm sending a message from background script to handle this however I'm sending the message only once from the background script but chrome.runtime.onMessage.addListener is getting fired multiple times I'm not sure why
This is what is happening
This is the content script
var iframeContainer = undefined;
window.onload = function () {
injectPopup();
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
if (request.message == "togglePopup") {
console.log("message arrived");
var appBody = document.getElementById("app-container");
if (appBody.style.display == "none") {
console.log("posting message");
iframeContainer.contentWindow.postMessage(
JSON.stringify({
user: request.user,
token: request.token,
}),
"*",
[]
);
appBody.style.display = "block";
} else {
appBody.style.display = "none";
}
}
});
};
// window.addEventListener("message", function (e) {
// if (JSON.parse(e.data)) {
// const data = JSON.parse(e.data);
// if (data.message) {
// if (data.message == "toggleApp") {
// var appBody = document.getElementById("app-container");
// appBody.style.display = "none";
// }
// }
// }
// });
function injectPopup() {
console.log("inject popup");
iframeContainer = document.createElement("iframe");
console.log(iframeContainer);
iframeContainer.allowFullscreen = false;
iframeContainer.src = chrome.runtime.getURL("/index.html");
iframeContainer.id = "app-container-iframe";
const appContainer = document.createElement("div");
appContainer.id = "app-container";
appContainer.style.display = "none";
console.log(appContainer);
const resizeHandle = document.createElement("div");
resizeHandle.id = "resize-container-handle";
resizeHandle.classList.add("ui-resizable-handle");
resizeHandle.classList.add("ui-resizable-w");
resizeHandle.innerHTML =
'<div class="resize-handle-horizontal-bar"></div><div class="resize-handle-horizontal-bar"></div><div class="resize-handle-horizontal-bar"></div>';
appContainer.appendChild(resizeHandle);
document.querySelector("body").appendChild(appContainer);
appContainer.appendChild(iframeContainer);
$("#app-container").resizable({
handles: { w: "#resize-container-handle" },
});
}
This is the background script from which I'm sending the message
var userLoggedIn = {};
const openTabs = [];
const apiUrl = "http://localhost:5000";
var popupOpen = false;
var currentWindow = undefined;
window.onload = () => {
popupOpen = false;
};
chrome.storage.local.get("token", function (result) {
userLoggedIn = result.token;
chrome.browserAction.onClicked.addListener(function (tab) {
const width = 500;
const height = 900;
const left = screen.width / 2 - width / 2;
const top = screen.height / 2 - height / 2;
console.log("clicked!");
if (!userLoggedIn) {
if (currentWindow == undefined) {
chrome.windows.create(
{
url: "/html/auth.html",
width: width,
height: height,
left: left,
top: top,
focused: true,
},
(window) => {
currentWindow = window;
chrome.windows.onRemoved.addListener(function (id) {
if (currentWindow.id == id) {
currentWindow = undefined;
}
});
}
);
}
} else {
console.log("hi!");
chrome.windows.getCurrent((w) => {
chrome.tabs.query(
{
active: true,
currentWindow: true,
},
function (tabs) {
const userData = parseJwt(userLoggedIn);
console.log("sending message");
chrome.tabs.sendMessage(tabs[0].id, {
message: "togglePopup",
user: userData,
token: userLoggedIn,
});
}
);
});
}
});
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
if (request.message === "login") {
loginUser(request.payload)
.then(function (res) {
if (res.ok) {
return res.json();
} else {
sendResponse({
message: "error",
});
}
})
.then(function (data) {
chrome.storage.local.set({ token: data.token }, function (result) {
chrome.windows.remove(currentWindow.id);
const userData = parseJwt(data.token);
userLoggedIn = data.token;
chrome.tabs.query(
{
active: true,
currentWindow: true,
},
function (tabs) {
chrome.tabs.sendMessage(tabs[0].id, {
message: "togglePopup",
payload: {
user: userData,
token: userLoggedIn,
},
});
}
);
sendResponse({ message: "success" });
});
})
.catch(function (err) {
console.log(err);
});
return true;
} else if (request.message === "register") {
registerUser(request.payload)
.then(function (res) {
if (res.ok) {
return res.json();
} else {
sendResponse({
message: "error",
});
}
})
.then(function (data) {
console.log(data);
sendResponse({ message: "success" });
})
.catch(function (err) {
console.log(err);
});
} else if (request.message === "logout") {
} else if (request.message === "userStatus") {
} else if (request.message === "closePopup") {
const index = getIndexOfTab(sender.tab.id, openTabs);
openTabs[index].popupOpen = false;
}
});
});

chrome.tabs.sendMessage sends the message to all frames of the tab per the documentation.
You can limit it to the main page via frameId:
chrome.tabs.sendMessage(tabId, {foo: 'bar'}, {frameId: 0});

Loop Childens Custom Mongodb

User.find({ refUser: req.params.userName }).then(function (users) {
var network_users = [];
network_users.push(users);
users.forEach(function (u) {
network_users.push(User.find({ refUser: u.toObject().userName }));
})
return Promise.all(network_users);
I have 4 users, I expected receive a json with all of childrens but I only received the first and the children of this first.
Someone can help me with this loop? Please! Thanks so much!!!!

function asyncLoop(iterations, func, callback, foo) {
var done = false;
var loop = {
next: function () {
if (done) {
return;
}
if (iterations) {
func(loop);
} else {
done = true;
if (callback) callback(foo);
}
},
isEnd: function () {
return done;
},
refresh: function (it) {
iterations = it;
},
break: function () {
done = true;
callback();
}
};
loop.next();
return loop;
}
function bfs(userName, callback) {
userName = String(userName);
var q = [], res = [];
User.findOne({ "refUser" : userName }).lean().exec(function (err, root) {
root.depth = 0;
q.push(root);
asyncLoop(q.length, function (loop) {
res.push(q[0]);
User.find({ "refUser" : q[0].userName }).lean().exec(function (err, new_nodes) {
if (err) console.log(err);
else {
var d = q[0].depth;
q.shift();
loop.refresh(new_nodes.length + q.length);
if (new_nodes.length > 0) {
new_nodes.forEach(function (new_node) {
new_node.depth = d + 1;
q.push(new_node);
});
}
loop.next();
}
});
}, function () { callback(res) });
});
}
Finishing:
bfs(req.params.userName,function(callback){
res.send(callback)
})

AWS Lambda Javascript for AudioPlayer

Trying to code in Javascript on AWS Lambda. The code is meant for Alexa to go to a URL and stream the audio on there using the AudioPlayer.
Can't figure out what I am missing in this code or what is wrong with it and I get this error through the log.
Code:
'use strict';
var alexa = require('alexa-sdk');
var APP_ID = "amzn1.ask.skill.b5c95058-7134-4044-9e77-a4279e0adaf7";
var PAUSE_MESSAGE = "paused!";
var RESUME_MESSAGE = "resumed!";
exports.handler = function(event, context, callback) {
var alexa = Alexa.handler(event, context);
alexa.APP_ID = APP_ID;
alexa.registerHandlers(handlers);
alexa.execute();
};
var handlers = {
'play': function(audioURL, offsetInMilliseconds) {
var response = {
version: "1.0",
response: {
shouldEndSession: true,
directives: [{
type: "AudioPlayer.Play",
playBehavior: "REPLACE_ALL",
audioItem: {
stream: {
url: 'https://feeds.soundcloud.com/stream/275202399-amazon-web-services-306355661-amazon-web-services.mp3',
offsetInMilliseconds: 10
}
}
}]
}
}
this.context.succeed(response);
},
'AMAZON.PauseIntent': function() {
this.emit(':tell', PAUSE_MESSAGE);
},
'AMAZON.ResumeIntent': function() {
this.emit(':tell', RESUME_MESSAGE);
}
};

I ended up changing my code.
Code:
var lastPlayedByUser = {};
var streamURL = "http://cpdc101-lh.akamaihd.net/i/ISNCPDCMB1_1#314337/master.m3u8";
exports.handler = function(event, context) {
var player = new Player(event, context);
player.handle();
};
var Player = function (event, context) {
this.event = event;
this.context = context;
};
Player.prototype.handle = function () {
var requestType = this.event.request.type;
var userId = this.event.context ? this.event.context.System.user.userId : this.event.session.user.userId;
if (requestType === "LaunchRequest") {
this.play(streamURL, 0);
} else if (requestType === "IntentRequest") {
var intent = this.event.request.intent;
if (intent.name === "Play") {
this.play(streamURL, 0);
} else if (intent.name === "AMAZON.PauseIntent") {
this.stop();
} else if (intent.name === "AMAZON.ResumeIntent") {
var lastPlayed = this.loadLastPlayed(userId);
var offsetInMilliseconds = 0;
if (lastPlayed !== null) {
offsetInMilliseconds = lastPlayed.request.offsetInMilliseconds;
}
this.play(streamURL, offsetInMilliseconds);
}
} else if (requestType === "AudioPlayer.PlaybackStopped") {
this.saveLastPlayed(userId, this.event);
this.context.succeed(true);
}
};
Player.prototype.play = function (audioURL, offsetInMilliseconds) {
var response = {
version: "1.0",
response: {
shouldEndSession: true,
directives: [
{
type: "AudioPlayer.Play",
playBehavior: "REPLACE_ALL",
audioItem: {
stream: {
url: audioURL,
token: "0",
expectedPreviousToken: null,
offsetInMilliseconds: offsetInMilliseconds
}
}
}
]
}
};
this.context.succeed(response);
};
Player.prototype.stop = function () {
var response = {
version: "1.0",
response: {
shouldEndSession: true,
directives: [
{
type: "AudioPlayer.Stop"
}
]
}
};
this.context.succeed(response);
};
Player.prototype.saveLastPlayed = function (userId, lastPlayed) {
lastPlayedByUser[userId] = lastPlayed;
};
Player.prototype.loadLastPlayed = function (userId) {
var lastPlayed = null;
if (userId in lastPlayedByUser) {
lastPlayed = lastPlayedByUser[userId];
}
return lastPlayed;
};

How can I get sinon to yield to multiple callbacks

I am trying to stub several ajax calls, but I want to have both beforeSend and success executed, is this possible?
I want something like this:
var stub = sinon.stub(jQuery, "ajax");
stub.onCall(0).yieldsTo("beforeSend").yieldsTo("success", {some: 'data'});
stub.onCall(1).yieldsTo("beforeSend").yieldsTo("success", {other: 'stuff'});
But this skips the 'beforeSend' method.
I know it would be easier to allow ajax to do it's stuff and use sinon's fakeServer, but I can't as I'm testing in Node with a fake browser and it just doesn't work

You could use yieldTo after the call:
var stub = sinon.stub();
stub({
foo: function() {
console.log('foo');
},
bar: function() {
console.log('bar');
}
});
stub.yieldTo('foo');
stub.yieldTo('bar');

I was able to work around this by adding some additional code:
var responses = {};
var executionComplete;
beforeEach(function () {
executionComplete = $.Deferred();
sinon.stub($, "ajax", function (options) {
if (options.beforeSend) {
options.beforeSend();
}
completeAjaxCall(options);
});
});
afterEach(function () {
$.ajax.restore();
});
var completeAjaxCall = function (options) {
var response = findResponse(options.url, options.type);
setTimeout(function () {
if (response.code < 400) {
if (options.dataFilter && response.data) {
response.data = options.dataFilter(JSON.stringify(response.data));
}
if (options.success) {
options.success(response.data);
}
} else {
if (options.error) {
options.error(response.data);
}
}
if (options.complete) {
options.complete();
}
if (response.completeExecution) {
executionComplete.resolve();
}
}, response.serverResponseTime);
};
var findResponse = function (url, type) {
var response = responses[url];
expect(response, url + ' should have a response').to.exist;
expect(response.type).to.equal(type);
delete responses[url];
if (Object.keys(responses).length === 0) {
response.completeExecution = true;
}
return response;
};
var givenResponse = function (response) {
responses[response.url] = response;
};
Then in my test I can use it like this:
it('should do some stuff', function (done) {
//given
givenResponse({serverResponseTime: 4, code: 200, url: '/saveStuff', type: 'POST'});
givenResponse({serverResponseTime: 1, code: 200, url: '/getStuff', type: 'GET'});
//when
$('button').click();
//then
executionComplete.then(function () {
expect(something).to.be.true;
done();
});
});