AngularJS + HTML5 record audio file - javascript

I'm looking for a simple solution to record audio file and upload it to s3.
My web searches come up to find:
WebRTC-Experiment which is the most popuplar solution i could find.
it also have a working example in the following link : https://www.webrtc-experiment.com/RecordRTC/
I also found ngCamRecorder which wasn't supported by firefox yet.
I'm looking for a simple solution + working example, and suggestion.
Which solution is most popuplar to use with AngularJS?
if you can provide your own example or link to a working example that i can use.
if you also used S3 i would like to know how you can push the file to S3, and get the link to the controller.
The solution i found, throw error, and include a working example without the code itself explained.
I also would like to know how to push it to s3.
This is the code i implemented from the example:
$scope.start_recording = function()
{
navigator.getUserMedia(session, function (mediaStream) {
window.recordRTC = RecordRTC(MediaStream);
recordRTC.startRecording();
}, function(error){console.log(error)});
};
$scope.stop_recording = function()
{
navigator.getUserMedia({audio: true}, function(mediaStream) {
window.recordRTC = RecordRTC(MediaStream);
recordRTC.startRecording();
});
};
It simply throw an error: undefined is not a function on recordrtc.js line 641
if(!mediaStream.getAudioTracks().length) throw 'Your stream has no audio tracks.';
obviously mediaStrem is null.
Thanks.

There's an AngularJS wrapper for this, it's a simple directive that supports HTML5 (RecorderJS), Cordova Media and Flash.
Usage is straightforward
<ng-audio-recorder audio-model="someModel" auto-start="false">
<!-- controls -->
<button ng-click='recorder.startRecording()'>Start</button>
<button ng-click='recorder.stopRecording()'>Stop</button>
</ng-audio-recorder>
You can see the full usage here:
https://github.com/logbon72/angular-recorder

I got the same issue and figured it out. The function argument in the success function of navigation.getUserMedia() is supposed to be "MediaStream" instead of "mediaStream".

Related

Add HyperLink With Word JavaScript API

I'm having difficulties to add an HyperLink to my Word Document using the Javascript API. I've look to Doc and I can't find any hints how to accomplish my duty...
Here is my Question: What is the best way to add an HyperLink inside a Word Document using the Javascript API.
And Here is what I tried:
Word.run((context: Word.RequestContext) => {
var range = context.document.getSelection();
context.load(range, "hyperlink");
return context.sync().then(() => {
range.font.highlightColor = '#FFFF00';
range.hyperlink = "C:\My Documents\MyFile.doc";
}).then(context.sync);
});
I've added the highlightColor just to have a visual that my changes are being sync. Everything seems fine but the Hyperlink property is not being updated. Am I missing something?
And If you guys are wondering what's this syntax, I'm using TypeScript.
Good, if you don't mind i will reply in JavaScript :)
Setting a hyperlink to a file must work (provided that the file exists :) ). I have this simplified example working successfully, btw you don't need to load the range for setting this.
Also hyperlinks is now supported as preview, so please make sure that you are running an updated (latest) version of Word (go file and install updates) and most importantly make sure you are using the preview CDN for Office.js which is here: https://appsforoffice.microsoft.com/lib/beta/hosted/office.js
Word.run(function(context) {
// Insert your code here. For example:
context.document.getSelection().hyperlink = "C:\My Documents\MyFile.doc";
return context.sync();
});

How to access call logs in android using Cordova?

I want to access recent call logs using Cordova but there is no official plugin for that, some guy made a custom plugin for that https://github.com/dalyc/Cordova-CallLog-Plugin is the only hope for me, but the problem is this plugin is no longer supported by its creator and it is using AngularJS in his example. I did my search work and found that People tried to use this plugin to use with javascript but they got no working solution. As the author mentioned here https://github.com/dalyc/Cordova-CallLog-Plugin/issues/4 there are 3 functions that will work with javascript.
window.plugins.calllog.list : get recent calls - takes a day limit e.g 7 is go back a week
window.plugins.calllog.show : show contact for specified phone number
window.plugins.calllog.contact : get contact details for specified phone number
I tried each of them and apparently window.plugins.calllog.show is working fine and it is showing contact for specific numbers. But window.plugins.calllog.list did not worked for me it is returning "undefined". Need help please. Thanks in advance.
my index.html contains
<button id="call_log" onclick="loadLogs();">call log</button>
my app.js contains
//calllog
function loadLogs() {
if(window.plugins.calllog == "undefined"){
alert("Doesn't works");
}
else
{
alert("works");
window.plugins.calllog.show('12345');
//this code is working and opening list of contacts having these "12345" in their phonenumber
var list = window.plugins.calllog.list('7');
alert(list[0]);
}
}
Uncaught TypeError: Cannot read property '0' of undefined
Here is a plugin I have made
https://www.npmjs.com/package/callsplugin
you basically have to write the command
cordova plugin add callsplugin
and follow the instruction you find in the project site

PreloadJS cannot find audio

I'm working on hobby project. I'm using createjs. But, of course, I have a problem. Since I update the code to use Preloadjs, the browser can no longer find the audio files. Here is my loading code:
function load (canvasToShowProgress) {
canvas = canvasToShowProgress;
loadingStage = new createjs.Stage();
loadQueue = new createjs.LoadQueue(true);
progessText = new createjs.Text("Loading... 0%");
loadingStage.addChild(loadingStage);
loadingStage.update();
//start loading
loadQueue.installPlugin(createjs.Sound);
loadQueue.setMaxConnections(4); // Allow 4 concurrent loads
loadQueue.loadManifest("configuration/GameAssets.json");
loadQueue.on("progress", handleProgress);
loadQueue.on("complete",handleComplete);
}
My manifest GameAssets.json looks like this:
{"manifest":
[ {"src":"images/game/street.png", "id":"street"},
{"id":"Default", "src":"sounds/game/background.ogg"},
{"id":"Psychic", "src":"sounds/game/ps.ogg"},
{"id":"Nitro", "src":"sounds/game/ntr.ogg"}
]
}
By the way, the image is loaded perfectly. In the music player class, I call the audio by simply doing soundInstance = createjs.Sound.play(soundIds[currentPlayIndex]);. (The soundIds is temporary a hardcoded array with the ids. Where is my mistake?
First, I just want to confirm you are using the latest 0.6.0 releases of both SoundJS and PreloadJS (they need to be used together).
Currently only Firefox and Chrome support Ogg, so if you are using another browser you would need to provide and alternate format (mp3 is currently the most broadly supported) and set it up using SoundJS.alternateExtensions.
If you are still having loading errors, you'd likely need to dig into the errors a little more to determine the cause.
Hope that helps.
Your soundIds array declare like this
var soundIds=["Default","Psychic","Nitro"]
then call it like that
createjs.Sound.play(soundIds[0]);

Using Html5 Notification in Blackberry Webworks

I am using HTML5 Local Notifications in Blackberry 10 (Higher Version BB z10) using webworks 1.0
And it works fine for Me.
The code used look like this.
var n = new Notification("MyMessage", {
'body' : content.message,
'tag': content.chatid,
'target' : "MyMessage",
'targetAction' : "bb.action.OPEN"
});
The link of this api reference is here
Blackberry Webworks Notification
Now there is one more field as ""
payload: Payload to send to the invoked app. Data must be Base64 encoded. Value is passed on to the Invocation Framework as data.
This to open a specific html page based on the notification you click.
I am not able to use it correctly. Also blackberry support forms do not give reply or any sample for this.
Question I asked in Blackberry Support Forums
I think there is a simpler way of achieving what you are trying to do.
First of all allow me to point you to the notification sample:
https://github.com/blackberry/BB10-WebWorks-Samples/blob/master/notify/.
To answer your specific query you need to bear in mind 2 things in the following order:
(1). The app needs to be invokable so you need to modify the config.xml and the index.html respectively:
config.xml
<rim:invoke-target id="com.myApp.entrypoint">
<type>APPLICATION</type>
<filter>
<action>bb.action.OPEN</action>
<mime-type>text/plain</mime-type>
</filter>
</rim:invoke-target>
where "id" is your unique ID (ie. nobody else should be using that)
index.html or index.js
document.addEventListener("invoked", onInvoked, false);
add the above after the system has fired the "deviceready" event.
The "onInvoked" function will look like:
function onInvoked(data) {
var pageToOpen = data.URI;
//do something with pageToOpen now
}
(2). Your notification will need to have the attribute "payLoadURI" set to the html page that you want to open. I'm thinking It will be something like
local:///myPage.html
This "myPage.html" it's what your "pageToOpen" variable will receive and at that stage you can push the right HTML fragment to the top.
I hope it helps.
P.S. this has been tested with WebWorks 2.0 so I would advise you to upgrade for a better experience.

How do I load an external file and make sure that it runs first in JSFiddle?

I have a JsFiddle here, and added Microsoft AJAX to be loaded through external JS/resource section. How can I tell whether or not my JS code is run after the AJAX file has finished loading?
Seems that the AJAX does not load either. :(
Here is the code in the JSFiddle:
Type.registerNamespace("Tutorial.Chapter1");
Tutorial.Chapter1.Person = function(firstName, lastName) {
this._firstName = firstName;
this._lastName = lastName;
};
Tutorial.Chapter1.Person.prototype = {
set_firstName: function(value) {
this._firstName = value;
},
get_firstName: function() {
return this._firstName;
},
set_lastName: function(value) {
this._lastName = value;
},
get_lastName: function() {
return this._lastName;
},
_firstName: "",
_lastName: "",
displayName: function() {
alert("Hi! " + this._firstName + " " + this._lastName);
}
};
Tutorial.Chapter1.Person.registerClass("Tutorial.Chapter1.Person", null);
The External Resources tab of jsFiddle is currently somewhat tricky and unstable to use.
The resources defined here are often not correctly included into the code. There seems to be an issue with the automatic recognition of JS and CSS resources. If this happens, the external resource is simply not added to the head section of the resulting code. You can check that by reviewing the source code of the Result frame of your jsFiddle. You will find that your MS AJAX resource is simply NOT mentioned in the resulting HTML code.
The correct recognition can actually be forced by adding a dummy value to the resource's URL like this (see –>jsFiddle docs for more info):
...&dummy=.js
Here is an example that shows how to add the external Google Maps API resource to a jsFiddle (mind the dummy parameter at the very end!):
https://maps.googleapis.com/maps/api/js?sensor=false&dummy=.js
Unfortunately this won't work for you as the MS AJAX URL will fail when additional parameters are appended.
A solution (and currently the safest way to load external resources) is to avoid the External Resources tab altogether and load external code manually in the first line(s) of jsFiddle's HTML window like this:
<script type='text/javascript' src="http://ajax.aspnetcdn.com/ajax/3.5/MicrosoftAjax.js"></script>
Here is your jsFiddle modified to use that method: http://jsfiddle.net/rEzW5/12/
It actually does not do a lot (I did not check what is wrong with the rest of your code), but at least it does not throw JavaScript errors anymore.
Open "Add Resources" section and add the url of your external script...
#Jpsy's approach no longer seems to work (see my comment under his answer).
For me, adding the resource under External Resources also didn't work. (According to the Firefox Debugger, it couldn't find the resource).
The only way I was able to get an external bit of JavaScript code (in my case jquery.backstretch.js) to work, was to use Google to find a Fiddle which used this resource (and worked), then Fork this Fiddle and copy/paste all my code into the HTML, CSS and JavaScript panels. Ugh!
#clayRay, You absolutely went thru a code surgery. Just resolved that by mentioning external source in plain html which in my case is
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
Using External Resources tab didn't help a bit...

Categories

Resources