I'm getting this error when I use the Youtube API to embed a video on Chrome:
"origin youtube api Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://www.youtube.com') does not match the recipient window's origin ('XXXXXXX')."
It works fine, but I get that error.
If I'm doing a simple Youtube iframe embed, I typically solve this problem by adding an origin setting to the URL. However, I don't seem to be able to do this with the API. I added an origin to the playerVars but it doesn't resolve the error.
<script async src="https://youtube.com/iframe_api"></script>
<script>
function onYouTubeIframeAPIReady() {
var player1;
player1 = new YT.Player('YouTubePlayer', {
videoId: 'XXXXXXXXXXXX',
width: 1920,
height: 1080,
playerVars: {
autoplay: 1,
start: 40,
end:640,
controls: 0,
showinfo: 0,
enablejsapi: 1,
origin: 'https://XXXXXXXXX.com',
modestbranding: 1,
loop: 1,
fs: 0,
cc_load_policy: 0,
iv_load_policy: 3,
autohide: 0
},
events: {
onReady: function(e) {
e.target.mute();
player1.addEventListener('onStateChange', function(e) {
var id = 'XXXXXXXXX';
if(e.data === YT.PlayerState.ENDED){
player1.loadVideoById({'videoId': id,
'startSeconds': 40,
'endSeconds': 640,
'suggestedQuality': 'large'});
};
});
}
}
});
Where should I add an origin? Or is there another way to address this problem? Thanks!
Related
I am using nodemon client package in order to live stream using rtmp. Everything is working fine with video. I want to mute/unmute audio before sending the stream through rtmp.
My code:
var config = {
cameraConfig: {
cameraId: 0,
cameraFrontMirror: true,
},
videoConfig: {
preset: 4,
bitrate: 32000000,
profile: 2,
fps: 30,
videoFrontMirror: false,
},
audioConfig: {
bitrate: 128000,
profile: 1,
samplerate: 44100,
}
};
<NodeCameraView
ref={(vb) => {
setPlayerRef(vb);
}}
outputUrl={url}
camera={config.cameraConfig}
audio={config.audioConfig}
video={config.videoConfig}
autopreview={true}
/>
How can I do this.
I'm new to this, but I'm trying to make a 3D map of a street in a semi-obscure Pennsylvania town. I have a geojson file that specifies the real estate parcels and their data, but not heights or elevations of buildings. I'm using ArcGis developer. When the page renders, I get the parcels as seen from the angle I designated, but the buildings don't extrude properly. Since I am modifying code I found online, I have probably included some things that aren't applicable to my page. I've made a codepen, but it doesn't show the extrusion at all: https://codepen.io/lschneiderman/pen/mdVJbOm?editors=0011
I'm getting these error messages:
[esri.layers.graphics.sources.GeoJSONSource] Some fields types couldn't be inferred from the features and were dropped
dojo.js:253 [esri.views.3d.layers.graphics.Graphics3DCore] Graphic in layer 17285dfb501-layer-0 has no symbol and will not render
My HTML:
<div id="viewDiv"></div>
CSS:
html, body, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
JS:
require([
"esri/Map",
"esri/views/SceneView",
"esri/layers/GeoJSONLayer",
"esri/layers/SceneLayer"
], function(Map, SceneView, GeoJSONLayer, SceneLayer) {
const geojsonLayer = new GeoJSONLayer({
url:
"https://newsinteractive.post-gazette.com/mckeesport-fifth-ave/data/parcels-fifth1922.geojson"
});
geojsonLayer.elevationInfo = {
mode: "relative-to-ground",
featureExpressionInfo: {
expression: "$feature.elevation"
},
unit: "feet"
};
const heightVV = {
type: "size",
valueExpression: "$feature.height",
valueUnit: "feet"
};
geojsonLayer.renderer = {
type: "unique-value",
field: "CLASSDESC__asmt",
uniqueValueInfos: [
{
value: "COMMERCIAL",
symbol: {
type: "polygon-3d",
symbolLayers: [
{
type: "extrude",
material: {
color: "#D06152"
}
}
]
}
},
{
value: "RESIDENTIAL",
symbol: {
type: "polygon-3d",
symbolLayers: [
{
type: "extrude",
material: {
color: "#4A9B89"
}
}
]
}
}
],
visualVariables: [heightVV]
};
const map = new Map({
basemap: "gray-vector",
ground: "world-elevation",
layers: [
geojsonLayer,
new SceneLayer({
url:
"https://tiles.arcgis.com/tiles/cFEFS0EWrhfDeVw9/arcgis/rest/services/Buildings_Manhattan/SceneServer",
renderer: {
type: "simple",
symbol: {
type: "mesh-3d",
symbolLayers: [
{
type: "fill",
material: {
color: "white"
},
edges: {
type: "solid",
color: [100, 100, 100, 0.5],
size: 0.5
}
}
]
} //end symbol, line 93
} //end renderer
})//end SceneLayer
] //end layers
});
const view = new SceneView({
container: "viewDiv",
map: map
});
view.goTo({
target: [-79.869331, 40.350433], // coordinates of crossing
heading: 90,
tilt: 45,
zoom: 30 // instead of a z-value, we provide the zoom level
}, {
duration: 0 // tell view not to animate camera movement
});
});
Any help would be much appreciated!
The provided sample has the following issues:
Missing CORS headers
The API tries to load the GeoJSON but the browser denies it with the following error message:
Access to fetch at 'https://newsinteractive.post-gazette.com/mckeesport-fifth-ave/data/parcels-fifth1922.geojson' from origin 'https://cdpn.io' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
You must either host the GeoJSON file on the same host the script is running or add CORS headers to the server hosting the GeoJSON file. For the CodePen below I downloaded the GeoJSON and uploaded it again as a CodePen asset, where CORS headers are properly set to make this work:
const geojsonLayer = new GeoJSONLayer({
url: "https://assets.codepen.io/2969649/parcels-fifth1922.geojson"
});
Missing height attribute for extrusion
The features (in this case parcels) listed in the GeoJSON have no height information. The provided sample uses a size visual variable to extrude the polygons by the height attribute:
const heightVV = {
type: "size",
valueExpression: "$feature.height",
valueUnit: "feet"
};
Because there is no attribute named height, all polygons are extruded 0 feet. You can either add a corresponding attribute to all the features in the GeoJSON or simply define a constant in the sample that will be applied to all extruded polygons:
geojsonLayer.renderer = {
type: "simple",
symbol: {
type: "polygon-3d",
symbolLayers: [{
type: "extrude",
size: 50, // extrude all buildings by 50 meters
material: {
color: "#D06152"
}
}]
}
}
See the following CodePen for a working version with the above parcels:
https://codepen.io/arnofiva/pen/474ecc855475ced8d50f3f121988649f?editors=0010
You might want to check out the following ArcGIS API for JavaScript resources:
Sample: extruding building footprints
Fundamentals for Building 3D Web Apps (Youtube)
Practical Guide for Building a 3D Web App from 2D Data (Youtube)
I've been trying to make this work for a while but haven't made any progress. Not sure if I'm missing something or if it just won't work within this setup.
In short: client has a shopify site, and wants to load in images from tumblr in an infinite scroll.
I'm using the standards from DeSandro: Infinite Scroll, Masonry, ImagesLoaded, and basing the combination on this pen.
I have the tumblr feed loading in fine via tumblr API, and displayed in a masonry grid, but can't get the infinite scroll to work.
Will InfiniteScroll not work because the content is loaded in via ajax, and isn't actually on the page yet when InfiniteScroll tries to load it in? Any insight would be appreciated!
$(document).ready(function() {
// Main content container
var $container = $('#tblr_container');
$.ajax({
url: 'https://api.tumblr.com/v2/blog/xxxxxxx.tumblr.com/posts?api_key=xxxxxxx&limit={{ pagesize }}&offset={{ offset }}&callback=?',
dataType:'json',
success: function(data) {
$.each(data.response.posts, function(index,item) {
if (this['type'] === 'photo') {
var src = item.photos[0].alt_sizes[0].url;
$("#tblr_container").append('<div class="item masonry__item ' + index + '"><li><img src = "'+src+'"></li></div>');
}
});
// init Masonry
var $grid = $('#tblr_container').masonry({
itemSelector: 'none', // select none at first
columnWidth: '.grid-sizer',
gutter: 5,
percentPosition: true,
stagger: 30,
// nicer reveal transition
visibleStyle: { transform: 'translateY(0)', opacity: 1 },
hiddenStyle: { transform: 'translateY(100px)', opacity: 0 },
});
// get Masonry instance
var msnry = $grid.data('masonry');
// initial items reveal
$grid.imagesLoaded( function() {
$grid.removeClass('are-images-unloaded');
$grid.masonry( 'option', { itemSelector: '.item' });
var $items = $grid.find('.item');
$grid.masonry( 'appended', $items );
});
// init Infinte Scroll
$grid.infiniteScroll({
path: '.pagination__next',
append: '.item',
outlayer: msnry,
hideNav: '#pagination',
status: '.page-load-status',
});
}
});
Here's the link: https://negativeunderwear.com/pages/for-women
And, the link to page 2: https://negativeunderwear.com/pages/for-women?page=2&cache=false - this is .pagination__next
(FYI before clicking, it's a women's underwear site.)
Thanks!
I am able to send a message to a Chrome Web App using GCM. I am using a http post to: https://android.googleapis.com/gcm/send
sending registrationid, applicationid, and senderid values. The message shows as a Chrome Notification on my screen. My question is - is there a command or a GCM event/function I can use to start the Chrome Web App? Google Chrome is set to run in the background.
This is my GCM Listener for message event:
chrome.gcm.onMessage.addListener(messageReceived);
It calls the messageReceived function and in this function I get message, pop notification on the screen, and open/create the window:
chrome.notifications.create(getNotificationId(), {
title: 'GCM Message',
iconUrl: 'gcm_128.png',
type: 'basic',
message: messageString
}, function() {});
// Center window on screen.
var screenWidth = screen.availWidth;
var screenHeight = screen.availHeight;
var width = 500;
var height = 300;
chrome.app.window.create('register.html', {
id: "helloWorldID",
outerBounds: {
width: width,
height: height,
left: Math.round((screenWidth-width)/2),
top: Math.round((screenHeight-height)/2)
}
});
}
You cannot start chrome directly from the code that receives the push message. However once the notification is clicked you can use http://www.w3.org/TR/service-workers/#client-focus to see if there is already a window opened or http://www.w3.org/TR/service-workers/#client-navigate to open a new window.
https://tests.peter.sh/notification-generator/ is a good sample site where you can play with the different options.
This is my GCM Listener for message event:
chrome.gcm.onMessage.addListener(messageReceived);
It calls messageReceived function and in this function I get message, pop notification on the screen, and open/create the window:
chrome.notifications.create(getNotificationId(), {
title: 'GCM Message',
iconUrl: 'gcm_128.png',
type: 'basic',
message: messageString
}, function() {});
// Center window on screen.
var screenWidth = screen.availWidth;
var screenHeight = screen.availHeight;
var width = 500;
var height = 300;
chrome.app.window.create('register.html', {
id: "helloWorldID",
outerBounds: {
width: width,
height: height,
left: Math.round((screenWidth-width)/2),
top: Math.round((screenHeight-height)/2)
}
});
}
I've successfully integrated both a Flot line graph and an instance of FullCalendar into my site. They are both on separate pages (although the pages are loaded into a div via AJAX).
I've added the Flot Resize plugin and that works perfectly, re-sizing the line graph as expected. However, it seems to cause an error when resizing the calendar.
Even if I load the calendar page first, when I resize the window I get this error in the console (also, the calendar does not resize correctly):
TypeError: 'undefined' is not an object (evaluating 'r.w=o!==c?o:q.width()')
I was struggling to work out where the error was coming from, so I removed the link to the Flot Resize JS and tried again. Of course the line graph does not resize, but when resizing the calendar, it works correctly.
The div containers for the two elements have different names and the resize function is called from within the function to draw the line graph (as required).
I have tried moving the link to the Flot Resize plugin into different places (i.e. above/below the fullCalendar JS, into the template which holds the graph), but all to no avail.
Does anyone have any idea where the conflict might be and how I might solve it??
Thanks very much!
EDIT: It seems that the error is also triggered when loading the line graph (flot) page AFTER the fullcalendar page even without resizing the window.... Now I am very confused!
EDIT 2: The code which draws the line graph. The function is called on pageload and recieves the data from JSON pulled off the server. When the graph is loaded, I still get the error about shutdown() being undefined.
function plotLineGraph(theData){
var myData = theData['data'];
var myEvents = theData['events'];
var myDates = theData['dates'];
var events = new Array();
for (var i=0; i<myEvents.length; i++) {
events.push(
{
min: myEvents[i][0],
max: myEvents[i][1],
eventType: "Calendar Entry",
title: myEvents[i][2],
description: myEvents[i][3]
}
);
}
function showTooltip(x, y, contents) {
$('<div id="tooltip">' + contents + '</div>').css( {
position: 'absolute',
display: 'none',
top: y + 5,
left: x + 5,
border: '1px solid #fdd',
padding: '2px',
'background-color': 'black',
opacity: 0.80
}).appendTo("body").fadeIn(200);
}
var previousPoint = null;
$("#placeholder").bind("plothover", function (event, pos, item) {
$("#x").text(pos.x.toFixed(2));
$("#y").text(pos.y.toFixed(2));
if ($("#enableTooltip:checked").length == 0) {
if (item) {
if (previousPoint != item.dataIndex) {
previousPoint = item.dataIndex;
$("#tooltip").remove();
var x = item.datapoint[0].toFixed(2),
y = item.datapoint[1].toFixed(2);
if(item.series.label != null){
showTooltip(item.pageX, item.pageY,
item.series.label + " of " + y);
}
}
}
else {
$("#tooltip").remove();
previousPoint = null;
}
}
});
var d1 = [
myData[0], myData[1], myData[2], myData[3], myData[4],
myData[5], myData[6], myData[7], myData[8], myData[9],
myData[10], myData[11], myData[12], myData[13], myData[14],
myData[15], myData[16], myData[17], myData[18], myData[19],
myData[20], myData[21], myData[22], myData[23], myData[24],
myData[25], myData[26], myData[27], myData[28], myData[29]
];
var markings = [
{ color: '#FFBDC1', yaxis: { from: 0, to: 2 } },
{ color: '#F2E2C7', yaxis: { from: 2, to: 3.5 } },
{ color: '#B6F2B7', yaxis: { from: 3.5, to: 5 } }
];
$.plot($("#placeholder"), [
{label: "Average Daily Rating", data: d1, color: "black"}
], {
events: {
data: events,
},
series: {
lines: { show: true },
points: { show: true }
},
legend: { show: true, container: '#legend-holder' },
xaxis: {
ticks:[
myDates[0], myDates[1], myDates[2], myDates[3], myDates[4],
myDates[5], myDates[6], myDates[7], myDates[8], myDates[9],
myDates[10], myDates[11], myDates[12], myDates[13], myDates[14],
myDates[15], myDates[16], myDates[17], myDates[18], myDates[19],
myDates[20], myDates[21], myDates[22], myDates[23], myDates[24],
myDates[25], myDates[26], myDates[27], myDates[28], myDates[29]
],
},
yaxis: {
ticks: 5,
min: 0,
max: 5
},
grid: {
backgroundColor: { colors: ["#fff", "#eee"] },
hoverable: true,
clickable: true,
markings: markings
},
selection: {
color: 'white',
mode: 'x'
},
});
$('#placeholder').resize();
$('#placeholder').shutdown();
}
EDIT 3:
The calendar is called like this:
function showCalendar() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
$('#fullcalendar').fullCalendar({
header: {
left: 'prev',
center: 'title',
right: 'next'
},
clickable: true,
firstDay: 1,
eventSources: [
{
url: '/populate-calendar/{{theProductUuid}}/',
color: 'black',
data: {
text: 'text'
}
}
],
eventClick: function(calEvent, jsEvent, view) {
var startDate = $.fullCalendar.formatDate(calEvent.start, 'yyyy-MM-dd');
var endDate = $.fullCalendar.formatDate(calEvent.end, 'yyyy-MM-dd');
var eventId = calEvent.uuid;
$('#modal-event-title').text(calEvent.title);
$('#edit-event-name').val(calEvent.title);
$('#edit-start-date').val(startDate);
$('#edit-end-date').val(endDate);
$('#edit-event-text').val(calEvent.text);
$('#edit-event-btn').attr('data-uuid', eventId);
$('#modal-edit-event').on('click', '#delete-btn', function(){
deleteCalendarEvent(eventId);
});
$('#modal-edit-event').modal();
},
});
}
The AJAX to load the page containing the flot chart:
function loadDetailedReports(uuid){
$('#product-content').fadeOut('slow', function(){
$('#product-content').empty();
$('#whole-product-sub-nav .active').removeClass('active');
$('#detailed-reports-content').load('/detailed-reports/' + uuid + '/', function(){
$('#detailed-reports-btn').addClass('active');
$('#detailed-reports-content').fadeIn('slow', function(){
if (authorized){
setLocationHash('loadDetailedReports&' + uuid);
getChartData(uuid);
} else {
setLocationHash('');
}
});
});
});
}
And the AJAX to load the page containing the calendar:
function loadCalendar(uuid){
$('#detailed-reports-content').empty().hide();
$('#product-content').fadeOut('slow', function(){
$('#whole-product-sub-nav .active').removeClass('active');
$('#product-content').load('/calendar/' + uuid + '/', function(){
$('#calendar-btn').addClass('active');
$('#product-content').fadeIn('slow', function(){
if (authorized){
setLocationHash('loadCalendar&' + uuid);
} else {
setLocationHash('');
}
showCalendar();
});
});
});
}
The calls to .resize and .shutdown are there because I was under the impression that they are necessary to achieve the resizing function and in response to your earlier comment regarding shutdown...... They're quite possibly n00b errors........?!?!
It looks like this is triggering on line 198 of jquery-resize:
data.w = w !== undefined ? w : elem.width();
This sounds like a race-condition stemming from the way you load different content into the same div. Flot binds the resize event to the chart div, and only un-binds it if the plot is destroyed cleanly.
EDIT: Looking at your code, my first suggestion would be to get rid of the resize and shutdown calls at the end of plotLineGraph. The resize plugin doesn't require any setup; it hooks into Flot to attach automatically to any new plot. So your call to resize is actually to jQuery's resize event trigger, which may be what's causing the error.
EDIT #2: I'm still not clear on your structure, but to generalize: anywhere that you might be getting rid of #placeholder (via emptying its parent or anything like that) you should first call shutdown on the plot object. If you aren't keeping a reference to it, you can do it like this: $("#placeholder").data("plot").shutdown(); but then have to account for the fact that it's undefined prior to the creation of your first plot.
If that still doesn't work, I'd need to see a live (simplified) example to make any further suggestions.