I'm working on a simple application using twlio php library to make out going calls.
everything seems to be working as it should in web browser. However, when i test the simple php page in a mobile device (iphone for example), nothing works! I get the page loaded but I cannot make any outgoing calls!
this is my code:
<?php
include 'Services/Twilio/Capability.php';
// put your Twilio API credentials here
$accountSid = 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX';
$authToken = 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX';
// put your Twilio Application Sid here
$appSid = 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX';
$capability = new Services_Twilio_Capability($accountSid, $authToken);
$capability->allowClientOutgoing($appSid);
$capability->allowClientIncoming('jenny');
$token = $capability->generateToken();
?>
<!DOCTYPE html>
<html>
<head>
<title>Hello Client Monkey 4</title>
<script type="text/javascript"
src="//static.twilio.com/libs/twiliojs/1.2/twilio.min.js"></script>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>
<script type="text/javascript">
Twilio.Device.setup("<?php echo $token; ?>");
Twilio.Device.ready(function (device) {
$("#log").text("Ready");
});
Twilio.Device.error(function (error) {
$("#log").text("Error: " + error.message);
});
Twilio.Device.connect(function (conn) {
$("#log").text("Successfully established call");
});
Twilio.Device.disconnect(function (conn) {
$("#log").text("Call ended");
});
Twilio.Device.incoming(function (conn) {
$("#log").text("Incoming connection from " + conn.parameters.From);
// accept the incoming connection and start two-way audio
conn.accept();
});
function call() {
// get the phone number to connect the call to
params = {"PhoneNumber": $("#number").val()};
Twilio.Device.connect(params);
}
function hangup() {
Twilio.Device.disconnectAll();
}
</script>
</head>
<body>
<button class="call" onclick="call();">
Call
</button>
<button class="hangup" onclick="hangup();">
Hangup
</button>
<input type="text" id="number" name="number"
value="Phone Number/>
<div id="log">Loading pigeons...</div>
</body>
</html>
Could someone please advise on this issue? am I missing something?
Twilio developer evangelist here.
Sadly iOS does not currently support either WebRTC or Flash, both of the technologies that Twilio Client uses to make phone calls from your web browser. So, Twilio Client JavaScript will not work on an iPhone. Recent versions of Chrome on Android do support WebRTC, so you should be able to use Twilio Client on those devices.
Related
I have two laravel project with virtual host name 1) my.dev.com and 2) your.dev.com
I have create api for set cookie for cross domain and api is located at your.dev.com
Route::middleware('cors')->get('/hello', function () {
$cookie = Cookie::make('custom_cookie', 'hello_world', 10, "/", '.dev.com');
return response()->json('Hello worlds')->withCookie($cookie);
});
I make api call from my.dev.com and code is like this
<html>
<head>
<title>CORS</title>
</head>
<body>
<button type="button">Call API</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("body").on("click","button",function () {
$.get("http://my.dev.com/api/hello",function(data){
alert(data);
});
})
});
</script>
</body>
When I click Call API button from my.dev.com I get response Hello worlds but Cookie is not set your.dev.com
Even Cookie not set any .dev.com virtual host
I want to set Cookie at your.dev.com from my.dev.com with help of Ajax and code already posted here.
Your help would be appreciated.
Using PhoneGap, I'm trying to build a basic android app that makes an AJAX call to a PHP API and return some JSON data. The code, in its entirety works on the desktop, but it doesn't seem to work for my Android when I make a build. When I build the app, install it on my device, and load it up, I get blank screen.
Here's the client that I wrote... Is there anything wrong with this code?
<head>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.css" />
</head>
<body>
<script>
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
// Now safe to use the PhoneGap API
$.support.cors = true;
$.mobile.allowCrossDomainPages = true;
$.ajax({
url: 'http://api.example.com/test.php',
dataType: 'json',
timeout: 5000,
success: function(data, status) {
//data loaded
$('#results').append(data[0].about);
},
error: function() {
//error loading data
$('#results').append('No data received.');
}
});
$(document).ajaxError(function(event, request, settings) {
$("#msg").append("<li>Error requesting page " + settings.url + "</li>");
});
$(document).ajaxComplete(function(event, request, settings) {
$("#msg").append("<li>Request Complete.</li>");
});
}
</script>
<p id="results"></p>
<p id="msg"></p>
</body>
</html>
I also set the access origins in the config.xml to:
<access origin="http://example.com" subdomains="true" />
<access origin="*"/>
It seems that the AJAX code (and the global AJAX event handlers) is not getting called.
Be sure to have cordova.js included in the right location and available (e.g. by alert(<some cordova property>);). Then try if the onDeviceReady is called at all:
document.addEventListener("deviceready", function(){
alert("deviceready");
},false);
I'm getting new to "Pusher" (the websocket api) and I'm having hard time to understand how can I fetch information from the server after sending it to the channel.
For example, this is my code:
<?php
include "pusher/Pusher.php";
?>
<script src="http://js.pusher.com/2.1/pusher.min.js"></script>
<script type="text/javascript">
var pusher = new Pusher('c77c12b92e38f4156e9c');
var channel = pusher.subscribe('test-channel');
channel.bind('my-event', function(data) {
alert('An event was triggered with message: ' + data.message);
});
</script>
<?php
$pusher = new Pusher($config["pusher_key"], $config["pusher_secret"], $config["pusher_id"]);
$pusher->trigger(channel, 'my-event', array('message' => 'Test Message') );
Now, my information is sent to the server, but I don't know how to get it.
Thanks.
You can find the source for a very simple example here:
https://github.com/leggetter/pusher-examples/tree/master/php/hello-world/src
And this example working here:
http://www.leggetter.co.uk/pusher/pusher-examples/php/hello-world/src/
The problem you are seeing is that you are triggering the event on the server before the page has rendered in the browser. So, a connection has not been made by the browser to Pusher, nor has a subscription been made.
You can try something liked this,for php pusher library I used composer
<div class="notification">
</div>
<script>
var pusher = new Pusher('APP_KEY');
var notificationsChannel = pusher.subscribe('notification');
notificationsChannel.bind('new_notification', function(notification){
var message = notification.message;
toastr.success(message);
});
var sendNotification = function(){
var text = $('input.create-notification').val();
$.post('./notification/index.php', {message: text}).success(function(){
console.log('Notification sent!');
});
};
$('button.submit-notification').on('click', sendNotification);
</script>
HTML
<input class="create-notification" placeholder="Send a notification :)"/>
<button class="submit-notification">Go!</button>
Using PHP in this case
require(dirname(__FILE__).'/../vendor/autoload.php');
$app_id = 'APP_ID';
$app_key = 'APP_KEY';
$app_secret = 'APP_SECRET';
$pusher = new Pusher($app_key, $app_secret, $app_id,array( 'encrypted' => true ));
$data['message'] = $_POST['message'];
$pusher->trigger('notification', 'new_notification', $data);
For more follow this link
Recommended folder structure -
You can add following for more UX kind'a look -
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css">
<script src="https://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
<script src="http://js.pusher.com/2.2/pusher.min.js" type="text/javascript"></script>
I am attempting to construct an ajax form that integrates with the mailchimp API via a PHP script. I am passing variables successfully from AJAX using the form below:
<div id="mailchimp_form">
<p>Enter your email address below to get first dibs!</p>
<form>
<input type="email" value="" name="EMAIL" placeholder="Enter your email address to get first dibs...">
<button class="btn">Submit</button>
</form>
</div>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#mailchimp_form .btn").click(function (){
dataString = $("#mailchimp_form form").serialize();
$.ajax({
type: "POST",
url: "includes/subscribe.php",
data: dataString,
success: function(returnval) {
alert(returnval);
}
});
});
});
</script>
I know this because when I echo $_POST["EMAIL"] I get a response. When I pass the variable to the API call that is when I have a problem. The entire script just dies, no errors from the API, no errors from php, absolutely nothing, I know it dies because nothing echoes after the api call. What's ever stranger is when I run the API call with $my_email = "test#testemail.com" and run the PHP script by itself, everything works fine. All other API calls also work fine with ajax, listSubscribe is the only one I have any issues with. IF I type in an non-email into the email field the listSUbscribe api function reports it as an error (validation on the API's part is clearly working as well), but if i do type an email, absolutely nothing happens. No users are added to the list and nothing is in my inbox, spam or trash folders.
Can anyone give me even a slight clue as to what the issue could be, im completely lost on this one. The PHP code is beow:
function test($apikey,$listId) {
$api = new MCAPI($apikey);
$my_email = $_POST["EMAIL"];
$merge_vars = array("FNAME"=>'Sichard', "LNAME"=>'Wright');
$api->listSubscribe( $listId, $my_email, $merge_vars );
echo $my_email;
echo $api->errorCode;
}
test($apikey,$listId);
My includes:
require_once 'MCAPI.class.php';
require_once 'config.inc.php'; //contains apikey
Prevent the form to be submitted :
$("#mailchimp_form .btn").click(function (e){
// your ajax...
e.preventDefault();
return false;
});
To use wami recorder with java api wich file is needed. I have it's version with flash which contain
index.html as follow
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<!-- swfobject is a commonly used library to embed Flash content -->
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<!-- Setup the recorder interface -->
<script type="text/javascript" src="recorder.js"></script>
<script>
function setup() {
Wami.setup("wami");
}
function record() {
status("Recording...");
Wami.startRecording('http://localhost/audiorecording/test.php?name=demo.mp3');
}
function play() {
Wami.startPlaying("http://localhost/audiorecording/demo.mp3");
alert("It's start playing");
}
function stop() {
status("");
Wami.stopRecording();
alert("stop");
Wami.stopPlaying();
}
function status(msg) {
document.getElementById('status').innerHTML = msg;
}
</script>
</head>
<body onload="setup()">
<input type="button" value="Record" onclick="record()"></input>
<input type="button" value="Stop" onclick="stop()"></input>
<input type="button" value="Play" onclick="play()"></input>
<div id="status"></div>
<div id="wami"></div>
</body>
</html>
and one php file as
<?php
parse_str($_SERVER['QUERY_STRING'], $params);
$name = isset($params['name']) ? $params['name'] : 'output.wav';
$content = file_get_contents('php://input');
$fh = fopen($name, 'w') or die("can't open file");
fwrite($fh, $content);
fclose($fh);
?>
swfobject.js is available online
and the other one recoder.js and gui.js is available online
https://wami-recorder.googlecode.com/hg/example/client/index.html
the above thing is done by using flash but it's not working on all pc on click of button I got error as that respective function is not available and
Wami is not defined
Wami.setup("wami");
plz help me out of it or i saw official website of wami where they specify release of 2008 which is java dependent but i am not able to find out how to use it if you have any idea about it so plz reply.......
Let me first correct a few things:
Its JavaScript, not Java. Javascript is a script language used in browsers, Java is a C# like language used mostly for its compatibility in (hardware)platforms.
It does not depend on jQuery.
If you want to test on localhost, make sure that there is a server listening with a PHP interpreter (IIS/Apache etc).
Now to answer your "question":
https://wami-recorder.googlecode.com/hg/example/client/index.html this page covers all the basics.
Include the SWFObject
Include the recorder.js
Include the gui.js (!) You are missing this one.
It will now find the WAMI.setup function, which is inside gui.js.
Now you are good to go :).