I am trying to pause facebook video on scroll but its not working below is my code. It gives error pause of undefined. Is there any other way?
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '6296624552155',
xfbml : true,
version : 'v3.2'
});
var my_video_player;
FB.Event.subscribe('xfbml.ready', function(msg) {
if (msg.type === 'video') {
jQuery(window).scroll(function() {
console.log('test');
my_video_player = msg.instance;
my_video_player.pause() ;
});
}
});
};
</script>
<div id="fb-root"></div>
<script async defer src="https://connect.facebook.net/en_US/sdk.js"></script>
Related
I'm developing a new version of my website in Vue 2 and I have created a component to handle image broken links, swapping the url domain, in order to display images stored in my local host and also those stored in the production server. The problem is that sometimes the image filename in the server is different than what is set on my local host database (because the user changed the image on the production live version), and then I get infinite requests looping in the console since neither image url are valid.
I'm also using Bootstrap-Vue to lazy-load the images.
This is my code:
<template>
<b-img-lazy :src="'https://example.com/uploads/' + photo" #error.native="replaceSrc" :alt="titulo" :title="title" class="thumb"></b-img-lazy>
</template>
<script>
export default {
name: "ImgCarousel",
props: {
photo: {
type: String
},
title: {
type: String
}
},
data: function () {
return {
index: null
}
},
methods: {
replaceSrc(e) {
e.target.src = 'http://localhost:8888/uploads/' + this.photo;
},
}
}
</script>
How do I stop the GET requests from entering a infinite loop?
I also reached the solution below. Probably not elegant as Nikola's answer, although it needs less coding. Basically it adds a counter on each call for "replaceSrc" to prevent looping on the broken links:
<template>
<b-img-lazy :src="'https://example.com/uploads/' + photo" #error.native="replaceSrc" :alt="title" :title="title" class="thumb"></b-img-lazy>
</template>
<script>
export default {
name: "ImgCarousel",
props: {
photo: {
type: String
},
title: {
type: String
}
},
data: function () {
return {
counter: 0
}
},
methods: {
replaceSrc(e) {
if (this.counter == 0) {
e.target.src = 'http://localhost:8888/uploads/' + this.photo;
this.counter ++;
} else if (this.counter == 1) {
e.target.src = 'https://via.placeholder.com/300x190';
this.counter ++;
}
},
}
}
</script>
BTW the "index: null" data on my question was a wrong code I forgot to remove.
Try to check if image exists:
new Vue({
el: '#demo',
data: function () {
return {
startImg: 'https://picsum.photos/150',
index: null,
photo: '100',
title: '',
titulo: '',
url: 'https://picsum.photos/'
}
},
methods: {
replaceSrc(e) {
this.checkIfImageExists(this.url + this.photo, (exists) => {
exists ?
e.target.src = this.url + this.photo :
this.titulo = 'no image'
})
},
checkIfImageExists(url, callback) {
const img = new Image();
img.src = url;
if (img.complete) {
callback(true);
} else {
img.onload = () => callback(true)
img.onerror = () => callback(false)
}
},
change() {
this.startImg = this.startImg ? '' : 'https://picsum.photos/150'
},
breakSource() {
this.startImg = "wrong url"
this.photo = "wrong url"
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.min.css" />
<script src="https://unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue-icons.min.js"></script>
<div id="demo">
<div>
<b-img-lazy :src="startImg" #error.native="replaceSrc" :title="title" :alt="titulo" class="thumb"></b-img-lazy>
</div>
<button #click="change">Change source</button>
<button #click="breakSource">Break source</button>
</div>
I have a login page that I can login via google, and when I login I get the parameters of the user. The problem is when I refresh the page the parameters are not saved.
This is my code:
export default {
name: "App",
data() {
return {
isLogin: false,
};
},
methods: {
async logOut() {
const result = await this.$gAuth.signOut();
this.isLogin = false;
console.log(`result`, result);
},
async login() {
const googleUser = await this.$gAuth.signIn();
console.log("googleUser", googleUser);
console.log("getId", googleUser.getId());
console.log("getBaseProfile", googleUser.getBasicProfile());
console.log("getAuthResponse", googleUser.getAuthResponse());
console.log(
"getAuthResponse$G",
this.$gAuth.GoogleAuth.currentUser.get().getAuthResponse()
);
this.isLogin = this.$gAuth.isAuthorized;
},
},
};
</script>
As a solution I want to save the session inside a cookie, so I tried to add a dummy cookie to my code, as follow:
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-cookies#1.7.4/vue-cookies.js"></script>
<template>
<div id="app">
<button #click="login()">Login</button>
Is login: ? {{ isLogin }}
<button #click="logOut()">LogOut</button>
</div>
</template>
<script>
// Require dependencies
var Vue = require('vue');
var VueCookie = require('vue-cookie');
// Tell Vue to use the plugin
Vue.use(VueCookie);
// From some method in one of your Vue components
this.$cookie.set('test', 'Hello world!', 1);
// This will set a cookie with the name 'test' and the value 'Hello world!' that expires in one day
// To get the value of a cookie use
this.$cookie.get('test');
// To delete a cookie use
this.$cookie.delete('test');
export default {
name: "App",
data() {
return {
isLogin: false,
};
},
methods: {
async logOut() {
const result = await this.$gAuth.signOut();
this.isLogin = false;
console.log(`result`, result);
},
async login() {
const googleUser = await this.$gAuth.signIn();
console.log("googleUser", googleUser);
console.log("getId", googleUser.getId());
console.log("getBaseProfile", googleUser.getBasicProfile());
console.log("getAuthResponse", googleUser.getAuthResponse());
console.log(
"getAuthResponse$G",
this.$gAuth.GoogleAuth.currentUser.get().getAuthResponse()
);
this.isLogin = this.$gAuth.isAuthorized;
},
},
};
</script>
But I got Uncaught TypeError: Vue.use is not a function.
What am I doing wrong?
Is there a better way to save the login session?
I think you skipped this line:
https://github.com/alfhen/vue-cookie#installation
Or do it the cool way and load it in your main.js/app.js
You should register that VueCookie plugin in the file where you start the Vue instance.
See: https://v2.vuejs.org/v2/guide/plugins.html
In our application, there is large set of data (json ~ 630KB) getting populated which consumes around 219.28 MB of JavaScript memory displayed in chrome task manager.
It loads the data from the api and uses vuex to store the data and generates the menu recursively.
Since it is a big application, I mimicked the same behaviour with a sample vue.js application by loading 100000 records to understand how the memory utilization works.
Each time "Run test" is clicked, 200 MB memory is consumed in the task manager and is not released until so much time even if the page is refreshed.
I tried to use "beforeDestroy" hook to clear the object from vuex but it is not working. I would like to know if the data itself is causing the slow performance or any other improvements can be done.
<html>
<head>
</head>
<body>
<div id="myApp">
<button #click="setCounterModule()">Counter</button>
<button #click="setCustomersModule">Customers</button>
<br />
<br />
<div>
<button-counter v-if="currentModule=='counter'"></button-counter>
<customers v-else></customers>
</div>
</div>
<script src="vue.js"></script>
<script src="vuex.js"></script>
<script>
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
});
Vue.component('customers', {
computed: {
customers() {
return store.state.customers
}
},
template: '<div><button #click="testMe" :disabled="loading">Run Test</button><div v-for="c in customers">{{ c.name }}</div></div>',
data: function() {
return {
loading: false
}
},
methods: {
testMe: function () {
this.loading = true;
let customers = [];
for (var i=0; i < 100000; i++) {
let customer = {'name': 'John' +i, 'address': 'Addr' + i};
customers.push(customer);
}
store.commit('assignCustomers', customers);
this.loading = false;
}
},
beforeDestroy() {
// console.log('vuex destroyed');
// store.commit('assignCustomers', null);
}
});
const store = new Vuex.Store({
state: {
customers: null
},
mutations: {
assignCustomers (state, customers) {
state.customers = customers;
}
}
});
var app = new Vue( {
el: "#myApp",
data: function() {
return {
currentModule: "counter"
}
},
methods: {
setCounterModule: function() {
this.currentModule = "counter";
},
setCustomersModule: function() {
this.currentModule = "customers";
}
}
});
</script>
</body>
</html>
A.html
<input type="submit" name="testLabel" value="Print Test" id="testLabel" onclick="myFunction('<?php echo $dynamic_page;?>')" >
<script>
function myFunction(page) {
var strWindowFeatures = "location=yes,height=570,width=520,scrollbars=yes,status=yes";
window.open(page, "_blank",strWindowFeatures);
}
</script>
CasperJS code
var casper = require('casper').create();
casper.start('http://localhost/test/a.html', function() {
this.echo(this.getTitle());
});
casper.thenClick('#testLabel');
casper.then(function() {
this.capture('page.png');
});
casper.run();
I have also try with phantomjs but i am not able to capture b.html page in page.png
Note : Popup page name is not fixed.
// this will set the popup DOM as the main active one only for time the
// step closure being executed
casper.withPopup(0, function() {
this.test.assertTitle('Popup title');
});
Complete code
var casper = require('casper').create();
casper.start('http://localhost/test/a.html', function () {
this.echo(this.getTitle());
});
casper.thenClick('#testLabel');
casper.waitForPopup(0, function () {
this.echo('Popup');
});
casper.then(function () {
this.capture('page.png');
});
casper.run();
Read more about waitForPopup
There is waitForPopup and withPopup methods so your code would look like this
var casper = require('casper').create();
casper.start('http://localhost/test/a.html', function() {
this.echo(this.getTitle());
});
casper.thenClick('#testLabel');
casper.waitForPopup(/.\.html$/, function() {
this.echo('Popup')
});
casper.withPopup(0, function() {
this.capture('page.png');
});
casper.run();
I'm trying to capture video/photo from webcam. I've foun a script working, but I would like to start the camera access only on button click. With this script it will start immediatly (I don't want to). How can I bind this event on click please?
window.addEventListener("DOMContentLoaded", function() {
// Grab elements, create settings, etc.
var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"),
video = document.getElementById("video"),
videoObj = { "video": true },
errBack = function(error) {
console.log("Video capture error: ", error.code);
};
// Put video listeners into place
if(navigator.getUserMedia) { // Standard
navigator.getUserMedia(videoObj, function(stream) {
video.src = stream;
video.play();
}, errBack);
} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
navigator.webkitGetUserMedia(videoObj, function(stream){
video.src = window.webkitURL.createObjectURL(stream);
video.play();
}, errBack);
}
// Trigger photo take
document.getElementById("snap").addEventListener("click", function() {
context.drawImage(video, 0, 0, 487, 365);
});
}, false);
You need to call getUserMedia in a click handler instead of during the DOM content loaded event.
I took the code in your question, and modified it:
Made it part of a whole html document so I could test it
Wrapped the code that starts the camera in a function, called startCamera
Added a "start camera" button. You could start the camera with the snap button is clicked, but that didn't really make sense to me.
Added a click listener to the "start camera" button, which simply executes the startCamera function
Here's the code:
<html>
<body>
<canvas id="canvas"></canvas>
<video id="video"></video>
<button id="startCamera">Start camera</button>
<button id="snap">Take snapshot</button>
<script>
window.addEventListener("DOMContentLoaded", function() {
// Grab elements, create settings, etc.
var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"),
video = document.getElementById("video"),
videoObj = { "video": true },
errBack = function(error) {
console.log("Video capture error: ", error.code);
};
// Put video listeners into place
function startCamera() {
if(navigator.getUserMedia) { // Standard
navigator.getUserMedia(videoObj, function(stream) {
video.src = stream;
video.play();
}, errBack);
} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
navigator.webkitGetUserMedia(videoObj, function(stream){
video.src = window.webkitURL.createObjectURL(stream);
video.play();
}, errBack);
}
}
// Trigger photo take
document.getElementById("snap").addEventListener("click", function() {
context.drawImage(video, 0, 0, 487, 365);
});
// Trigger starting the camera
document.getElementById("startCamera").addEventListener("click", function() {
startCamera();
});
}, false);
</script>
</body>
</html>
Try This code. Also try to run this from a virtual directory.
<html>
<head>
<script type="text/javascript">
function doGetUserMedia() {
// Grab elements, create settings, etc.
var canvas = document.getElementById("canv"),
context = canvas.getContext("2d"),
video = document.getElementById("video"),
videoObj = { "video": true },
errBack = function(error) {
console.log("Video capture error: ", error.code);
};
// Put video listeners into place
if(navigator.getUserMedia) { // Standard
navigator.getUserMedia(videoObj, function(stream) {
video.src = stream;
video.play();
}, errBack);
} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
navigator.webkitGetUserMedia(videoObj, function(stream){
video.src = window.webkitURL.createObjectURL(stream);
video.play();
}, errBack);
}
// Trigger photo take
document.getElementById("snap").addEventListener("click", function() {
context.drawImage(video, 0, 0, 487, 365);
});
}
</script>
</head>
<body>
<button onclick="doGetUserMedia()">Start Camera</button>
<video id="video" width="487" height="365"></video>
<button id="snap">Take snapshot</button>
<canvas id="canv" width="487" height="365"></canvas>
</body>
</html>
You can try something like that:
<html>
<head>
<script type="text/javascript">
function doGetUserMedia() {
// Grab elements, create settings, etc.
var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"),
video = document.getElementById("video"),
videoObj = { "video": true },
errBack = function(error) {
console.log("Video capture error: ", error.code);
};
// Put video listeners into place
if(navigator.getUserMedia) { // Standard
navigator.getUserMedia(videoObj, function(stream) {
video.src = stream;
video.play();
}, errBack);
} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
navigator.webkitGetUserMedia(videoObj, function(stream){
video.src = window.webkitURL.createObjectURL(stream);
video.play();
}, errBack);
}
// Trigger photo take
document.getElementById("snap").addEventListener("click", function() {
context.drawImage(video, 0, 0, 487, 365);
});
}
</script>
</head>
<body>
<button onclick="doGetUserMedia()">Click me</button>
</body>
</html>