Video steaming recived but not playing in WebRTC - sockets

I am trying to create a audio broadcasting app using WebRTC. To make it compatible with IE I am using Teamsys plugin from Attlasian.
In most of the demos available on internet I have seen two audio/video controls on a single page. But I am trying it with two page application. one for sender and another for reciever.
I am sending my stream description using XHR to a database where it is received by the another user and used as local description for the peer connection on receiver end.
Here is the code :
Sender
function gotStream(stream) {
console.log('Received local stream');
// Call the polyfill wrapper to attach the media stream to this element.
localstream = stream;
audio1 = attachMediaStream(audio1, stream);
pc1.addStream(localstream);
console.log('Adding Local Stream to peer connection');
pc1.createOffer(gotDescription1, onCreateSessionDescriptionError);
}
function gotDescription1(desc) {
pc1.setLocalDescription(desc);
console.log('Offer from pc1 \n' + desc);
console.log('Offer from pc1 \n' + desc.sdp);
$.ajax({
type: "POST",
url: '../../home/saveaddress',
contentType: "application/json; charset=utf-8",
data: JSON.stringify({ SDP: desc }),
dataType: "json",
success: function (result) {
if (result) {
console.log('SDP Saved');
}
});
}
function iceCallback2(event) {
if (event.candidate) {
pc1.addIceCandidate(event.candidate,
onAddIceCandidateSuccess, onAddIceCandidateError);
console.log('Remote ICE candidate: \n ' + event.candidate.candidate);
}
}
At Receiver End
var pcConstraints = {
'optional': []
};
pc2 = new RTCPeerConnection(servers, pcConstraints);
console.log('Created remote peer connection object pc2');
pc2.onicecandidate = iceCallback1;
pc2.onaddstream = gotRemoteStream;
$.ajax({
type: "GET",
url: '../../home/getsavedaddress',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (result) {
if (result) {
gotDescription1(result);
}
},
error: function () {
}
});
function gotDescription1(desc) {
console.log('Offer from pc1 \n' + desc.sdp);
console.log('Offer from pc1 \n' + pc2);
pc2.setRemoteDescription(new RTCSessionDescription(desc));
pc2.createAnswer(gotDescription2, onCreateSessionDescriptionError,
sdpConstraints);
}
Using this I get the SDP from server , vedio tag has a source now. but video is not playing not showing anything.a an y clues..
also I am using asp.net for site , do I need to use node js in this project.
Thanks

Your question is lacking information, but I will give my opinion on it.
Are you supporting Trickle ICE? It seems you may be sending the SDP too fast!
When you do a
pc1.setLocalDescription(desc);
The ICE Candidates start being gathered based on the TURN and STUN server configured in your code here (servers parameter):
pc2 = new RTCPeerConnection(servers, pcConstraints);
That said, they are not yet included in your SDP. It can take a few milliseconds before the media ports are set in the localDescription Object. Your first error is that you are sending the "desc" Object from gotDescription1 instead of the post setLocalDescription SDP. That SDP doesn't have the proper media ports yet.
In your code, you are sending the SDP right away without waiting. My guess is that the SDP is not yet completed and you are not supporting Trickle. Because of that, even if signalling might look good, you will not see any media flowing.

Related

Service workers "sync" operation is working while its offline?

I have a PWA project where I send the data to server. During this process, if the user is offline then the data is stored in indexedDb and a sync tag is registered. So, then when the user comes online that data can sent to the server.
But In my case the sync event gets executed immediately when the we register a sync event tag, which means the data is tried to be sent to server while its offline, which is not going to work.
I think the sync event supposed to fire while its online only, what could be issue here ?
The service worker's sync event works accordingly when I tried to enable and disable the offline option of chrome devtools, and also works correctly in my android phone.
This is how I register my sync tag
function onFailure() {
var form = document.querySelector("form");
//Register the sync on post form error
if ('serviceWorker' in navigator && 'SyncManager' in window) {
navigator.serviceWorker.ready
.then(function (sw) {
var post = {
datetime1: form.datetime1.value,
datetime: form.datetime.value,
name: form.name.value,
image: form.url.value,
message: form.comment.value
};
writeData('sync-comments', post)
.then(function () {
return sw.sync.register('sync-new-comment');
})
.then(function () {
console.log("[Sync tag registered]");
})
.catch(function (err) {
console.log(err);
});
});
}
}
And this is how the sync event is called
self.addEventListener('sync', function (event) {
console.log("[Service worker] Sync new comment", event);
if (event.tag === 'sync-new-comment') {
event.waitUntil(
readAllData('sync-comments')
.then(function (data) {
setTimeout(() => {
data.forEach(async (dt) => {
const url = "/api/post_data/post_new_comment";
const parameters = {
method: 'POST',
headers: {
'Content-Type': "application/json",
'Accept': 'application/json'
},
body: JSON.stringify({
datetime: dt.datetime,
name: dt.name,
url: dt.image,
comment: dt.message,
datetime1: dt.datetime1,
})
};
fetch(url, parameters)
.then((res) => {
return res.json();
})
.then(response => {
if (response && response.datetimeid) deleteItemFromData('sync-comments', response.datetimeid);
}).catch((error) => {
console.log('[error post message]', error.message);
})
})
}, 5000);
})
);
}
});
you mention
The service worker's sync event works accordingly when I tried to enable and disable the offline option of chrome devtools, and also works correctly in my android phone.
So I'm not sure which case is the one failing.
You are right that the sync will be triggered when the browser thinks the user is online, if the browser detects that the user is online at the time of the sync registration it will trigger the sync:
In true extensible web style, this is a low level feature that gives you the freedom to do what you need. You ask for an event to be fired when the user has connectivity, which is immediate if the user already has connectivity. Then, you listen for that event and do whatever you need to do.
Also, from the workbox documentation
Browsers that support the BackgroundSync API will automatically replay failed requests on your behalf at an interval managed by the browser, likely using exponential backoff between replay attempts.

Uploading large files (200+ mbs) from by ajax to sharepoint 2013 on premise

I'm trying to upload files to a library on sharepoin 2013 on premise by Ajax. I'm using the following code:
function uploadFileee(file) {
// var file = element.files[0];
console.log(file);
var reader = new FileReader();
reader.onload = function (e) {
enviar(e.target.result, file.name);
}
reader.onerror = function (e) {
alert(e.target.error);
}
//reader.readAsArrayBuffer(file);
reader.readAsArrayBuffer(file);
function enviar(file, name) {
var url = String.format(
"{0}/_api/Web/Lists/getByTitle('{1}')/RootFolder/Files/Add(url='{2}', overwrite={3})",
_spPageContextInfo.webAbsoluteUrl, "TreinamentoLib", name, "true");
console.log(url);
jQuery.ajax({
url: url,
type: "POST",
data: file,
processData: false,
headers: {
Accept: "application/json;odata=verbose",
"X-RequestDigest": jQuery("#__REQUESTDIGEST").val()
},
success: function (data) {
console.log("sucesso");
},
error : function(err)
{
console.log("erro");
}
})
}
}
As long the file is below 200mb's, it works just fine, but bigger than that, the browser crashes.
Chunks just work on the online version of sharepoint.. cound't make it work on On Premise.
Already though on creating an webApi in C# to receive the chunks and group it together and upload it to the library..
Anyone have ever done something like it? does anyone have any sugestion?
In SharePoint On Premise, you can try to increase the maxRequestLength="51200" executionTimeout="999999" in the web.config file at "C:\Inetpub\wwwroot\wss\VirtualDirectories\< Virtual Directory >" folder.
Or check maximum upload size for the web application : Central Admin> Application Management> Manage Web Applications> Select the desired web app and click General Settings on the ribbon.

Sending voip push notification from one signal triggered firebase cloud functions

I`m trying to send Voip push notification from one signal triggered by firebase cloud functions. So far it being able to send normal message push notifications from one signal to IOS devices using firebase cloud functions with below code.
var sendNotification = function(data) {
var headers = {
"Content-Type": "application/json; charset=utf-8"
};
var options = {
host: "onesignal.com",
port: 443,
path: "/api/v1/notifications",
method: "POST",
headers: headers
};
var https = require('https');
var req = https.request(options, function(res) {
res.on('data', function(data) {
console.log("Response:");
console.log(JSON.parse(data));
});
});
req.on('error', function(e) {
console.log("ERROR:");
console.log(e);
});
req.write(JSON.stringify(data));
req.end();
};
var message = {
app_id: "*********************",
contents: {"en": "English Message"},
include_player_ids: ["******************7b0bdc38"]
};
sendNotification(message);
Does anyone know how to send Voip push notifications from one signal using firebase cloud functions??
(If the above code is required to change some part of it, it would be very thankful telling me where it is.)
As per one signal documentation (https://documentation.onesignal.com/docs/voip-notifications) you are missing the DEVICE_VOIP_TOKEN that you should have received from the iOS application.
Please try adding that and let me know, think of adding the exact error message if any.

making jquery AJAX POST to resful API

I'm trying to convert a REST call using Cordova plugin to a JQuery AJAX POST. I don't have the JQuery code right, the call is getting a connection refused error (hitting localhost). I'm successfully making GET requests to my localhost, so there isn't a connectivity issue.
The REST API code:
#Path("/track")
public class TrackResource {
...
The method in TrackResource class i'm trying to hit :
#POST
#Path("{trackid}")
#Consumes("application/json")
#Produces("application/json")
public Response addToResource(#PathParam("trackid") String trackid, String bodyJson) {
The AJAX code:
var trackingJSON = JSON.stringify(tracking_data);
var urlAjax = "http://localhost:7001/ds/resources/track/" + trackid;
$.ajax({
type: "POST",
url: urlAjax,
data: trackingJSON,
beforeSend: function() { $.mobile.showPageLoadingMsg("b", "Loading...", true) },
complete: function() { $.mobile.hidePageLoadingMsg() },
success: function(data) { alert("ajax worked"); },
error: function(data) {alert("ajax error"); },
dataType: 'json'
});
I'm not sure if i'm using the data option in the ajax call correctly, but it's my understanding that is where you would put the data you want to pass server side.
I do have other GET calls to this same TrackResource class working, so i know the base part of the URL is correct. I know the trackid value is populated correctly as well.
If you're posting a JSON string make sure you also set contentType: "application/json".
var trackingJSON = JSON.stringify(tracking_data);
var urlAjax = "http://localhost:7001/ds/resources/track/" + trackid;
$.ajax({
type: "POST",
url: urlAjax,
contentType: "application/json",
data: trackingJSON,
beforeSend: function() { $.mobile.showPageLoadingMsg("b", "Loading...", true) },
complete: function() { $.mobile.hidePageLoadingMsg() },
success: function(data) { alert("ajax worked"); },
error: function(data) {alert("ajax error"); },
dataType: 'json'
});
I needed to use the router address of my computer, 192...., in order to hit my localhost... I was running the application on an actual Android device, however, I guess trying to use localhost or 127.0.0.1 in the AJAX call must have been causing issues.

Facebook batch calls with JSONP

As of 10.04.2012,
There is a short paragraph in the Facebook developer document for 'batch request' entitled: Batch calls with JSONP, which reads:
"The Batch API supports JSONP, just like the rest of the Graph API -
the JSONP callback function is specified using the 'callback' query string
or form post parameter."
I thought that meant you can also do a batch request using JSONP from Javascript (which will be a GET request, as JSONP works only as a GET request), so I tried that, with adding a 'batch' parameter (containing objects describing requests for batch as in the doc) to the query string. Response from FB server was:
Only POST is allowed for batch requests
So, questions:
1. What did they mean in that paragraph?
2. Is there a way to do an asynchronous batch request from Javascript?
I get the same. Sample code is
jQuery.support.cors = true;
var AjaxRequest = jQuery.ajax( {
url: "http://graph.facebook.com/",
type: "POST",
contentType: "application/x-www-form-urlencoded",
data: { "access_token": AccessToken, "batch": BatchRequest },
dataType: "jsonp",
error: function( jqXHR, textStatus, errorThrown ) {
... show error stuff
},
success: function( Return, textStatus, jqXHR ) {
showLog( "Return " + JSON.stringify( Return ) );
showLog( "textStatus " + textStatus );
showLog( "jqXHR " + JSON.stringify( jqXHR ) );
if ( Return.error ) {
... go away
}
else {
... use the data
}
}
} ); // eo ajax request
which gives
Return {"error":3,"error_description":"Only POST is allowed for batch requests"}
textStatus success
jqXHR {"readyState":4,"status":200,"statusText":"success"}
i.e. it successfully sends back an error message. JSONP translates the POST type to a GET, which Facebook doesn't support...
To answer qu.2 you can use FB.api to do asynchronous batch request in javascript. I was trying out JSONP because IE8 keeps hanging on the return from Facebook with FB.api.