I am testing twillio functionality. The backend(sending tokens, access rights) works fine. In frontend part I get the video from remote participant without sound. We can see eachother. I can't hear him and he can't hear me. How to repair it? I would like to have sound and I would like to have option to mute/unmute sound from my microphone so that the remote participant can't hear me. If you have any other suggestions to my code please let me know.
This is part of my html:
<div class="container" id="conversation">
<div>
<video id="localVideo" ></video>
<video id="patientVideo"></video>
<div class="buttons">
<span>
<a href="{% url 'calendar' %}?day={{ request.GET.day }}">
<img class="btn" id="call" src="{% static 'images/conversation/Finish-phone-call.png' %}"
alt="call"/></a>
</span>
<span>
<img class="btn" id="mute" src="{% static 'images/conversation/Icon-microphone-mute-01.png' %}"
alt="mute"/>
<img class="btn" id="unmute" src="{% static 'images/conversation/Icon-microphone-unmute-01.png' %}"
alt="mute"/>
</span>
</div>
</div>
This is part of my javascript. It works. I can connect to the room and I can share videos between participants.:
var local_participant;
var videoRoom;
$("#call").click(function () {
sendNotification("Call canceled");
if(videoRoom) {
videoRoom.disconnect();
}
});
$("#mute").click(function () {
$(this).hide("fast", function () {
$("#unmute").show();
local_participant.audioTracks.forEach(function (audioTrack) {
audioTrack.enable();
});
});
});
$("#unmute").click(function () {
$(this).hide(function () {
$("#mute").show();
});
local_participant.audioTracks.forEach(function (audioTrack) {
audioTrack.disable();
});
});
Twilio.Video.connect(doctor_token, {name: room_name}).then(function (room) {
videoRoom = room;
Twilio.Video.createLocalVideoTrack({audio: true}).then(function (localTrack) {
localTrack.attach("#localVideo");
room.localParticipant.addTrack(localTrack);
local_participant = room.localParticipant;
});
room.on('participantConnected', function (participant) {
console.log('Participant connected: ' + participant.identity);
});
room.on('participantDisconnected', function (participant) {
console.log('Participant disconnected: ' + participant.identity);
});
room.on('trackAdded', function (track, participant) {
console.log(participant.identity + " added track: " + track.kind);
track.attach("#patientVideo");
});
room.on('trackRemoved', function (track, participant) {
console.log(participant.identity + " removed track: " + track.kind);
track.detach("#patientVideo");
});
});
Twilio developer evangelist here.
In your code you get the local user's video track by calling:
Twilio.Video.createLocalVideoTrack({audio: true})
However createLocalVideoTrack does not create audio tracks. Instead, you should call createLocalTracks:
Twilio.Video.createLocalTracks()
The default options for createLocalTracks are { video: true, audio: true } so that should be all you need. The promise resolves with an array of LocalTracks so you will need to update your callback code too.
Twilio.Video.createLocalTracks().then(function (localTracks) {
localTracks.forEach(function(localTrack) {
localTrack.attach("#localVideo");
room.localParticipant.addTrack(localTrack);
})
local_participant = room.localParticipant;
});
Let me know if that helps!
Related
I coded lazy loading for videos, background images and images but didn't work on ios safari.
I want show the background images/images/video with IntersectionObserver method.
below codes are for background image and video.
<a href="#" id="comp-modal1" data-toggle="modal" data-target="#vidmodal" class="col-12 col-sm-3 align-self-center show-bkg lazy-bg lazy"
data-video="{{ get_template_directory_uri() . $video_path . $qt190}}"
data-srcset="{{ get_template_directory_uri() }}/assets/images/vid-images/show-bk.jpg" aria-label="background">
<div class="show-info">
<i class="fa fa-play-circle fa-3x" aria-hidden="true"></i>
<h3>QTech QT190 Journey</h3>
</div>
</a>
<video data-src="/wp-content/uploads/2019/03/Aristospray-QTech-Q5-2-minute-montage-v3-android-pad-compress.mp4"
poster="{{ get_template_directory_uri() }}/assets/images/vid-images/pistol-suction.jpg"
width="100%" height="auto"
class="lazy"
aria-label="video"
data-id="vid1">
</video>
and this is my JS =
const lazy ={
img:(img)=>{
img.src = img.dataset.src;
},
background:(bg)=>{
bg.style.backgroundImage = `url(${bg.dataset.srcset})`;
},
video:(vid)=>{
vid.load();
fetchVideoAndPlay(vid);
},
}
function fetchVideoAndPlay(video){
const preloadHolder = (document.querySelector(`#${video.dataset.id}`));
//console.log(video.dataset.src);
fetch(video.dataset.src)
.then(response=> {
video.setAttribute('data-src','');
return response.blob();
})
.then(blob=>{
video.src = URL.createObjectURL(blob);
video.muted = true;
preloadHolder.remove();
return video.play();
})
.then(()=>{
console.log('Played');
})
.catch( (e)=>{
console.error(e);
});
}
const lazyItems = [].slice.call(document.querySelectorAll('.lazy'));
const configInterSection = {root: null,rootMargin: '0px',threshold: [0]};
if ('IntersectionObserver' in window) {
let lazyObserver = new IntersectionObserver(function(entries){
// fire lazy loading
entries.forEach(function(item) {
if (item.isIntersecting) {
if(item.target.ariaLabel == 'background') lazy.background(item.target);
if(item.target.ariaLabel == 'image') lazy.img(item.target);
if(item.target.ariaLabel == 'video') lazy.video(item.target);
// remove & add classes
item.target.classList.remove('lazy');
item.target.classList.add('lazy-loaded');
//unboud
lazyObserver.unobserve(item.target);
}
});
}, configInterSection);
if(Array.isArray(lazyItems)){
lazyItems.forEach(function(lazy) {
lazyObserver.observe(lazy);
});
}
}
-Is there a way to modify this code in ios Safari?
Also this codes didn't work on the Firefox.
item.target.ariaLabel is availbale in v8 engine (chrome). hence I changed it to item.target.getAttribute('aria-label')
now it works.
I'm setting up like a framework who use python in backend and html/css/js for frontend. My problem arrived during the loading of a QWebEngineView.
I search on the web how to establish a communication between python and javascript with QWebEngineView and I finally tried to use QtWebChannel.
So I setted up everything, and everything worked good with communication between python and javascript, but the next issue appeared:
First: i can't load javascript files directly in html with tags <script>
Second: javascript loaded randomly, i tried to load javascript from python with my_view.page().runJavascript(my_js) but it work one try on two. So sometimes jQuery load at the end, so an other part of the code doesn't work.
base.html:
<!DOCTYPE html>
<html lang="en">
<p id="log"></p>
<script src="qrc:///qtwebchannel/qwebchannel.js"></script>
<script>
window.onerror = function (error, url, line) {
console.error("ERROR: " + error.toString());
console.error("LINE: " + line.toString());
};
function load_app(){
new QWebChannel(qt.webChannelTransport, function (channel) {
window.app = channel.objects.app;
app.load_javascript(function(ret){
console.error("load javascript: " + ret)
});
});
}
load_app();
console.error("app loaded")
</script>
{{ application_html_content | safe }}
</html>
Another part of HTML:
{% extends 'base.html' %}
{% block content %}
<div class="row">
{% for user_id, user in user_dict.items() %}
<div id="{{ user_id }}" class="col s12 m6">
<div class="card blue-grey darken-1">
<div class="card-content white-text">
<span class="card-title">Visit Card</span>
<p>{{ user.name }}</p>
</div>
<div class="card-action">
<button id="btn_del_{{ user_id }}" class="btn blue waves-effect waves-light" onclick="delete_user({{ user_id }})">Delete</button>
<button class="btn blue waves-effect waves-light" onclick="detail_user({{ user_id }})">Detail</button>
</div>
</div>
</div>
{% endfor %}
</div>
{% endblock %}
{% block javascript %}
<script>
$(document).ready(function() {
app.request_result.connect(function (result) {
if ("delete" in result) {
user_id = result.delete;
var element = document.getElementById(user_id);
element.parentNode.removeChild(element)
}
});
console.error("ready");
});
function delete_user(user_id) {
document.getElementById("btn_del_" + user_id).innerHTML = "Waiting ...";
app.request('DemoHtml:Default:delete', user_id);
}
function detail_user(user_id) {
app.path('detail_user', {"user_id": user_id});
}
</script>
{% endblock %}
load_javascript function:
JQUERY = "vendor/Resources/js/jquery.js"
MATERIALIZE = "vendor/Resources/css/materialize/js/materialize.js"
#pyqtSlot(result=str)
def load_javascript(self):
with open(os.path.join(os.path.abspath(os.path.dirname(sys.argv[0])), self.MATERIALIZE), "r") as m_stream:
materialize_content = m_stream.read()
with open(os.path.join(os.path.abspath(os.path.dirname(sys.argv[0])), self.JQUERY), "r") as j_stream:
jquery_content = j_stream.read()
self.template_view.view.page().runJavaScript(jquery_content)
self.template_view.view.page().runJavaScript(materialize_content)
return "ok"
As you can see, normally I must see in log error:
First: "load javascript: ok"
Second: "app loaded"
but one time one two, this is reverse like:
js: app loaded
js: ERROR: Uncaught ReferenceError: $ is not defined
js: LINE: 67
js: Uncaught ReferenceError: $ is not defined
js: load javascript: ok
Any help for this?
Thank you in advance!
I resolved my problem, thanks to #ekhumoro for trying to help me, i found an answer on this thread:
How to wait for another JS to load to proceed operation ?: https://stackoverflow.com/a/8618519/8293533
So to make it work, i change my javascript to this:
I named this file app.js
function set_app() {
try{
new QWebChannel(qt.webChannelTransport, function (channel) {
window.app_channel = channel.objects.app;
});
} catch (e) {
console.error("setting_app error: " + e)
}
}
set_app();
function request(route, args) {
let interval = 10;
window.setTimeout(function () {
if (window["app_channel"]) {
app_channel.request(route, args)
} else {
try {
set_app();
}
catch(error) {
console.error("app load error: " + error)
}
window.setTimeout(arguments.callee, interval);
}
}, interval)
}
function path(route, args) {
let interval = 10;
window.setTimeout(function () {
if (window["app_channel"]) {
app_channel.path(route, args)
} else {
try {
set_app();
}
catch(error) {
console.error("app load error: " + error)
}
window.setTimeout(arguments.callee, interval);
}
}, interval)
}
function request_result(callback) {
let interval = 10;
window.setTimeout(function () {
if (window["app_channel"]) {
app_channel.request_result.connect(callback)
} else {
try {
set_app();
}
catch(error) {
console.error("app load error: " + error)
}
window.setTimeout(arguments.callee, interval);
}
}, interval)
}
I erase my code load_javascript in python because i found the way to call js with <script> tags and qrc:/// path.
Now my html head look like this:
<!DOCTYPE html>
<html lang="en">
<p id="log"></p>
<script src="qrc:///qwebchannel.js"></script>
<script src="qrc:///app.js"></script>
<script src="qrc:///jquery.js"></script>
{{ application_html_content | safe }}
<script src="qrc:///materialize.min.js"></script>
</html>
To use qrc:///xxx.js i used QResource and .qrc, .rcc files.
This is an example of my code for those who want:
class ApplicationContainer:
SRC_QRC_PATH = "src/*Bundle/Resources/qrc/*.qrc"
SRC_RCC_PATH = "src/*Bundle/Resources/qrc/*.rcc"
VENDOR_QRC_PATH = "vendor/*Bundle/Resources/qrc/*.qrc"
VENDOR_RCC_PATH = "vendor/*Bundle/Resources/qrc/*.rcc"
def __init__(self):
self.__pyqt_application = QApplication(sys.argv)
self.__pyqt_resources = QResource()
self.set_rcc_files()
#property
def application(self):
return self.__pyqt_application
#application.setter
def application(self, new_app: QApplication):
self.__pyqt_application = new_app
def set_rcc_files(self):
qrc_files = glob.glob(os.path.join(os.path.abspath(os.path.dirname(sys.argv[0])), self.SRC_QRC_PATH))
qrc_files += glob.glob(os.path.join(os.path.abspath(os.path.dirname(sys.argv[0])), self.VENDOR_QRC_PATH))
for qrc in qrc_files:
subprocess.call(["rcc", "-binary", qrc, "-o", qrc[:-3] + "rcc"])
rcc_files = glob.glob(os.path.join(os.path.abspath(os.path.dirname(sys.argv[0])), self.SRC_RCC_PATH))
rcc_files += glob.glob(os.path.join(os.path.abspath(os.path.dirname(sys.argv[0])), self.VENDOR_RCC_PATH))
for rcc in rcc_files:
self.__pyqt_resources.registerResource(rcc)
As you can see i use rcccommand, not pyrcc5
To finish, this is my .qrc file:
<!DOCTYPE RCC>
<RCC version="1.0">
<qresource>
<file alias="jquery.js">../js/jquery.js</file>
<file alias="app.js">../js/app.js</file>
<file alias="qwebchannel.js">../js/qwebchannel.js</file>
<file alias="materialize.js">../css/materialize/js/materialize.js</file>
<file alias="materialize.css">../css/materialize/css/materialize.css</file>
</qresource>
</RCC>
I know there can be a lot of improvment and optimisation in javascript code and python code. But it works like this !
Thank's and hope i help someone too.
I want to make an Album creator like on Facebook.
But when I save a picture to the firebase storage and I get back the URL to the picture I put in an object, but the view is not refreshing just if I add a new picture or move the cursor. How can I refresh the view automatically when I get the URL from firebase?
<div class="row pics">
<div class="col-md-4 col-xs-4">
<div class="newItem text-center">
<a (change)="addPicture($event)" class="newAlbum"><input type="file" id="file"/>Add Picture</a>
</div>
</div>
<div class="col-md-4 col-xs-4" *ngFor="let item of newAlbum.pictures; let i = index">
<div class="Item">
<img src="{{item?.pictureS}}" alt="" >
</div>
<textarea class="picture-desc" placeholder="Say something about this photo..." (keyup)="onKey($event,i)">{{item.desc}}</textarea>
</div>
</div>
Backend
readPicture() {
this.picItem = { pictureS: '', pictureF: this.file, desc: '' };
let that = this;
let uploadTask = this.data.albumUpload(this.newAlbum.dirname,this.file.name,this.file);
uploadTask.on('state_changed', function(snapshot) {
var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
console.log('Upload is ' + progress + '% done');
}, function(error) {
}, function() {
that.picItem.pictureS = uploadTask.snapshot.downloadURL;
console.log(' NEW UPLOAD...');
that.newAlbum.pictures.push(that.picItem);
}
);
}
addPicture(e){
this.file = e.target.files[0];
this.readPicture();
}
onKey(e,i){
this.newAlbum.pictures[i].desc = e.target.value;
}
albumUpload(form: NgForm){
this.newAlbum.title = form.value.album_title;
this.newAlbum.desc = form.value.album_desc;
}
You could use NgZone to to trigger change detection when certain actions are done. You need to inject NgZone into the component. Once thats done you can use , run to update DOM.
constructor( public zone: NgZone){}
that.zone.run(() =>
that.newAlbum.pictures.push(that.picItem);
});
You can read more about ngZone here .
ps: I would advice you to use new arrow funcions to conserve this rather than using that.
Have been recently getting to grips with asterisk, Linux, node.js and most recently socket.io so that I can eventually make real time web applications for asterisk.
So as an educated guess ave been able to see kinda that Node.js is like the middle man between Asterisk and Socket. But I have no idea how to pull information from asterisk to a web page via socket.io.
I have been working on socket.io and ave been at a lose for a couple of days on how to interlink them so I can for example, log events happening in stasis or pull out current calls in a conference call, just anything at this point and due to ARI being relatively new as far as am aware, its been a struggle figuring it out.
I have linked 3 files below to give you an idea of what ave been doing, bridge-mixed.js is based off an example given in the asterisk ARI documentation.
I can run the file via node.js, dial the extension I specified in my extensions.conf file, when the first user enters the conference play music, once the more than 1 user enters then stop the music.
As for the other two files, its just a basic socket.io app ave been working through step by step via a YouTube guide to understand how it works.
I just need anything as simple as a brief example on how to mold them or make them work together, to start making real time web applications for asterisk.
Even if I somehow am able to pull stasis events out to a web page via socket.io & Node.js.
Hopefully you guys can shed some insight or guidance as am really lost with this at the moment.
bridge-mixed.js
/*jshint node:true*/
'use strict';
var ari = require('ari-client');
var util = require('util');
var chanArr =[];
ari.connect('http://localhost:0001', 'asterisk', 'asterisk', clientLoaded);
// handler for client being loaded
function clientLoaded (err, client) {
if (err) {
throw err;
}
// find or create a holding bridge
var bridge = null;
client.bridges.list(function(err, bridges) {
if (err) {
throw err;
}
bridge = bridges.filter(function(candidate) {
return candidate.bridge_type === 'mixing';
})[0];
if (bridge) {
console.log(util.format('Using bridge %s', bridge.id));
} else {
client.bridges.create({type: 'mixing'}, function(err, newBridge) {
if (err) {
throw err;
}
bridge = newBridge;
console.log(util.format('Created bridge %s', bridge.id));
});
}
});
// handler for StasisStart event
function stasisStart(event, channel) {
console.log(util.format(
'Channel %s just entered our application, adding it to bridge %s',
channel.name,
bridge.id));
channel.answer(function(err) {
if (err) {
throw err;
}
bridge.addChannel({channel: channel.id}, function(err) {
chanArr.push(channel)
if (err) {
throw err;
}
//If else statement to start music for first user entering channel, music will stop once more than 1 enters the channel.
if(chanArr.length <= 1){
bridge.startMoh(function(err) {
if (err) {
throw err;
}
});
}else{
bridge.stopMoh(function(err) {
if (err) {
throw err;
}
});
}
});
});
}
// handler for StasisEnd event
function stasisEnd(event, channel) {
chanArr = null;
console.log(util.format(
'Channel %s just left our application', channel.name));
}
client.on('StasisStart', stasisStart);
client.on('StasisEnd', stasisEnd);
client.start('bridge-hold');
}
Then below is a very basic socket.io functionality and html page:
app.js
var express = require('express'),
app = express(),
server = require('http').createServer(app),
io = require('socket.io').listen(server),
nicknames = [];
server.listen(0001);
app.get('/', function (req, res) {
res.sendfile(__dirname + '/index.html');
});
io.sockets.on('connection', function (socket) {
socket.on('new user', function (data, callback) {
if (nicknames.indexOf(data) != -1) {
callback(false);
} else {
callback(true);
socket.nickname = data;
nicknames.push(socket.nickname);
updateNicknames();
}
});
function updateNicknames() {
io.sockets.emit('usernames', nicknames);
}
socket.on('send message', function (data) {
io.sockets.emit('new message', {
msg : data,
nick : socket.nickname
});
});
socket.on('disconnect', function (data) {
if (!socket.nickname)
return;
nicknames.splice(nicknames.indexOf(socket.nickname), 1);
updateNicknames();
});
});
index.html
<html>
<head>
<title> Chat with socket.io and node.js</title>
<style>
#chat{
height:500px;
}
#contentWrap{
display:none;
}
#chatWrap{
float:left;
border:1px #000 solid;
}
.error{
color:red;
}
.whisper{
color:gray;
font-style:italic;
}
</style>
</head>
<body>
<div id="nickWrap">
<p>Enter a Username</p>
<p id="nickError"></p>
<form id="setNick">
<input size="35" id="nickname"></input>
<input type="submit"></input>
</form>
</div>
<div id="contentWrap">
<div id="chatWrap">
<div id="chat"></div>
<form id="send-message">
<input size="35" id="message"></input>
<input type="submit"></input>
</form>
</div>
<div id="users"></div>
</div>
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="https://cdn.socket.io/socket.io-1.3.6.js"></script>
<script>
jQuery(function($){
var socket = io.connect();
var $nickForm = $('#setNick');
var $nickError = $('#nickError');
var $nickBox = $('#nickname');
var $users = $('#users');
var $messageForm = $('#send-message');
var $messageBox = $('#message');
var $chat = $('#chat');
$nickForm.submit(function(e){
e.preventDefault();
socket.emit('new user', $nickBox.val(), function(data){
if(data){
$('#nickWrap').hide();
$('#contentWrap').show();
} else{
$nickError.html('That username is already taken! Try Again.');
}
});
$nickBox.val('');
});
socket.on('usernames', function(data){
var html ='';
for(i=0; i < data.length; i++){
html += data[i] + '<br/>'
}
$users.html(html);
});
$messageForm.submit(function(e){
e.preventDefault();
socket.emit('send message', $messageBox.val(), function(data){
$chat.append('<span class="error"><b>' + data + "</span><br/>");
});
$messageBox.val('');
});
socket.on('new message', function(data){
$chat.append('<span class="msg"><b>' + data.nick + ': </b>' + data.msg + "</span><br/>");
});
socket.on('whisper', function(data){
$chat.append('<span class="whisper"><b>' + data.nick + ': </b>' + data.msg + "</span><br/>");
});
});
</script>
</body>
</html>
So after a bit of trail and error, it is possible to have them working together by effectively merging the bridge-mixed.js & app.js files. Once this is done I can then start accessing the information on the asterisk side of things via the ARI client and start passing it to a real time web application acting as an asterisk front end via socket.io.
The code am posting currently is just appending the current caller name to the web page, but its a basic example it should be a good stepping stone to see what you can do with this, as the information is there can easily start using JQuery to start doing all the good stuff....e.g Muting calls, bridging kicking users from a conference. These are the things am currently working on and will update in the future.
I hope this helps someone.
app.js(ARI Client and Socket.io server side)
ARI Functions and socket.io server side.
var ari = require('ari-client');
var util = require('util');
var chanArr = [];
var express = require('express'),
app = express(),
server = require('http').createServer(app),
io = require('socket.io').listen(server);
//ARI client
ari.connect('http://localhost:8088', 'asterisk', 'asterisk', clientLoaded);
function clientLoaded(err, client) {
if (err) {
throw err;
}
// find or create a holding bridges
var bridge = null;
client.bridges.list(function (err, bridges) {
if (err) {
throw err;
}
bridge = bridges.filter(function (candidate) {
return candidate.bridge_type === 'mixing';
})[0];
if (bridge) {
console.log(util.format('Using bridge %s', bridge.id));
} else {
client.bridges.create({
type : 'mixing'
}, function (err, newBridge) {
if (err) {
throw err;
}
bridge = newBridge;
console.log(util.format('Created bridge %s', bridge.id));
});
}
});
// handler for StasisStart event
function stasisStart(event, channel) {
console.log(util.format(
'Channel %s just entered our application, adding it to bridge %s',
channel.name,
bridge.id));
channel.answer(function (err) {
if (err) {
throw err;
}
bridge.addChannel({
channel : channel.id
}, function (err) {
var id = chanArr.push(channel.name)
console.log("User: " + channel.name);
if (err) {
throw err;
}
//If else statement to start music for first user entering channel, music will stop once more than 1 enters the channel.
if (chanArr.length <= 1) {
bridge.startMoh(function (err) {
if (err) {
throw err;
}
});
} else {
bridge.stopMoh(function (err) {
if (err) {
throw err;
}
});
}
});
});
}
// handler for StasisEnd event
function stasisEnd(event, channel) {
chanArr = null;
console.log(util.format(
'Channel %s just left our application', channel.name));
}
client.on('StasisStart', stasisStart);
client.on('StasisEnd', stasisEnd);
client.start('bridge-hold');
}
//Socket.io logic here
server.listen(3009, function () {
console.log('listening on *:3009');
});
app.use(express.static(__dirname + '/public'));
app.get('/', function (req, res) {
res.sendfile(__dirname + "/testPage.html");
});
io.sockets.on('connection', function () {
updateSip();
});
function updateSip() {
io.sockets.emit('sip', chanArr);
}
testPage.html
Web application front end.
<html>
<head>
<title> Chat with socket.io and node.js</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.0/css/bootstrap-toggle.min.css" rel="stylesheet">
<link href="/css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-header">
<div class="navbar-brand">Asterisk ARI Test Application</div>
</div>
<div id="navbar" class="navbar-collapse collapse">
</div>
</nav>
<div class="main-bridge">
<div class="container">
<div class="jumbotron content-A">
<form class="test-ari">
<p class="lead">Enter the number you want to call.</p>
<div class="input-group input-group-lg">
<input type="tel" class="form-control" placeholder="Phone Number" aria-describedby="sizing-addon1" required="" />
<span class="input-group-btn">
<button class="btn btn-default" type="submit">Call Back Now</button>
</span>
</div>
</form>
</div>
</div>
</div>
<div class="secondary-bridge" id="sip">
<h3 class="conf-head">Conference call</h3>
<div class="panel panel-default ">
<div class="panel-heading " >
<h3 class="panel-title"><div id="sip"></div></h3>
</div>
<div class="panel-body">
<input type="checkbox" data-on="Voice" data-off="Muted" checked data-toggle="toggle" data-onstyle="success" data-offstyle="danger">
<button class="btn btn-default kick" id="kick" data-toggle="modal" data-target="#myModal" type="submit">Kick</button>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Kick user</h4>
</div>
<div class="modal-body">
Are you you want to kick this user?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">No</button>
<button type="button" class="btn btn-primary">Yes</button>
</div>
</div>
</div>
</div>
<footer class="footer">
<p>© User 2015</p>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.0/js/bootstrap-toggle.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<script src="https://cdn.socket.io/socket.io-1.3.6.js"></script>
<script src="/js/test.js"></script>
</body>
</html>
test.js
Socket.io client side and some other bits of JQuery.
jQuery(function ($) {
var socket = io.connect();
var $sip = $('#sip');
socket.on('sip', function (data) {
var sip = '';
for (i = 0; i < data.length; i++) {
sip += data[i] + '<br/>'
}
$sip.append('<h3 class="conf-head">Conference call</h3> \
<div class="panel panel-default ">\
<div class="panel-heading " >\
<h3 class="panel-title">' + sip + '</h3>\
</div>\
<div class="panel-body">\
<input type="checkbox" data-on="Voice" data-off="Muted" checked data-toggle="toggle" data-onstyle="success" data-offstyle="danger">\
<button class="btn btn-default kick" id="kick" data-toggle="modal" data-target="#myModal" type="submit">Kick</button>\
</div>\
</div>');
});
$('.kick').click(function () {
$('#myInput').focus()
});
});
Im running into a really weird error in 3.4 Phonegap/Cordova.
I have tested the service call through fiddler on the web as well as used WEINRE.
Over the browser it runs without any errors, when compiled to run on build.phonegap.com it hangs up on the first service.
The html
<!-- Page 1 -->
<div data-role="page" id="keyword" class="page">
<div class="bg"></div>
<div class="page-wrapper">
<div class="logo"><img src="images/logo.png" alt="" width="325" height="105"/></div>
<div class="text1">Enter Code</div>
<div class="input">
<input type="text" name="keyword" placeholder="code" id="keyword-value" />
</div>
<div class="button" id="keyword-submit" >Submit</div>
<div class="text2">
If you do not have a<br>
code, click continue
</div>
<div class="button" id="keyword-continue">Continue</div>
</div>
Im running into issues when running the keyword-submit function, it doesn't navigate through it though it does in the browser.
app.js
$("#keyword").live("pageinit",
function()
{
$("#keyword-continue").click(
function()
{
$.mobile.changePage("#zip-code");
});
$("#keyword-submit").click(
function()
{
alert("Entered Keyword Submit");
var keyword = $("#keyword-value").val();
if($.trim(keyword) == '')
{
navigator.notification.alert('Please Enter code');
return false;
}
service.getListByKeyword(keyword,
function(response)
{
$.mobile.showPageLoadingMsg("loading");
var check = JSON.parse(response).responsecollection.Response.rss.rs;
if(check.isvalid == 0)
{
if (check.msg!=null)
{
navigator.notification.alert(check.msg);
$.mobile.hidePageLoadingMsg();
}
}
else
{
window.localStorage.setItem("email",check.email);
alert("storing email");
service.resellerId = check.rsid;
localStorage.resellerId = service.resellerId;
alert("set reseller Id");
service.getResellerSetting(
function(response)
{
alert("entered merchant");
service.resellerEmail = JSON.parse(response).responsecollection.Response.rts.rt.mlid;
localStorage.resellerEmail = service.resellerEmail;
var telefloraStatus = JSON.parse(response).responsecollection.Response.rts.rt.UseTeleflora;
window.localStorage.setItem("floraStatus",floraStatus);
});
alert("Navigating to new page");
$.mobile.changePage("#keyword-list?keyword="+keyword);
//window.open("#keyword-list?keyword="+keyword,keywordPage);
}
});
alert();
$.mobile.hidePageLoadingMsg();
});
});
I have set up alerts to see where its navigating in the browser and getting caught in the mobile side.
Last set of code is the index.js
getListByKeyword: function (keyword, result) {
service.sendRequest("Reseller", "IsValid", function(args) {
args.rscode = keyword;
}, result);
alert("Inside the service call *END*");
}
I really cant seem to wrap my head around why it would work in the broswer and not on the android build.
//please follow these steps to check your phonegap project is ready to perform action or not.
//1)include cordova js or phonegap file reference
<script type="text/javascript" src="cordova.js"></script>
//2)check phonegap is ready or not
<script type="text/javascript">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
alert('ready');
}
</script>
after that perform any action