Guys
I made a simple easyXDM code, it do not work on IE8, but works fine in all the other browsers, please help to find if I made any mistakes in my code.
(I got access denied error in IE8).
Local Domain:
$(document).ready(function(){
var rpc = new easyXDM.Rpc({
'local': "lib/name.html",
'remote': "http://10.74.80.70:1291/XDMtest/query.html",
'remoteHelper': "http://10.74.80.70:1291/XDMtest/name.html",
'lazy': false,
'timeout': 10 * 1000,
'swf': "lib/easyxdm.swf",
'swfNoThrottle': true,
'container': 'embeded'
},{
'remote': {
XDMquery:{}
},
'local':{
getReturn: function(response,callback){
// pass response into callback's parameter
callback(response);
}
}
});
rpc.XDMquery({
"url": "http://10.74.80.70:1291/api/product/GetAllProducts",
"method":"GET",
'dataType': 'json',
'contentType': 'application/json; charset=utf-8',
"crossDomain": true
},function(response){
console.log(response);
$("h1").text(response.status)
});
});
Remote Domain:
var xhr;
var internalQuery = function(queryObj,callback){
$.ajax(queryObj).complete(function(response){
xhr.getReturn(response,callback);
})
}
$(document).ready(function(){
xhr = new easyXDM.Rpc(
{
"local": "lib/query.html",
"swf": "lib/easyxdm.swf",
"swfNoThrottle": true
},
{
"local": {
XDMquery: function(obj,callback){
internalQuery(obj,callback);
}
},
"remote":{
getReturn: {}
}
}
);
});
The problem is coming from jquery library, if change to jquery1.10.0 in remote server, this problem can be fixed.
Related
I am trying to save Video recorded through Video.js to save on server, below is my code
<script>
var player = videojs("myVideo",
{
controls: true,
width: 320,
height: 240,
plugins: {
record: {
audio: true,
video: true,
maxLength: 41,
debug: true
}
}
});
player.on('startRecord', function()
{
console.log('started recording!');
});
player.on('finishRecord', function()
{
console.log('finished recording: ', player.recordedData);
});
function uploadFunction()
{
**//WRITE CODE TO SAVE player.recordedData.video in specified folder//**
}
</script>
Live Implementation : https://www.propertybihar.com/neo/videxp1/index.html
I was going through one the previously asked question, dint worked for me
How can javascript upload a blob?
If you scroll down to the "Upload" section on the README, you'll see this code snipped that does what you want, except for a streaming application:
var segmentNumber = 0;
player.on('timestamp', function() {
if (player.recordedData && player.recordedData.length > 0) {
var binaryData = player.recordedData[player.recordedData.length - 1];
segmentNumber++;
var formData = new FormData();
formData.append('SegmentNumber', segmentNumber);
formData.append('Data', binaryData);
$.ajax({
url: '/api/Test',
method: 'POST',
data: formData,
cache: false,
processData: false,
contentType: false,
success: function (res) {
console.log("segment: " + segmentNumber);
}
});
}
});
That is configured for continuously uploading the data but I've found I've had to make a few changes to it for my own setup:
On Chrome 64 with VideoJS 6.7.3 and VideoJS-Record 2.1.2 it seems that player.recordedData is not an array but just a blob.
I wanted to upload the video at a particular time, not streaming so I trigger the upload myself.
As a result, my upload code looks something like this:
if (player.recordedData) {
var binaryData = player.recordedData.video;
// ... Rest of that FormData and $.ajax snippet from previous snippet
}
If I don't do it this way, that check for existing data to upload always fails. I also trigger this code manually, rather than attaching it to the "timestamp" event of the player object. Of course, you'll need to have server side code that will accept this upload.
I'm trying to implement a very simple video chat based on the WebRTC API.
Unfortunately my Code is just working from Chrome-to-Chrome and from Firefox-to-Firefox so far.
If I try it from Chrome-to-Firefox or from Firefox-to-Chrome I get the following error output:
Failed to set local offer sdp: Session error code: ERROR_CONTENT. Session error description: Failed to set local video description recv parameters..(anonymous function) # helloWebRtc.js:126***
Did I possibly missed something or do I need some flags in the Chrome or Firefox browser?
Do you have any idea? I would be grateful for any help I can get to solve this issue.
Thank you all in advance!
My helloWebRtc.js looks like this:
var localVideo = document.querySelector("#localVideo");
var remoteVideo = document.querySelector("#remoteVideo");
var SIGNAL_ROOM = "signal_room";
var CHAT_ROOM = "chat_room";
var serverConfig = {
"iceServers": [
{
"urls": "stun:stun.l.google.com:19302"
}
]
};
var optionalConfig = {
optional: [
{
RtpDataChannels: true
},
{
DtlsSrtpKeyAgreement: true
}
]
};
var rtcPeerConn,
localStream;
io = io.connect();
io.emit("ready", {"chat_room": CHAT_ROOM, "signal_room": SIGNAL_ROOM});
io.emit("signal", {
"room": SIGNAL_ROOM,
"type": "user_here",
"message": "new user joined the room"
});
io.on("rtcSignaling", function(data) {
if(!rtcPeerConn) {
startSignaling();
}
if(data.type !== "user_here" && data.message) {
var message = JSON.parse(data.message);
if(message.description) {
var remoteDesc = new RTCSessionDescription(message.description);
rtcPeerConn.setRemoteDescription(remoteDesc, function() {
// if we receive an offer we need to answer
if(rtcPeerConn.remoteDescription.type === "offer") {
rtcPeerConn.createAnswer(sendLocalDescription, function(error) {
console.error("error on creating answer", error);
});
}
}, function(error) {
console.error("error on set remote description", error);
});
} else if(message.candidate) {
var iceCandidate = new RTCIceCandidate(message.candidate);
rtcPeerConn.addIceCandidate(iceCandidate);
}
}
});
function startSignaling() {
rtcPeerConn = new RTCPeerConnection(serverConfig, optionalConfig);
//send any ice candidate to the other peer
rtcPeerConn.onicecandidate = function(event) {
if(event.candidate) {
io.emit("signal", {
"room": SIGNAL_ROOM,
"type": "candidate",
"message": JSON.stringify({
"candidate": event.candidate
})
});
}
};
rtcPeerConn.onnegotiationneeded = function() {
rtcPeerConn.createOffer(sendLocalDescription, function(error) {
console.error("error on creating offer", error);
});
};
// add the other peer's stream
rtcPeerConn.onaddstream = function(event) {
console.info("on add stream called");
remoteVideo.srcObject = event.stream;
};
// add local stream
navigator.mediaDevices.getUserMedia({
audio: true,
video: true
})
.then(function(stream) {
localVideo.srcObject = stream;
localStream = stream;
rtcPeerConn.addStream(localStream);
})
.catch(function(e) {
alert('getUserMedia() error: ' + e.name);
});
}
function sendLocalDescription(description) {
rtcPeerConn.setLocalDescription(
description,
function() {
io.emit("signal", {
"room": SIGNAL_ROOM,
"type": "description",
"message": JSON.stringify({
"description": rtcPeerConn.localDescription
})
});
},
function(error) {
console.error("error to set local desc", error);
}
);
}
My NodeJS server (using express.io) looks like the following:
var express = require('express.io');
var app = express();
var PORT = 8686;
app.http().io();
console.log('server started # localhost:8686');
// declaring folders to access i.e.g html files
app.use(express.static(__dirname + '/views'));
app.use('/scripts', express.static(__dirname + '/scripts'));
// root url i.e. "localhost:8686/"
app.get('/', function(req, res) {
res.sendFile('index.html');
});
/**
* Socket.IO Routes for signaling pruposes
*/
app.io.route('ready', function(req) {
req.io.join(req.data.chat_room);
req.io.join(req.data.signal_room);
app.io.room(req.data.chat_room).broadcast('announce', {
message: 'New client in the ' + req.data.chat_room + ' room.'
});
});
app.io.route('send', function(req) {
app.io.room(req.data.room).broadcast('message', {
message: req.data.message,
author: req.data.author
});
});
app.io.route('signal', function(req) {
// Note: req means just broadcasting without letting the sender also receive their own message
if(req.data.type === "description" || req.data.type === "candidate")
req.io.room(req.data.room).broadcast('rtcSignaling', {
type: req.data.type,
message: req.data.message
});
else
req.io.room(req.data.room).broadcast('rtcSignaling', {
type: req.data.type
});
});
app.listen(PORT);
You can compare the offer SDP generated by the chrome and firefox, there might be some difference which is not interoperable to other.
Edit to the old answer below: there are several bugs in interoperability between Chrome and Firefox. Someone from the webrtc team gave me the suggestion to keep the offerer to the same party. So if A creates an offer when setting up a stream to B, then B asks A to create a new offer, instead of creating one self, when setting up a stream to A.
See also here:
https://bugs.chromium.org/p/webrtc/issues/detail?id=5499#c15
I did note that if Firefox initiates a session, Chrome will kick the stream coming from Firefox out of the video element but you can create a new object URL on the stream and set it as the source.
Hope that helps.
Old message:
I am experiencing the same thing, so if you have an answer, I'm curious.
I do believe that there is a mismatch (bug) between FireFox and Chrome in setting up DTLS roles, see also:
https://bugs.chromium.org/p/webrtc/issues/detail?id=2782#c26
just check if you are setting DtlsSrtpKeyAgreement parameter to true while you create the peerconnection.
pc = new RTCPeerConnection(pc_config,{optional: [{RtpDataChannels: true},{
DtlsSrtpKeyAgreement: true}]});
I have the following function it suppose to talk to another server retrieve the json data and display it the problem is the function is not even initiating a query I'm I doing something wronge? the code is uploaded into the apache tomcat server and I used wireshark for traces and there are none on the http port here is the code
$(document).ready( function() {
var home_add='http://wcf.net:3300/gateway';
$('#handshake').click(function(){
alert(" sending json data");
function handshake(){ /*testing the function */
var data_send = {
"supportedConnectionTypes": "long-polling",
"channel": "/meta/handshake",
"version": "1:0"
};
$.ajax({ /* start ajax function to send data */
url:home_add,
type:'POST',
datatype:'json',
contanttype:'text/json',
async: false,
error:function(){ alert("handshake didn't go through")}, /* call disconnect function */
data:JSON.stringify(data_send),
success:function(data){
$("p").append(data+"<br/>");
alert("successful handshake")
}
})
}
})})
Thank you in advance for the feedback
Lava
u dont call handshake function...
$(document).ready(function () {
var home_add = 'http://wcf.net:3300/gateway';
$('#handshake').click(function () {
alert(" sending json data");
$.ajax({ /* start ajax function to send data */
url: home_add,
type: 'POST',
datatype: 'json',
contanttype: 'text/json',
async: false,
error: function () { alert("handshake didn't go through") }, /* call disconnect function */
data: {
"supportedConnectionTypes": "long-polling",
"channel": "/meta/handshake",
"version": "1:0"
},
success: function (data) {
$("p").append(data + "<br/>");
alert("successful handshake")
}
});
});
});
If you are using Internet Explorer you have add following code in to your jsp page in head section
<script src="https://github.com/douglascrockford/JSON-js/blob/master/json2.js" />
Try this one and check, may be it will work.
All,
I've moved on to using the ui autocomplete rather than the plugin, took me a while to figure out extra params based on an example I found here, but that part works.
I'm having problems with dealing with the return data. In the code below I can alert out the title being returned, but I get a drop down of 'UNDEFINED' in the browser.
Thanks in advance.
$('#DocTitle').autocomplete({
source: function(request, response) {
$.ajax({
url: "index.pl",
dataType: "json",
data: {
Title: request.term,
maxRows: 10
},
success: function(data) {
response($.map(data, function(item) {
alert(item.TITLE);
return {
TITLE: item.TITLE
}
}))
}
})
}
});
I am using jquery UI autocomplete as follows and it is working quite fine for me. You may try on the similar lines.
$('input[type=text][name=City]').autocomplete({
source: function(request, response) {
$.getJSON($('input#CitySuggestionsLink').val(), {
term: request.term,
stateId: $('select#StateName option:selected').attr('value')
}, response);
},
search: function() {
// custom minLength
var term = this.value;
if (term.length < 1) {
return false;
}
},
delay: 200,
focus: function() {
// prevent value inserted on focus
return false;
},
select: function(event, ui) {
return false;
}
});
I'm trying to build a tree from json data, this data are loaded on demand from php files. My problem is that i can't find a way to get to lvl 3 ;). Here is my code:
$(document).ready(function()
{
//Get the screen height and width
var Height = $(document).height()/2;
var Width = $(window).width()/2;
$("#div1").hide();
$("#div2").hide('slow');
$.ajax(
{
type: 'post',
async: true,
url: "getparents.php",
data: {'id' : 12200},
dataType: "json",
cache: false,
beforeSend: function ()
{
//Show the Loading GIF at centered position
$('#loading').css({'top': Height, 'left': Width}).show();
},
success: function(json_data)
{
$("#div1").empty().show();
$('<ul class="parentContainer"></ul>').appendTo("#div1");
$.each(json_data, function(key, object)
{
$('<li id="node">'+object.name+'</li>').data('id', object.id).appendTo(".parentContainer");
if (object.childbool == true)
{
$('li:last').addClass('childfull')
}
});
},
error: function ()
{
$('#loading').hide();
alert('Something Went Wrong with the Loading please hit back in a minute');
},
complete: function ()
{
$('#loading').hide();
}
});
function getChild(id, node)
{
$.ajax(
{
type: 'post',
async: true,
url: "getchilds.php",
data: {'id' : id},
dataType: "json",
cache: false,
beforeSend: function ()
{
$('#loading').show();
},
success: function(json_data)
{
$('<ul class="childContainer"></ul>').appendTo(node);
$.each(json_data, function(key, object)
{
$('<li id="node">'+object.name+'</li>').data('id', object.id).appendTo(".childContainer");
if (object.childbool == true)
{
$('li:last').addClass('childfull')
}
});
},
error: function ()
{
$('#loading').hide();
alert('Something Went Wrong with the Loading please hit back in a minute');
},
complete: function()
{
$('#loading').hide();
}
});
}
$("li.childfull, li.openchildfull").live('click',function()
{
if ($('li.childfull'))
{
var node = $(this);
var id= $(this).data('id');
$(node).html(getChild(id, node));
$(node).removeClass().addClass('openchildfull');
}
else
{
$(node).removeClass().addClass('childfull');
$(node).children().remove();
}
});
});
I think .live is killing me. I get my parents on load; when I click on one I get its children ALL pretty and well, but when I click on a child to get its children I get a very funny behavior. I get its children correctly indented but with no class="childfull" and I get an other copy of them not properly indented but with correct class.. I don't know what is going wrong... Any ideas/corrections are welcome.
P.S: You don't want me to describe to you what happens when I click on the messed up 3rd lvl childfull :P.
Instead of going through the headache of building your own tree, have a look at the jstree plugin. You can pass different formats to it, including json. It allows for complete customization and allows infinite(possible :p) child levels.