I'm trying to run YT player on my site, but there is a problem with IE8 and IE9 - player is not loading.
http://code.google.com/intl/pl/apis/youtube/youtube_player_demo.html
Code:
$(document).ready(function() {
loadPlayer('{$videos[0].videoID}','{$playlist}');
}
function onYouTubePlayerReady(playerId) {
ytplayer = document.getElementById("ytPlayer");
ytplayer.addEventListener("onError", "onPlayerError");
ytplayer.addEventListener("onStateChange", 'onStateChange');
}
function loadPlayer(ytID,ytList) {
var videoID = ytID;
var params = {
allowScriptAccess: "always",
allowFullScreen: true
};
var atts = {
id: "ytPlayer"
};
swfobject.embedSWF("http://www.youtube.com/v/" + videoID +
"?version=3&enablejsapi=1&playerapiid=player1&autohide=1&showinfo=0&autoplay=1&controls=1&loop=1&fs=1&origin=http://www._____.com&playlist="+ytList+'&key='+devKey,
"videoDiv", "620", "350", "9", null, null, params, atts);
}
I don't know if this causes the problem (shouldn't work on any environment), but there's a syntax error on line 3:
}
You're not closing the ready(), should be:
});
IE Does not support the addEventListener method. Try re-working that.
Related
I'm trying to develop an app where users can can video call to each other and share their screens using WebRTC technology. I have succeed with either video call or screen sharing app and now I'm trying to make it to be able to switch between getUserMedia and getDisplayMedia on button click during a call inside the same RTCPeerConnection but it doesn't work.
This is how I thought it could work:
function onLogin(success) {
var configuration = { offerToReceiveAudio: true, offerToReceiveVideo: true, "iceServers" : [ { "url" : "stun:stun.1.google.com:19302" } ] };
myConnection = window.RTCPeerConnection ? new RTCPeerConnection(configuration, { optional: [] }) : new RTCPeerConnection(configuration, { optional: [] });
myConnection.onicecandidate = function (event) {
console.log("onicecandidate");
if (event.candidate) send({ type: "candidate", candidate: event.candidate });
};
myConnection.ontrack=function(e){
try{remoteVideo.src = window.webkitURL?window.webkitURL.createObjectURL(e.streams[0]):window.URL.createObjectURL(e.streams[0])}
catch(err){remoteVideo.srcObject=e.streams[0]}
}
myConnection.ondatachannel=openDataChannel
openDataChannel();
startAVStream();
//startSStream()
};
function startAVStream(enable){
if(sStream)sStream.getTracks().forEach( function (track) {
try{myConnection.removeTrack( track, sStream );}
catch(e){}
} );
navigator.mediaDevices.getUserMedia({ video: true, audio: true }).then(s => {
if(!avStream){
avStream = s;
avStream.getTracks().forEach( function (track) {
myConnection.addTrack( track, avStream );
} );
}
}, function (error) { console.log(error); });
}
function startSStream(enable){
if(avStream)avStream.getTracks().forEach( function (track) {
try{myConnection.removeTrack( track, avStream );}
catch(e){}
} );
navigator.mediaDevices.getDisplayMedia({ video: true }).then(s => {
if(!sStream){
sStream = s;
sStream.getTracks().forEach( function (track) {
myConnection.addTrack( track, sStream );
} );
}
}, function (error) { console.log(error); });
}
Can anyone tell me how I can switch between tracks inside the same RTCPeerConnection or should I create 2 separate RTCPeerConnection - one for video/audio streaming and another for screen sharing?
Any help appreciated! Thanks!
You could use RTCRtpSender.replaceTrack to splice the screen capture track. This doesn't require renegotiation, and therefore has very low latency.
let newstream = navigator.mediaDevices.getDisplayMedia({});
let newtrack = newstream.getTracks()[1];
if(newtrack.kind !== 'video')
throw new Error('Eek!?');
pc.getSenders().forEach(async s => {
if(s.track && s.track.kind === 'video')
await s.replaceTrack(newtrack);
});
The test for s.track not being null deals with the case where you previously called replaceTrack(..., null).
shareScreen = () =>{
const success = (stream) => {
window.localStream = stream
// this.localVideoref.current.srcObject = stream
// localStream.replaceStream(stream);
this.setState({
localStream: stream
})
Object.values(this.state.peerConnections).forEach(pc => {
pc.getSenders().forEach(async s => {
console.log("s.track ",s.track);
if(s.track && s.track.kind === 'video'){
stream.getTracks().forEach(track => {
// pc.addTrack(track, this.state.localStream)
s.replaceTrack(track);
});
}
});
});
}
const failure = (e) => {
console.log('getUserMedia Error: ', e)
}
navigator.mediaDevices.getDisplayMedia({ cursor: true }).then(success).catch(failure)}
I seem to be having an issue with the requestCardNonce() function for some safari users This is using the Javascript API in my .net MVC application.
The current version I'm testing on appears to be working (13.0.4) but users are still reporting an inability to complete their orders with previous versions of safari. When filling in their information they're able to see the dialog that contains the fields for the Card Name, Number, CVV, and Postal code and expiration date but can't seem to proceed to the next dialog. The onGetCardNonce(event) function seems to be having issues executing properly.
The code I have currently looked like this
if (gateway == "Square Payment Gateway") {
paymentForm = new SqPaymentForm({
applicationId: appId,
inputClass: 'sq-input',
autoBuild: false,
cardNumber: {
elementId: 'sq-card-number',
placeholder: 'Card Number'
},
cvv: {
elementId: 'sq-cvv',
placeholder: 'CVV'
},
expirationDate: {
elementId: 'sq-expiration-date',
placeholder: 'MM/YY'
},
postalCode: {
elementId: 'sq-postal-code',
placeholder: 'Postal'
},
// SqPaymentForm callback functions
callbacks: {
cardNonceResponseReceived: function (errors, nonce, cardData) {
let errMsg = "";
if (errors) {
// Log errors from nonce generation to the browser developer console.
console.error('Encountered errors:');
errors.forEach(function (error) {
console.error(' ' + error.message);
errMsg += ' ' + error.message;
});
alert('Encountered errors' + errMsg);
return;
}
$("#CardNumber").val(cardData["last_4"]);
$("#squareToken").val(nonce)
$("#form-container").dialog("close");
var isValid = true;
$('#CardName,#CardNumber').each(function () {
if ($.trim($(this).val()) == '') {
isValid = false;
$(this).css({
"border": "",
"background": ""
});
}
else {
$(this).css({
"border": "",
"background": ""
});
}
});
if ($("#Total").val() == "0.00" || $("#Total").val() == "0")
isValid = true;
if (isValid == false) {
$('#PayCreditCard')[0].disabled = false;
}
else {
var targetUrl = $(this).attr("href");
// Open Terms & Conditions
$("#dvTermsConditions").dialog("open");
$("#dvTermsConditions").dialog({
autoOpen: false,
modal: true,
buttons: {
"Proceed": function () {
if ($('#AgreeToTerms').is(':checked')) {
$(':input[type="submit"]').prop('disabled', true);
$(this).dialog("close");
$("#frmCheckOut").submit();
}
else {
alert("You must agree to the terms & conditions.");
}
},
"Cancel": function () {
$('#PayCreditCard')[0].disabled = false;
$(this).dialog("close");
}
}
});
}
}
}
});
paymentForm.build();
function onGetCardNonce(event) {
// Don't submit the form until SqPaymentForm returns with a nonce
event.preventDefault();
// Request a nonce from the SqPaymentForm object
paymentForm.requestCardNonce();
}
function closeCC() {
$("#form-container").dialog("close");
}
}
Originally the issue was that payment form was not found so I moved the definition of that outside the if statement and that seemed to clear up the issue for safari 13.0.4+
Does anyone have suggestions on how to make the square payment form (v2) work on all (or at least the last 3+ years) of versions of Safari (not on mobile)?
I have a huge json data source (over 50,000 + lines) loaded in memory from a static file.
Note: It's not important why I have it in a static file.
I use select2 (v 4.0.5) that initializes as:
function initSelect2(selectName, dataSelect) {
var pageSize = 20;
$.fn.select2.amd.require(["select2/data/array", "select2/utils"],
function (ArrayData, Utils) {
function CustomData($element, options) {
CustomData.__super__.constructor.call(this, $element, options);
}
Utils.Extend(CustomData, ArrayData);
CustomData.prototype.query = function (params, callback) {
if (!("page" in params)) {
params.page = 1;
}
var data = {};
data.results = dataSelect.slice((params.page - 1) * pageSize, params.page * pageSize);
data.pagination = {};
data.pagination.more = params.page * pageSize < dataSelect.length;
callback(data);
};
$('#mySelect3').select2({
ajax: {},
dataAdapter: CustomData,
width: '100%'
});
});
}
I have one big problem. I can not set the value to select from jQuery. If I try like this:
$ ("#mySelect3").val(17003).trigger("change");
nothing will happen. But I think I'm doing it badly. If I understand the documentation I think I should implement function:
CustomData.prototype.current = function (callback) {}
that should create the data, and then function:
CustomData.prototype.query = function (params, callback) {}
should only filter them.
Can you please help me, how do I implement select2 initialization, that can work with many options and can by set from jQuery?
With custom data adapter you don't need pagination :
// create huge array
function mockData() {
var hugeArray = [];
for (let i = 0; i < 50000; i++) {
el = {
id: i,
text: 'My mock data ' + i,
};
hugeArray.push(el);
}
return hugeArray;
};
// define custom dataAdapter
$.fn.select2.amd.define("myCustomDataAdapter",
['select2/data/array','select2/utils'],
function (ArrayData, Utils) {
function CustomData ($element, options) {
CustomData.__super__.constructor.call(this, $element, options);
};
Utils.Extend(CustomData, ArrayData);
CustomData.prototype.query = function (params, callback) {
var data = {
// here replace mockData() by your array
results: mockData()
};
callback(data);
};
return CustomData;
}
);
//
$('#mySelect3').select2({
allowClear: true,
// use dataAdapter here
dataAdapter:$.fn.select2.amd.require("myCustomDataAdapter"),
});
And with search you can do like this :
// create huge array
function mockData() {
var hugeArray = [];
for (let i = 0; i < 50000; i++) {
el = {
id: i,
text: 'My mock data ' + i,
};
hugeArray.push(el);
}
return hugeArray;
};
// define custom dataAdapter
$.fn.select2.amd.define("myCustomDataAdapter",
['select2/data/array','select2/utils'],
function (ArrayData, Utils) {
function CustomData ($element, options) {
CustomData.__super__.constructor.call(this, $element, options);
};
Utils.Extend(CustomData, ArrayData);
CustomData.prototype.query = function (params, callback) {
var data = {
// here replace mockData() by your array
results: mockData()
};
if ($.trim(params.term) === '') {
callback(data);
} else {
if (typeof data.results === 'undefined') {
return null;
}
var filteredResults = [];
data.results.forEach(function (el) {
if (el.text.toUpperCase().indexOf(params.term.toUpperCase()) == 0) {
filteredResults.push(el);
}
});
if (filteredResults.length) {
var modifiedData = $.extend({}, data, true);
modifiedData.results = filteredResults;
callback(modifiedData);
}
return null;
}
};
return CustomData;
}
);
//
$('#mySelect3').select2({
minimumInputLength: 2,
tags: false,
allowClear: true,
// use dataAdapter here
dataAdapter:$.fn.select2.amd.require("myCustomDataAdapter"),
});
I had the same issue and this is how I solved it.
Note: We are using dataAdapter because we dealing with large that, so I am assuming your drop-down will contain large amount of data.
After implementing your DataAdapter with a query use this example to initialize your select2.
if(selectedValue !== null )
{
$("#item_value").select2({
placeholder: 'Select an option',
allowClear: true,
disabled: false,
formatLoadMore: 'Loading more...',
ajax: {},
data: [{ id: selectedValue, text: selectedValue }],
dataAdapter: customData
});
$("#item_value").val(selectedValue).trigger('change');
}else{
$("#item_value").select2({
placeholder: 'Select an option',
allowClear: true,
disabled: false,
formatLoadMore: 'Loading more...',
ajax: {},
dataAdapter: customData
});
}
To set selected value in select2 you need to pass some data into data option, but as we are dealing with large amount of data. You can't pass the complete array of large data you have as it's going to cause your browser window to freeze and lead to a bad user performance.
But instead set the data option only with the selected value you got from db or variable.
I hope this helps.
I am trying to use a page-worker and a pageMod together using port.on() and port.emit(), but the signals from define.js do not have any effect on the pageMod's port.on()... Is this the proper way to use port.on() and port.emit() or is chaining the two together this way not allowed?
index.js:
pageMod.PageMod({
include: "*",
contentScriptWhen: "ready",
contentScriptFile: [
data.url("jquery.js"),
data.url("jquery-ui.min.js"),
data.url("define.js")
],
onAttach: function(worker){
worker.port.on("getWord", function(word) {
console.log(word);
worker.port.emit("newWord", word);
});
worker.port.on("updatedWord", function(URL){
console.log(URL);
});
}
});
dictionaryRef.Page({
contentScriptWhen: "ready",
contentScriptFile: [
data.url("jquery.js"),
data.url("jquery-ui.min.js"),
data.url("define.js"),
],
contentURL: "http://www.dictionary.com/browse/",
onAttach: function(worker){
worker.port.on("newWord", function(word) {
console.log(word);
self.contentURL = "http://www.dictionary.com/browse/" + word;
worker.port.emit("updatedWord", self.contentURL);
});
}
});
define.js:
$(window).dblclick(function() {
var selected = getSelected();
if (selected!="") {
calldictionary(selected);
var completedURL = "http://www.dictionary.com/browse/" + selected;
pageMod.port.emit("getWord", selected);
$('#define').dialog("open");
dictionaryRef.contentURL = completedURL;
}
});
function getSelected() {
if (window.getSelection) {
return window.getSelection().toString();
} else if (document.selection) {
return document.selection.createRange().text;
}
return '';
}
Basically, getSelected() will capture a highlighted word and then the "dblclick" binding should send a signal via port.emit() that the pageMod should receive, then pass onto a page-worker to change its URL, which would allow me to access the DOM and scrape the dictionary definition so that it can be displayed in the main window in a popup. At the moment, none of the port.emit() statements work.
Here is the work space :http://jsfiddle.net/WBFa4/51/
The significant part of the code is:
swfobject.embedSWF
(
'http://www.youtube.com/apiplayer?enablejsapi=1&version=3',
'ytplayer_div1',
'425',
'344',
'8',
null,
null,
{
allowScriptAccess: 'always',
allowFullScreen: 'true'
},
{
id: 'ytplayer_object'
}
);
onYouTubePlayerReady=function() {
var ytplayer = document.getElementById("ytplayer_object");
ytplayer.loadVideoById("IMdI_fozMYg");
ytplayer.addEventListener("onStateChange","Hsc");
}
function Hsc(state) {
if(state==0) {
document.getElementById("notif").innerHTML="<p>yeah</p>";
var ytplayer=document.getElementById("ytplayer_object");
ytplayer.loadVideoById("bHQqvYy5KYo");
}
};
In case anyone's interested, here's the working solution:
http://jsfiddle.net/WBFa4/97/
A snippet of code:
onytplayerStateChange=function(newState) {
document.getElementById("notif").innerHTML="<p>yeah</p>";
if(newState==0) { // Here I changed state to newStage.
document.getElementById("notif").innerHTML="<p>yeah</p>";
var ytplayer=document.getElementById("ytplayer_object");
ytplayer.loadVideoById("bHQqvYy5KYo");
}
}
Thanks to sunxperous