The below example which is given in Google Developers, is working in Chrome/Firfox with out having any issues but not in IE and I am using IE Version#11 (Latest) in windows 8.1.
The chart is not displaying in IE and it a java script error i am getting.![enter image description here][1]
Note:
1. Similar error i am getting when i use Google Developers-JSON example also...to fetch the records from Bigquery and showing in a table...like executing in chrome/firefox but not in IE???
2. If possible Can you please provide and ASP.NET web application example, to connect google BigQuery and showing the Data in GRIDView with C#.NET (NOT WITH ASP.NET MVC)
<html>
<head>
<script src="https://apis.google.com/js/client.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', { packages: ['geochart'] });
</script>
<script>
// UPDATE TO USE YOUR PROJECT ID AND CLIENT ID
var project_id = 'XXXXXXXXX';
var client_id = 'XXXXXXXXXXXXXXXXXXXXXX.apps.googleusercontent.com';
var config = {
'client_id': client_id,
//'P12_KEY': 'Keys/ab2c867e84d6d629f0a80595ae14fdbe44492de8 - privatekey.P12',
//'SERVICE_ACCOUNT' : '87853623787-7lsfbcuu9p3gr9o76opp5fkrvhdf0itk#developer.gserviceaccount.com',
'scope': 'https://www.googleapis.com/auth/bigquery'
};
function runQuery() {
var request = gapi.client.bigquery.jobs.query({
'projectId': project_id,
'timeoutMs': '30000',
'query': 'SELECT state, AVG(mother_age) AS theav FROM [publicdata:samples.natality] WHERE year=2000 AND ever_born=1 GROUP BY state ORDER BY theav DESC;'
});
request.execute(function (response) {
console.log(response);
var stateValues = [["State", "Age"]];
$.each(response.result.rows, function (i, item) {
var state = item.f[0].v;
var age = parseFloat(item.f[1].v);
var stateValue = [state, age];
stateValues.push(stateValue);
});
var data = google.visualization.arrayToDataTable(stateValues);
var geochart = new google.visualization.GeoChart(
document.getElementById('map'));
geochart.draw(data, { width: 556, height: 347, resolution: "provinces", region: "US" });
});
}
function auth() {
gapi.auth.authorize(config, function () {
gapi.client.load('bigquery', 'v2', runQuery);
$('#client_initiated').html('BigQuery client initiated');
});
$('#auth_button').hide();
}
</script>
</head>
<body>
<h2>Average Mother Age at First Birth in 2000</h2>
<button id="auth_button" onclick="auth();">Authorize</button>
<button id="query_button" style="display:none;" onclick="runQuery();">Run Query</button>
<div id="map"></div>
</body>
</html>
Perhaps because you have console.log() statement and IE doesn't like that.
Related
Using the new jsPDF .html() pretty much pulled straight from their docs, but it still results in a blank page:
Results in blank page:
function saveDoc() {
window.html2canvas = html2canvas
const doc = document.getElementById('doc')
if (doc) {
var pdf = new jsPDF('p', 'pt', 'a4')
pdf.html(doc.innerHTML, {
callback: function (pdf) {
pdf.save('DOC.pdf');
}
})
}
}
Results in no PDF generated:
function saveDoc() {
window.html2canvas = html2canvas
const doc = document.getElementById('doc')
if (doc) {
var pdf = new jsPDF('p', 'pt', 'a4')
pdf.html(doc.innerHTML, {
function (pdf) {
pdf.save('DOC.pdf');
}
})
}
}
Also results in blank page:
function saveDoc() {
window.html2canvas = html2canvas
const doc = document.getElementById('doc')
if (doc) {
var pdf = new jsPDF('p', 'pt', 'a4')
pdf.html(doc, {
callback: function (pdf) {
pdf.save('DOC.pdf');
}
})
}
}
Will use another tool if there are any other suggestions. Need it to be secure and generate selectable text PDF to keep overall size down. It's a long document it's generating and when doing it via addImage() the resulting file is huge. Thoughts?
After trying whole day came with following solution. I think we are getting blank page because of versions of html2canvas. I was using updated jspdf(1.5.3) with html2canvas(1.0.0-rc.3). Due to this I was getting blank pdf. When I use html2canvas(1.0.0-alpha.12) with jspdf(1.5.3) I am getting pdf with contents(not blank). So better to change version of html2canvas in order to work with newly .html() method.
// scripts included
<script type="text/javascript" src="html2canvas.js"></script> // 1.0.0-alpha.12 downloaded
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js" integrity="sha384-NaWTHo/8YCBYJ59830LTz/P4aQZK1sS0SneOgAvhsIl3zBu8r9RevNg5lHCHAuQ/" crossorigin="anonymous"></script>
//html
<div id='doc'>
<p>Hello world</p>
<div class="first-page">
<h1>bond</h1>
<img src="1.png"/>
</div>
<div class="second-page">
<img src="2.png"/>
</div>
</div>
<button onclick="saveDoc()">click</button>
// javascript
<script type="text/javascript">
var pdf = new jsPDF('p', 'pt', 'a4');
function saveDoc() {
window.html2canvas = html2canvas
const doc = document.getElementsByTagName('div')[0];
if (doc) {
console.log("div is ");
console.log(doc);
console.log("hellowww");
pdf.html(document.getElementById('doc'), {
callback: function (pdf) {
pdf.save('DOC.pdf');
}
})
}
}
</script>
html2canvas 1.0.0 alpha.12
.html() not working github
For me the working solution was to add the callback/promise behavior --- pdf.html(doc).then(() => pdf.save('fileName.pdf')); Seems that html() method works async and the file to be downloaded was not ready when downloading based on the other example --- that's why it was empty.
I tried this code:
<html>
<head>
</head>
<body>
<video src="" id="video1"></video>
<video src="" id="video2"></video>
<textarea id="lesdp"></textarea><p id="btn">Activer</p>
</body>
<script>
navigator.getUserMedia({audio:true,video:true}, function(stream) {
var video1 = document.querySelector("#video1")
video1.src = window.URL.createObjectURL(stream)
video1.play()
}, function() {
})
var pc = new RTCPeerConnection()
pc.createOffer(function success(offer) {
var sdp = offer;
alert(JSON.stringify(sdp))
}, function error() {
})
var btn = document.querySelector("#btn");
btn.addEventListener('click', function() {
console.log("clicked")
var lesdp = JSON.parse(document.querySelector('#lesdp').value);
pc.setRemoteDescription(new RTCSessionDescription(lesdp), function(streamremote) {
var video2 = document.querySelector("#video2");
video2.srcObject = window.URL.createObjectURL(streamremote)
video2.play()
}, function() {
})
})
</script>
</html>
You can test it here: https://matr.fr/webrtc.html
Open a navigator, copy the popup offer string object, paste it into the textarea, then click "Activer" and look at the error in the console.
So when I click on the "Activer" button, it has this error:
Failed to execute 'createObjectURL' on 'URL': No function was found
that matched the signature provided.
Please help me. I use Google Chrome to test it.
You're calling window.URL.createObjectURL(undefined) which produces that error in Chrome.
streamremote is undefined because setRemoteDescription resolves with nothing by design.
You've only got about half the code needed to do a cut'n'paste WebRTC demo. Compare here.
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<!-- IE9 or superior -->
<meta http-equiv="X-UA-Compatible" content="IE=9">
<title>People Picker HTML Markup</title>
<!-- Widgets Specific CSS File -->
<link rel="stylesheet"
type="text/css"
href="../Scripts/Office.Controls.css" />
<!-- Ajax, jQuery, and utils -->
<script src="~/Scripts/MicrosoftAjax.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
// Function to retrieve a query string value.
// For production purposes you may want to use
// a library to handle the query string.
function getQueryStringParameter(paramToRetrieve) {
var params =
document.URL.split("?")[1].split("&");
var strParams = "";
for (var i = 0; i < params.length; i = i + 1) {
var singleParam = params[i].split("=");
if (singleParam[0] == paramToRetrieve)
return singleParam[1];
}
}
</script>
<!-- Cross-Domain Library and Office controls runtime -->
<script type="text/javascript">
//Register namespace and variables used through the sample
Type.registerNamespace("Office.Samples.PeoplePickerBasic");
//Retrieve context tokens from the querystring
Office.Samples.PeoplePickerBasic.appWebUrl =
decodeURIComponent(getQueryStringParameter("SPAppWebUrl"));
Office.Samples.PeoplePickerBasic.hostWebUrl =
decodeURIComponent(getQueryStringParameter("SPHostUrl"));
//Pattern to dynamically load JSOM and and the cross-domain library
var scriptbase =
Office.Samples.PeoplePickerBasic.hostWebUrl + "/_layouts/15/";
//Get the cross-domain library
$.getScript(scriptbase + "SP.RequestExecutor.js",
//Get the Office controls runtime and
// continue to the createControl function
function () {
$.getScript("../Scripts/Office.Controls.js", createControl)
}
);
</script>
<!--People Picker -->
<script src="../Scripts/Office.Controls.PeoplePicker.js"
type="text/javascript">
</script>
</head>
<body>
Basic People Picker sample (HTML markup declaration):
<div id="PeoplePickerDiv"
data-office-control="Office.Controls.PeoplePicker">
</div>
<script type="text/javascript">
function createControl() {
//Initialize Controls Runtime
Office.Controls.Runtime.initialize({
sharePointHostUrl: Office.Samples.PeoplePickerBasic.hostWebUrl,
appWebUrl: Office.Samples.PeoplePickerBasic.appWebUrl
});
//Render the widget, this must be executed after the
//placeholder DOM is loaded
Office.Controls.Runtime.renderAll();
}
</script>
</body>
</html>
I want to create a people picker function in SharePoint Provider-Hosted app. I tried this tutorial: https://msdn.microsoft.com/en-us/library/office/dn636915.aspx
I'm stuck on this error.
Invalid field or parameter url in SP.Executor.js
Check whether your SP.RequestExecutor.js is loaded successfully or not if not then you can give the path of the same and load it directly or you can use the below code to get the SP.RequestExecutor.js
var scriptbase = hostweburl + "/_layouts/15/";
$.getScript(scriptbase + "SP.Runtime.js",
function () {
$.getScript(scriptbase + "SP.js",
function () { $.getScript(scriptbase + "SP.RequestExecutor.js", createControl); }
);
}
);
Hope this will resolve your issue.
This solved my error. Thanks to #Rahul for the hint
var scriptbase = hostWebUrl + "/_layouts/15/";
$.getScript(scriptbase + "SP.Runtime.js",
function () {
$.getScript(scriptbase + "SP.js",
function () { $.getScript(scriptbase + "SP.RequestExecutor.js",
$.getScript("../Scripts/Office.Controls.js", createControl));
}
);
}
);
Hey I am trying to implement the getstat API in my WebRTC application. Im finding it hard to get any tutorials at all , at a beginners level.
My Application
I created a 2 person chat-room using the peer js framework. so in my application I am using what can be described a "Sneeker-net" for signaling , ie I am manually sharing a peer id with the person I want a chat with via giving them my id in a email lets say then they call that ID . it uses the stun and turn servers to make our connections its a simple peer to peer chat with Html5 and JavaScript which uses the peerjs API.
here is my HTML 5 AND Javascript code
HTML5 code
<html>
<head>
<title> PeerJS video chat with manual signalling example</title>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.peerjs.com/0.3/peer.js"></script>
<script type="text/javascript" src="ps-webrtc-peerjs-start.js ></script>
</head>
<body>
<div>
<!-- Video area -->
<div id="video-container">
Your Friend<video id="their-video" autoplay class="their-video"></video>
<video id="my-video" muted="true" autoplay class="my-video"></video> You
</div>
<!-- Steps -->
<div>
<h2> PeerJS Video Chat with Manual Signalling</h2>
<!--Get local audio/video stream-->
<div id="step1">
<p>Please click 'allow' on the top of the screen so we can access your webcam and microphone for calls</p>
<div id="step1-error">
<p>Failed to access the webcam and microphone. Make sure to run this demo on an http server and click allow when asked for permission by the browser.</p>
Try again
</div>
</div>
<!--Get local audio/video stream-->
<!--Make calls to others-->
<div id="step2">
<p>Your id: <span id="my-id">...</span></p>
<p>Share this id with others so they can call you.</p>
<p><span id="subhead">Make a call</span><br>
<input type="text" placeholder="Call user id..." id="callto-id">
Call
</p>
</div>
<!--Call in progress-->
<!--Call in progress-->
<div id="step3">
<p>Currently in call with <span id="their-id">...</span></p>
<p>End call</p>
</div>
</div>
</div>
</body>
</html>
My Javascript file
navigator.getWebcam = (navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia);
// PeerJS object ** FOR PRODUCTION, GET YOUR OWN KEY at http://peerjs.com/peerserver **
var peer = new Peer({
key: 'XXXXXXXXXXXXXXXX',
debug: 3,
config: {
'iceServers': [{
url: 'stun:stun.l.google.com:19302'
}, {
url: 'stun:stun1.l.google.com:19302'
}, {
url: 'turn:numb.viagenie.ca',
username: "XXXXXXXXXXXXXXXXXXXXXXXXX",
credential: "XXXXXXXXXXXXXXXXX"
}]
}
});
// On open, set the peer id so when peer is on we display our peer id as text
peer.on('open', function() {
$('#my-id').text(peer.id);
});
peer.on('call', function(call) {
// Answer automatically for demo
call.answer(window.localStream);
step3(call);
});
// Click handlers setup
$(function() {
$('#make-call').click(function() {
//Initiate a call!
var call = peer.call($('#callto-id').val(), window.localStream);
step3(call);
});
$('end-call').click(function() {
window.existingCall.close();
step2();
});
// Retry if getUserMedia fails
$('#step1-retry').click(function() {
$('#step1-error').hide();
step();
});
// Get things started
step1();
});
function step1() {
//Get audio/video stream
navigator.getWebcam({
audio: true,
video: true
}, function(stream) {
// Display the video stream in the video object
$('#my-video').prop('src', URL.createObjectURL(stream));
// Displays error
window.localStream = stream;
step2();
}, function() {
$('#step1-error').show();
});
}
function step2() { //Adjust the UI
$('#step1', '#step3').hide();
$('#step2').show();
}
function step3(call) {
// Hang up on an existing call if present
if (window.existingCall) {
window.existingCall.close();
}
// Wait for stream on the call, then setup peer video
call.on('stream', function(stream) {
$('#their-video').prop('src', URL.createObjectURL(stream));
});
$('#step1', '#step2').hide();
$('#step3').show();
}
Many thanks to anybody who takes time out to help me I am very grateful, as Im only a beginner at WebRTC .
Cheers
Here is my code, which works in both Chrome and Firefox. It traces stats in the browser console. Because Chrome stats are very verbose, I filter them following an arbitrary criteria (statNames.indexOf("transportId") > -1):
function logStats() {
var rtcPeerConn = ...;
try {
// Chrome
rtcPeerConn.getStats(function callback(report) {
var rtcStatsReports = report.result();
for (var i=0; i<rtcStatsReports.length; i++) {
var statNames = rtcStatsReports[i].names();
// filter the ICE stats
if (statNames.indexOf("transportId") > -1) {
var logs = "";
for (var j=0; j<statNames.length; j++) {
var statName = statNames[j];
var statValue = rtcStatsReports[i].stat(statName);
logs = logs + statName + ": " + statValue + ", ";
}
console.log(logs);
}
}
});
} catch (e) {
// Firefox
if (remoteVideoStream) {
var tracks = remoteVideoStream.getTracks();
for (var h=0; h<tracks.length; h++) {
rtcPeerConn.getStats(tracks[h], function callback(report) {
console.log(report);
}, function(error) {});
}
}
}
}
You need the rtcPeerConnection, and Firefox requires the stream in addition.
for twilio SDK look at this post:
Is there an API for the chrome://webrtc-internals/ variables in javascript?
var rtcPeerConn =Twilio.Device.activeConnection();
rtcPeerConn.options.mediaStreamFactory.protocol.pc.getStats(function callback(report) {
var rtcStatsReports = report.result();
for (var i=0; i<rtcStatsReports.length; i++) {
var statNames = rtcStatsReports[i].names();
// filter the ICE stats
if (statNames.indexOf("transportId") > -1) {
var logs = "";
for (var j=0; j<statNames.length; j++) {
var statName = statNames[j];
var statValue = rtcStatsReports[i].stat(statName);
logs = logs + statName + ": " + statValue + ", ";
}
console.log(logs);
}
}
});
I advice you to read Real-Time Communication with WebRTC for O'Reilly
It is very useful book for beginners in addition the book will guide you to build your webchat application ste by step using sokcet.io for signaling
the link in the first comment
I'm a beginner in dojo, and I'm trying to print the output to console using dojo code. But I don't what's the problem in the following code, and how can I print the output to the console?
<html>
<head>
<script type = "text/javascript" src = "dojo/dojo.js" data-dojo-config = "async: true, isDebug : true" >
</script>
</head>
<body>
<h1 id = "greeting">Hello</h1>
<script>
define(["dojo/dom"],function(dom) {
var Twitter = declare(null, {username:"defaultusername",
say :function(msg)
{
console.log("Hello "+msg);
}
});
var myInstance = new Twitter();
myInstance.say("Dojo");
});
</script>
</body>
</html>
Use require instead of define:
<script>
require(["dojo/dom", "dojo/_base/declare"], function(dom, declare) {
var Twitter = declare(null, {
username: "defaultusername",
say :function(msg) {
console.log("Hello "+msg);
}
});
var myInstance = new Twitter();
myInstance.say("Dojo");
});
</script>
Console works, but your code inside callback function in declare is not being executed until you require it.
You cannot define in inline script code, that is meant to be a class define, put in the topmost line of a class-file, meaning define maps the filename to the returned value of its function.
This means, if you have
dojo_toolkit /
dojo/
dijit/
dojox/
libs/
myWidgets/
foo.js
And foo.js reads
define(["dijit._Widget"], function(adijit) {
return declare("libs.myWidgets.foo", [adijit], function() {
say: function(msg) { console.log(msg); }
});
});
Then a new module is registered, called libs / myWidgets / foo. You should make sure that the returned declare's declaredClass inside each define matches the file hierachy.
That being said, reason why define does not work for you is the explaination above. It is inline and has no src to guess the declaredClass name from. Rewrite your code to define("aTwitterLogger", [":
define("aTwitterLogger", ["dojo/_base/declare", "dojo/dom"],function(declare, dom) {
var Twitter = declare(null, {
username:"defaultusername",
say :function(msg)
{
console.log("Hello "+msg);
}
});
var myInstance = new Twitter();
myInstance.say("Dojo");
});