How to show Camera Preview in metro app using javascript - microsoft-metro

i have StartPreviewAsync api to show camera preview on screen in C#
but not available in javascript ,so how can i get same preview(output) in javascript template??
or is any way to deploy xaml on javascript??

WinJS seems to have a different API for handling Camera Previews. I'd take a look at this example on MSDN for more details. Namely, in BasicCapture.js, we see the following function, startPreview:
function startPreview() {
displayStatus("Starting preview");
id("btnStartPreview" + scenarioId).disabled = true;
var video = id("previewVideo" + scenarioId);
video.src = URL.createObjectURL(mediaCaptureMgr, { oneTimeOnly: true });
video.play();
displayStatus("Preview started");
getCameraSettings();
// Initialize sliders.
for (var i = 0; i < cameraControlSliders.length; i++) {
cameraControlSliders[i].slider.disabled = false;
initSlider(cameraControlSliders[i]);
}
}
To answer your second question, the only way to load Javascript into a XAML application would be through the WebView control, and even that would not be allowed to directly control the different controls of the XAML UI. If you want to do XAML, you have to stick to C#, VB, or C++.

Related

Share image on Facebook

WP8 how to share data from my app to Facebook
or twitter
i want to take screen-shoot of my list-box and then share it on Facebook
i try this code
ShareLinkTask shareLinkTask = new ShareLinkTask();
shareLinkTask.Title = "Code Samples";
shareLinkTask.LinkUri = new Uri("https://www.facebook.com/", UriKind.Absolute);
shareLinkTask.Message = "Here are some great code samples for Windows Phone.";
shareLinkTask.Show();
but it doesnot work
You should not use ShareLinkTask for sharing photos. You should use ShareMediaTask. You can more information and how to implement ShareMediaTask by clicking link I provided herewith.
Here's the code:
CameraCaptureTask cameraCaptureTask = new CameraCaptureTask();
//declare it globally
cameraCaptureTask.Completed += cameraCaptureTask_Completed;
//declare it in Constructor
cameraCaptureTask.Show();
//declare it in any method.
For example, button click event. By using this method, you can capture the list box.
//declare this method anywhere in the cs page
void cameraCaptureTask_Completed(object sender, PhotoResult e)
{
if(e.TaskResult == TaskResult.OK)
{
ShowShareMediaTask(e.OriginalFileName);
}
}
void ShowShareMediaTask(string path)
{
ShareMediaTask shareMediaTask = new ShareMediaTask();
shareMediaTask.FilePath = path;
shareMediaTask.Show();
}
Now, You can easily take screenshot of app's listbox and share it with any of the social networks where user installed on their phone. Cheers.!

How to add google+ share callback in Gigya Wordpress plugin?

I am currently using Gigya wordpress plugin to implement the share bar in Wordpress but I need to be able to track the share event and I am not using Google Analytic. Any idea how I can add a callback in this plugin to enable tracking? The reason I need to use a callback is because google plus share is in an iframe and I can't bind the click event.
I've read this documentation but this is using the Gigya api which is different than the wordpress plug. I tried to use this piece of code and it is not doing anything.
// onSendDone - event handler method, called after Gigya finishes the sharing process
// Reports the event to your Analytics provider
function onSendDone(event) {
console.log('click');
if(event.providers) {
var providers = event.providers.split(",");
for(i = 0; i < providers.length; i++) {
var provider = providers[i];
// Report the event to your Analytics provider
//waTrackPlusOne_vote(provider);
console.log('pass in ' + provider);
}
}
}
var ua = new gigya.services.socialize.UserAction();
var currentURL = window.location.href;
var $currentTitle = $j('title').text();
ua.setLinkBack(currentURL);
ua.setTitle($currentTitle);
// Define Share Bar plugin's Parameters
var shareBarParams ={
userAction:ua,
shareButtons: "google-plusone",
containerID: '.gig-button-container-google-plusone', // location of the Share Bar plugin,
onSendDone: onSendDone // onSendDone method is called after Gigya finishes the publishing process.
}
// Load Share Bar plugin
gigya.services.socialize.showShareBarUI(shareBarParams);
I have just faced the same problem, here it's how I've done it.
At some points when setting up the Gigya Share Button you will have to declare a variable called "shareParams", invoked in gigya.services.socialize.showShareUI(shareParams).
Just add 'onSendDone' : yourFunctionName to the shareParams object.
Example:
var shareParams = {
'userAction' : {0},
'onSendDone' : myNamespace.GigyaSendDone
}
gigya.services.socialize.showShareUI(shareParams);
When the sharing is successfully completed, this Javascript action will be invoked.
So thanks to Emanuele Ciriachi, I found the js api code in the plugin. Once modified it, I think this will resolve my issue.

DOM manipulation with PhantomJS

I am using PhantomJS to create screenshots from arbitrary URLs. Before the screenshot is taken, I want to manipulate the page DOM to remove all drop-down menus, as PhantomJS renders them incorrectly in the top left-hand corner of the page (a known Phantom issue.)
I have a simple DOM script to do this with:
var selects = document.getElementsByTagName('select');
for (var i=0; i < selects.length; i++) {
document.getElementsByTagName('select')[i].style.visibility="hidden";
}
This has been tested and works fine as stand-alone Javascript. It doesn't however work inside the PhantomJS code I am using to collect the screenshots (last part shown):
page.open(address, function (status) {
if (status !== 'success') {
console.log('Unable to load the address!');
} else {
window.setTimeout(function () {
var selects = document.getElementsByTagName('select');
for (var i=0; i < selects.length; i++) {
document.getElementsByTagName('select')[i].style.visibility="hidden";
}
page.render(output);
phantom.exit();
}, 200);
}
});
Some pages are still rendering with a select box in the wrong place. I'd appreciate help either solving the original PhantomJS rendering bug or hiding the drop-down menus in the DOM. Thanks.
Run it in the right context, i.e. inside the page with page.evaluate. There are many examples included with PhantomJS which demonstrate this, e.g. useragent.js.
This code doesn't work?
I used your cached selects variable in the for loop instead of re-selecting the elements from the DOM to improve performance.
var selects = document.getElementsByTagName('select');
for (var i=0; i < selects.length; i++) {
selects[i].style.visibility="hidden";
}

How do I get DotNetOpenAuth to open a popup window for authentication?

I am relatively new to web development, so perhaps this is a rookie question. I am trying to set up an ASP.NET MVC web site to implement DotNetOpenAuth as an OpenID relying party.
Right now it is all functioning, so that is pretty exciting. My goal though was to have the OpenID authentication take place it a popup window. This seems to be the default behavior when you using WebForms with the DNOA custom controls, but I haven't been able to figure it out in MVC.
I thought I was getting close with this:
var request = OpenIdRp.CreateRequest(id);
request.AddExtension(new UIRequest(Mode = UIModes.Popup));
But the Mode field of the UIRequest is read-only.
Does anybody know how to create a request that tells the OpenID provider to open a popup window?
Thanks for any help. So far I have been unable to track down any samples of this in action.
On the v.3.4.5 I am using, Mode property of the UIRequest has both getter and setter.
var req = openid.CreateRequest(openid_identifier);
// Add UI Request
if (req.DiscoveryResult.IsExtensionSupported<UIRequest>())
{
req.AddExtension(new UIRequest()
{
Mode = UIModes.Popup
});
You have to create the popup yourself. After the authentication takes place, you should refresh the parent window and close the popup.
At the form's submission I have
<form action="/Account/OpenIdLogOn" target="popupWin" onsubmit="return openWindow('/Account/OpenIdLogOn', 'popupWin', 500, 500);">
where
function openWindow(url, wname, width, height) {
window.open(url, wname, "height=" + height + ",width=" + width + "location = 0, status = 1, resizable = 0, scrollbars=1, toolbar = 0");
return true;
}
and at the result view I have the following javascript
<script type="text/javascript">
$(function () {
if (window.opener) {
window.opener.location.href = window.opener.location.href;
window.close();
}
});
</script>
I hope this makes sense.
The Nerddinner site has exactly what you need. It's written in MVC, and you can download the source code here: http://nerddinner.codeplex.com/ .

YUI AutoComplete Example Problem

I was hunting for an implementations of YUI AutoComplete and I came across this script from the site asklaila.com -
<script type="text/JavaScript">
YAHOO.example.ACJson = new function() {
this.oACDS = new YAHOO.widget.DS_XHR("/AutoComplete.do",
["Suggestions[0].Results","Name"]);
this.oACDS.queryMatchContains = true;
this.oACDS.scriptQueryAppend = "city=Mysore"; // Needed for YWS
function fnCallback(e, args) {
document.searchForm.where.focus();
acSelected = true;
return false;
}
this.oAutoComp = new YAHOO.widget.AutoComplete('what','whatContainer', this.oACDS);
this.oAutoComp.itemSelectEvent.subscribe(fnCallback);
this.oAutoComp.formatResult = function (oResultItem,sQuery) {
return oResultItem[0];
}
this.oAutoComp.queryDelay = 0;
this.oAutoComp.useIFrame = true;
this.oAutoComp.prehighlightClassName = "yui-ac-prehighlight";
this.oAutoComp.minQueryLength = 2;
this.oAutoComp.autoHighlight = false;
this.oAutoComp.textboxFocusEvent.subscribe(function() {
this.oAutoComp.sendQuery("");
});
this.oAutoComp.doBeforeExpandContainer = function(oTextbox, oContainer, sQuery, aResults) {
var pos = YAHOO.util.Dom.getXY(oTextbox);
pos[1] += YAHOO.util.Dom.get(oTextbox).offsetHeight + 2;
YAHOO.util.Dom.setXY(oContainer,pos);
return true;
};
}
</script>
It is implenting the YUI AutoComplete Dropdown. What I want to understand is what this
this.oACDS = new YAHOO.widget.DS_XHR("/AutoComplete.do", ["Suggestions[0].Results","Name"]);
does and its effects on code.
That's using an older version of YUI, but it is setting up a DataSource for the autocomplete to read from. This particular DataSource uses XHR to request information from the server to populate the autocomplete field.
"Autocomplete.do"
Is a relative URL that is being queried by the DataSource every time the autocomplete fires while the user is typing.
["Suggestions[0].Results","Name"]
Is the responseSchema that tells the DataSource how to parse the results from the request to the URL. It needs to know how to parse the data so that it can show the proper results.
this.oACDS = new YAHOO.widget.DS_XHR("/AutoComplete.do", ["Suggestions[0].Results","Name"]);
On every key press, it fetches a json response from the server, and uses it to populate the autocomplete dropdown. The json contains names to display only at this node, "Suggestions[0].Results" in the "name" field.
If you have any trouble, ask ahead. I wrote that piece of code for asklaila.com
I was hunting for implementations of
YUI Autocomplete and I came across
this script...
Why not take a look at YUI AutoComplete page for in-depth examples.
Yahoo! UI Library: AutoComplete