I am exploring WebRTC based solutions for video conferencing. Have found Jitsi to be one of the prominent candidate to look around from various frameworks.
Example Code:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<?php
$webroot = '/openemr-local';
?>
<script src="<?php echo $webroot ?>/jitsi-meet/libs/lib-jitsi-meet.min.js"></script>
<script src="<?php echo $webroot ?>/jitsi-meet/libs/jquery-2.1.1.min.js"></script>
<script src="<?php echo $webroot ?>/jitsi-meet/libs/strophe/strophe.js"></script>
<script src="<?php echo $webroot ?>/jitsi-meet/libs/strophe/strophe.disco.min.js?v=1"></script>
<script type="text/javascript" src="<?php echo $webroot ?>/jitsi-meet/example.js"></script>
</head>
<body>
<div class="container">
<div id="jitsi-test">
<span>Join Meeting Name</span><input type="text" id="meetingroom" name="meetingroom"/>
<button id="join" name="join" onclick="joinMeeting()">Join Me</button>
<button id="disconnect" name="disconnect" onclick="unload()">Disconnect</button>
</div>
<div id="video-container">
</div>
</div>
</body>
</html>
I am using example.js from Jitsi-meet Git Hub Example with below changes:
const options = {
hosts: {
domain: 'beta.meet.jit.si',
muc: 'conference.beta.meet.jit.si', // FIXME: use XEP-0030
focus: 'focus.beta.meet.jit.si',
},
bosh:'//beta.meet.jit.si/http-bind', // FIXME: use xep-0156 for that
// The name of client node advertised in XEP-0115 'c' stanza
clientNode: 'http://jitsi.org/jitsimeet'
};
Video gets launched on the browser bu I am not able to get
Connection Callback -- onConnectionSuccess never gets called. I did put
debugger there.
Getting error on console
Access to XMLHttpRequest at 'http://beta.meet.jit.si/http-bind' from origin 'http://localhost' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.
EDIT:
After adding https: to bosh:'//beta.meet.jit.si/http-bind'. The CORS error is gone and also onConnectionSuccess is working fine.
Still, Need some pointers on working Conference example.
I am trying to achieve something similar to below example:
jitsi-meet custom GUI
Related
I am trying to get a vue component to work from a separate file called AppButton.js. This simple learning component should render a button with some css and disables the click when one hovers over the button. Instead, this code just displays text. I cannot figure out what is missing in my code and I would appreciate if someone can take a look.
Here is the content from AppButton.js:
export default {
template: '<button class="bg-gray-200 hover:bg-gray-400 border rounded px-5 py-2 disabled:cursor-not-allowed" v-bind:disabled="processing"><slot /></button>',
data() {
return {
processing: true
}
}
}
The AppButton.js is in the same directory as my index.html. Here is the content of the index.html.
<!DOCTYPE html>
<html lang="en" class="h-full">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/vue#3"></script>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="h-full grid place-items-center">
<div id="app">
<app-button>Scura</app-button>
</div>
<script type="module">
import AppButton from "AppButton.js"
let app = {
components: {
'app-button': AppButton
}
};
Vue.createApp(app).mount('#app');
</script>
</body>
</html>
I tried loading vue.js devtools extension in my Chrome to debug this problem further but for some reason the vue.js devtools extension does not show in my devtools
This is the error I am getting in Chrome Console: Access to script at
'file:///C:/Users/scura/Documents/LearnHtmlCss/js/components/AppButton.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.
index.html:18 GET file:///C:/Users/scura/Documents/LearnHtmlCss/js/components/AppButton.js net::ERR_FAILED
i am very new to VueJS and want to build an Admin Dashboard for an existing bootstrap template (SB Admin Pro). I know there is a BootstrapVUE but we want to use the specified template that we purchased before. So this is not an option for me/us.
My Goal:
In our vue component we make an axios call to our backend to retrieve and show some data. If the call fails we want to call in the catch block a bootstrap function for toast to show some notification to the user (like: Error while fetching data from backend...). We included the bootstrap and jquery libraries from the template in the default index.html.
The Problem:
I don't know how to call the toasts (or other) functions from the vue component. In the template the call looks like this:
$("#toastBasic").toast("show");
Our index.html looks
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="svote UG (haftungsbeschränkt)" />
<script data-search-pseudo-elements defer src="js/font-awesome-5.11.2.min.js" crossorigin="anonymous"></script>
<script src="./js/feather.min.js" crossorigin="anonymous"></script>
</head>
<body class="nav-fixed">
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app">
</div>
<!-- built files will be auto injected -->
<script defer src="js/jquery-3.4.1.min.js" crossorigin="anonymous"></script>
<script defer src="js/bootstrap.min.js" crossorigin="anonymous"></script>
<script defer src="js/script.js"></script>
</body>
</html>
Our vue component:
<template>
<main>
<div style="position: absolute; top: 1rem; right: 1rem;">
<!-- Toast container -->
<div style="position: absolute; bottom: 1rem; right: 1rem;">
<!-- Toast -->
<div class="toast" id="toastBasic" role="alert" aria-live="assertive" aria-atomic="true" data-delay="5000">
<div class="toast-header">
<i data-feather="bell"></i>
<strong class="mr-auto">Toast with Autohide</strong>
<small class="text-muted ml-2">just now</small>
<button class="ml-2 mb-1 close" type="button" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body">This is an example toast alert, it will dismiss automatically, or you can dismiss it manually.</div>
</div>
</div>
</div>
<ContentHeader title="Blank" icon="fas fa-file" subtitle="A blank page to get you started!" />
<div class="container-fluid mt-n10">
<div v-if="error" class="alert alert-danger" role="alert">
{{ error }}
</div>
<div class="row">
<Card cHeader="Eine Karte" class="col-md-12"> {{ contacts }}</Card>
</div>
</div>
</main>
</template>
<script>
import ContentHeader from '../../components/ContentHeader'
import Card from '../../components/Card'
import axios from 'axios';
export default {
name: "Contact",
components: {
ContentHeader,
Card,
},
data() {
return {
contacts: null,
error: null
}
},
mounted() {
const url = 'http://localhost:3000/v1/';
axios.get(url + 'contsact')
.then(response => {
this.contacts = response.data
console.log(response)}
)
.catch(error => {
console.log(error.response)
$("#toastBasic").toast("show");
});
}
}
</script>
In vue.config.js, specify jquery as external (this tells webpack where to provide jquery from when it's imported in any component):
configureWebpack: {
externals: {
jquery: 'window.jQuery'
}
}
Place all the <script>s you want loaded by the time Vue inits in your public/index.html page, in the <head> tag and remove their defer attribute. This includes any jquery plugin (or anything requiring/extending jquery) you might want to use in your Vue app (in your case, bootstrap.min.js).
The above will make it work when developing (in serve). You'll need to do the same for prod: Load jquery and any dependency before initing the Vue app.
Now you can safely use
import * as $ from 'jquery'
in any component.
Webpack will place in $ whatever window.jQuery is at the moment the component inits.
The above approach makes sure all required scripts are loaded before Vue inits (which is a bit extreme, but it makes sure there's no way you can call the jquery method before its dependencies are loaded).
If you don't want to wait for jquery and bootstrap.min.js to load before you init your Vue app, a trick you could use is to assign jquery from window object just before you need it:
yourAlertMethod() {
const $ = window.jQuery;
$.toast()...
}
Obviously, you no longer have to move all the scripts in <head> and to remove their defer. This second method doesn't guarantee they would have already loaded before your method is first used. But your app inits faster.
Here's a basic example.
I used the second method, codesandbox.io doesn't have support for #vue/cli v3 hence vue.config.js doesn't work as in a Vue project created with vue create. Therefore, I had to use the second method.
The full list of dependecies you need to load before you call the $(el).toast() method:
bootstrap.min.css
jquery.js
popper.js
bootstrap.min.js
(see them in public/index.html). You can copy/paste them from Bootstrap.
You can get ref of the element and pass it to jQuery
<div ref="toast" class="toast" id="toastBasic" role="alert" aria-live="assertive" aria-atomic="true" data-delay="5000">
import $ from 'jQuery';
$(this.$refs.toast).toast("show");
I don't recommend that though.
I have a question, about the Instagram Api oAuth. create a small api, which users allow to generate a instagram api token key. but, my problem is, when I log in with my account, the source works. But, when someone other with a different account want to lo in. the get this back:
{"error_message": "You are not a sandbox user of this client", "error_type": "OAuthForbiddenException", "code": 403}
I don't know, what the hell the problem is? maybe in the Valid redirect URIs? I have there the same URL like website url? Do I have to submit in the end of the url? something? I have read down the docu: instagram.com/ oAuth. I followed these steps:
first:
sign up to my developer account:
then register a new client:
website URL: mywebsitecom/token/
Valid redirect URIs: mywebsitecom/token/
the app should work so: user click on the button >> then it will be forward to the oauth >> after authorize the app >> the user will get the token key on the same page or site website/token/#access_token=1920579593.4ca8793.a66f6aa9d40243afa282735f707b58b3
how can i doing that? i dont know, where the problme is..
the app is with Disable implicit OAuth:
Here is my source:
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Instagram API Access Token KEY Generator – by Lucas Gatsas</title>
<link rel="icon" type="image/png" href="images/favicon.png">
<meta name="description" content="Quickly generate an access token for Instagram to display your photos on your website.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="assets/js/javascript.modify.js"></script>
<link rel="stylesheet" type="text/css" href="assets/css/stylesheet.css">
<script type="text/javascript">
(function(){$(function(){var n,t,o,c;return c=function(){return o()?($(document.body).addClass("token-received"),t()):$(document.body).addClass("no-token"),n()},o=function(){var n;return n=window.location.hash,!!(n.length&&n.indexOf("access_token")>-1)},t=function(){var n;return n=window.location.hash.split("#access_token=")[1],$(".instagram-access-token").val(n).on("click",function(){return $(this).select()})},n=function(){return Modernizr.svg?void 0:$(".logo").attr("src",$(".logo").data("backup-png"))},c()})}).call(this);
</script>
</head>
<body>
<div class="site-header-wrapper">
<header class="site-header" role="banner">
<img src="assets/img/Instagram-logo.png" style=" width 200px;
display contents;
margin 0 auto;
text-align center;
display -webkit-box;">
</header>
</div>
<div class="site-content-wrapper">
<div class="site-content" role="main">
<div class="pre-token">
<div class="token-button-wrapper">
Generate Token Key
</div>
<p>You'll be brought right back here and, if all went well, your Instagram Access Token will be ready for you. Copy and paste this access token into the correct field. Remember to keep your access token private and never paste it in a location where others might can access it.</p>
Tweet
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<code>
https://api.instagram.com/oauth/authorize/?client_id=CLIENT-ID&redirect_uri=REDIRECT-URI&response_type=token
</code>
<h1>Docu:</h1>
<p>Instagram Developers</p>
<p>oAuth2 - Authentication</p>
<p>oAuth2 - Authentication</p>
<h1>Links:</h1>
<p>oAuth V.2</p>
<div class="post-token">
<h2>It worked!</h2>
<p>Use this token in the appropriate field on your website or blog, and you should have a working Instagram widget.</p>
<div class="token-input-wrapper">
<input class="instagram-access-token" type="text" value="" size="50">
</div>
<p>Are you have any Question to the Api Token Key. Please feel free to contact me <a href="mailto:space#lucasgatsas.ch">Contact Me.</p>
</div>
</div>
</div>
<div class="site-footer-wrapper">
<footer class="site-footer">
<p>©.2017 by Lucas Gatsas</p>
</footer>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>window.jQuery || document.write("<script src='scripts/jquery-1.11.1.min.js'><\/script>")</script>
<script type="text/javascript">
(function () { $(function () { var n, t, o, c; return c = function () { return o() ? ($(document.body).addClass("token-received"), t()) : $(document.body).addClass("no-token"), n() }, o = function () { var n; return n = window.location.hash, !!(n.length && n.indexOf("access_token") > -1) }, t = function () { var n; return n = window.location.hash.split("#access_token=")[1], $(".instagram-access-token").val(n).on("click", function () { return $(this).select() }) }, n = function () { return Modernizr.svg ? void 0 : $(".logo").attr("src", $(".logo").data("backup-png")) }, c() }) }).call(this);
</script>
</body>
</html>
Hope some one can give me tips?
Your client isn't accessible by every user. You need to invite the user you are testing with as a "Sandbox User".
Navigate to "Manage Clients" and click "Manage" for the client you wish to use. Choose the tab "Sandbox" and add the user you are testing with.
As you can see your own account is added by default by Instagram.
Best of luck
I created a simple dojomobile app in worklight 6.1. I have the mobile test workbench installed in the same eclipse env as worklight. The code below is the dojo code for the hybrid app's index.html. It is a very basic dojo mobile app using default header information from worklight.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>index</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="shortcut icon" href="images/favicon.png">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="stylesheet" href="css/main.css">
<script>window.$ = window.jQuery = WLJQ;</script>
<script type="text/javascript" src="dojox/mobile/deviceTheme.js"></script>
<script type="text/javascript" data-dojo-config="isDebug: false, async: true, parseOnLoad: true, mblHideAddressBar: false" src="dojo/dojo.js"></script>
</head>
<body style="display: none;">
<div data-dojo-type="dojox.mobile.View" id="view0" data-dojo-props="selected:true">
<div data-dojo-type="dojox.mobile.Heading" data-dojo-props="label:'Heading'"></div>
<h2 data-dojo-type="dojox.mobile.RoundRectCategory">Category</h2>
<div data-dojo-type="dojox.mobile.RoundRect">
<div data-dojo-type="dojox.mobile.RoundRectList">
<div data-dojo-type="dojox.mobile.ListItem" data-dojo-props="label:'Item'"></div>
<div data-dojo-type="dojox.mobile.ListItem" data-dojo-props="label:'Item'"></div>
</div>
</div>
<button data-dojo-type="dojox.mobile.Button">Button1</button>
<button data-dojo-type="dojox.mobile.Button">Button2</button>
<button data-dojo-type="dojox.mobile.Button">Button3</button>
</div>
<script src="js/initOptions.js"></script>
<script src="js/main.js"></script>
<script src="js/messages.js"></script>
</body>
</html>
The problem when I register the app in the test workbench and record a test on my android device (Samsung s4). The test app does not recognize it is running dojo. The display of the app on the device is missing the header line. The test contents from from the recorded steps say that I clicked on JQuery Button and not dojox.mobile.Button.
Weird thing, when you go to replay the recorded test, the app displays properly (header and other dojo controls), and the script fails because it is looking for JQuery Button. I could go in and edit the script so that it is correct, but that is not what I want to do for every script that I record or rerecord because of app changes.
Please let me know what I'm doing wrong or is this a known problem.
Jquery is added by default into the worklight application. See the script tag with
<script>window.$ = window.jQuery = WLJQ;</script>
in your Html head tag. Remove it and try!
I am trying to integrate iTunes preview url (m4a file) using jplayer but running into issues
None of the files from Apple iTunes work. For example:
http://a1.phobos.apple.com/us/r1000/057/Music/fd/8b/40/mzm.staswrxu.aac.p.m4a
However these 2 m4a (non apple) links work:
http://jwdriggs.com/jagspodcast/m4a/%23116.m4a
They do work in iTunes player themselves.
What can I do to make them work? Does it have anything to do with iTunes encoding. It would be great if there is any workaround for this issue.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<!-- Website Design By: www.happyworm.com -->
<title>Demo : jPlayer circle player</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="skin/circle.skin/circle.player.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.jplayer.min.js"></script>
<script type="text/javascript" src="js/jquery.transform.js"></script>
<script type="text/javascript" src="js/jquery.grab.js"></script>
<script type="text/javascript" src="js/mod.csstransforms.min.js"></script>
<script type="text/javascript" src="js/circle.player.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
/*
* Instance CirclePlayer inside jQuery doc ready
*
* CirclePlayer(jPlayerSelector, media, options)
* jPlayerSelector: String - The css selector of the jPlayer div.
* media: Object - The media object used in jPlayer("setMedia",media).
* options: Object - The jPlayer options.
*
* Multiple instances must set the cssSelectorAncestor in the jPlayer options. Defaults to "#cp_container_1" in CirclePlayer.
*
* The CirclePlayer uses the default supplied:"m4a, oga" if not given, which is different from the jPlayer default of supplied:"mp3"
* Note that the {wmode:"window"} option is set to ensure playback in Firefox 3.6 with the Flash solution.
* However, the OGA format would be used in this case with the HTML solution.
*/
var myCirclePlayer = new CirclePlayer("#jquery_jplayer_1",
{
//m4a: "http://www.jplayer.org/audio/m4a/Miaow-07-Bubble.m4a"
m4a: "http://a1549.phobos.apple.com/us/r1000/026/Music/d8/01/eb/mzm.mxkkesne.aac.p.m4a"
}, {
cssSelectorAncestor: "#cp_container_1",
swfPath: "js",
wmode: "window"
});
});
//]]>
</script>
</head>
<body>
<!-- The jPlayer div must not be hidden. Keep it at the root of the body element to avoid any such problems. -->
<div id="jquery_jplayer_1" class="cp-jplayer"></div>
<!-- The container for the interface can go where you want to display it. Show and hide it as you need. -->
<div id="cp_container_1" class="cp-container">
<div class="cp-buffer-holder"> <!-- .cp-gt50 only needed when buffer is > than 50% -->
<div class="cp-buffer-1"></div>
<div class="cp-buffer-2"></div>
</div>
<div class="cp-progress-holder"> <!-- .cp-gt50 only needed when progress is > than 50% -->
<div class="cp-progress-1"></div>
<div class="cp-progress-2"></div>
</div>
<div class="cp-circle-control"></div>
<ul class="cp-controls">
<li>play</li>
<li>pause</li> <!-- Needs the inline style here, or jQuery.show() uses display:inline instead of display:block -->
</ul>
</div>
</body>
</html>
Try using SoundManager2 - this library works fine for playing iTunes audio previews.