I am following along with a tutorial (http://www.yeahbutisitflash.com/?p=5226) and when I try to render on google chrome the dev tools console shows this:
Pixi.js v2.2.3 - webGL http://www.pixijs.com/ ♥♥♥ pixi.dev.is:224
referring to line# 224 on the pixi source code:
line# 224 console.log.apply(console, args);
this is my code(:
function init(){
stage = new PIXI.Stage(0x66FF99);
renderer = PIXI.autoDetectRenderer(
512,
384,
document.getElementById("game-canvas")
);
renderer.render(stage);
}
Related
I have read some articles that mentioned how to get image by selenium. For example:
from selenium import webdriver
import requests
driver=webdriver.Firefox()
driver.get("http/https://your website")
img=driver.find_element_by_xpath("xpath leading to your element")#locating element
src=img.get_attribute('src')#fetch the location of image
img=requests.get(src)#fetch image
with open('image.jpg','wb') as writer:#open for writing in binary mode
writer.write(img.content)#write the image
But does this methods have a risk of more bandwidth cost?
Is there any way just like I right click on the image and save as it to local PC?
I have tried use javascript to do that:
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
var img = document.getElementById('someImageId');
context.drawImage(img, 0, 0 );
var theData = context.getImageData(0, 0, img.width, img.height);
and meet cross-origin problem
Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.
at <anonymous>:5:23
It's workaround is make another request just like what I do not want in the first line.
Any suggestions?
In order to avoid increasing network footprint you can consider the following approach:
Take the screenshot of the entire page using i.e. get_screenshot_as_png function
Get required element location and size
Extract "interesting" part of the page by cutting anything else but the required element's coordinates
Save the resulting file
Example code which stores the logo from the https://experitest.com/ site to logo.png file:
from selenium import webdriver
from PIL import Image
from io import BytesIO
options = webdriver.ChromeOptions()
options.add_argument("--kiosk")
driver = webdriver.Chrome(chrome_options=options)
driver.get('chrome://settings/')
driver.execute_script('chrome.settingsPrivate.setDefaultZoom(1.0);')
driver.get("https://experitest.com/")
element = driver.find_element_by_xpath("//a[#class='navbar-brand']/img")
location = element.location
size = element.size
png = driver.get_screenshot_as_png()
im = Image.open(BytesIO(png))
left = location['x']
top = location['y']
right = location['x'] + size['width']
bottom = location['y'] + size['height']
im = im.crop((left, top, right, bottom))
im.save('logo.png')
driver.quit()
Assumptions:
You have Pillow library installed (it should be as easy as pip install pillow command)
Your OS DPI scale level is set to 100%
I have an app in Java which needs to get the camera image from ARCore for custom rendering. Recently, two new APIs have been added to ARCore (v1.1.0) which should support this. Well, everything else works for me except these two calls. Both calls are failing with same error (SIGINIT):
SIGINIT
and I have this message in the Logcat:
04-18 14:52:32.007 32623-32623/ A/Ion: [java/com/google/vr/dynamite/client/native/dynamite_client.cc:74] CHECK failed: expression='"env"'
04-18 14:52:32.007 32623-32623/ A/Ion: Dumping stack:
relevant code is:
try
{
// Obtain the current frame from session.
mSession.setCameraTextureName( mTextureId );
Frame frame = mSession.update();
TrackingState trackingState = frame.getCamera().getTrackingState();
if ( trackingState == TrackingState.TRACKING )
{
// Compute lighting, this is also crashing
//final float[] colorCorrectionRgba = new float[4];
//frame.getLightEstimate().getColorCorrection( colorCorrectionRgba, 0 );
//getPixelIntensity works fine
float lightIntensity = frame.getLightEstimate().getPixelIntensity();
Log.d( TAG, " light intensity is " + lightIntensity );
//This is also crashing
android.media.Image image = frame.acquireCameraImage();
//do something useful with the image
image.close();
app level build.gradle has the following entry under dependencies:
implementation 'com.google.ar:core:1.1.0'
and I have tried this with both proguard enabled and disabled.
Can anyone spot what I am doing wrong?
PS: In case it's not clear, the failing calls are frame.acquireCameraImage() and frame.getLightEstimate().getColorCorrection().
I'm newbie to the Intel Realsense SDK and coding in Visual Studio 2017(C or C++) for Intel Realsense camera D435.
In my example I have the following,
static rs2::frameset current_frameset;
auto color = current_frameset.get_color_frame();
frame = cvQueryFrame(color);
I've got an error on line 3 as "can not convert 'rs2::video_frame' to 'CvCapture'"
I've not being able to find a solution to this issue and it's proving difficult and resulted in more errors.
Does anyone know how I can overcome this problem?
Thanks for the help!
The cvQueryFrame accepts cvCapture instance, and it is used to retrieve the frame from camera. In LibRS, the frame you retrieved back can be used already, you don't have to get back it again. attached the snippet of CV example in LibRS, you can refer to the complete code here
rs2::pipeline pipe;
// Start streaming with default recommended configuration
pipe.start();
using namespace cv;
const auto window_name = "Display Image";
namedWindow(window_name, WINDOW_AUTOSIZE);
while (waitKey(1) < 0 && cvGetWindowHandle(window_name))
{
rs2::frameset data = pipe.wait_for_frames(); // Wait for next set of frames from the camera
rs2::frame depth = color_map(data.get_depth_frame());
// Query frame size (width and height)
const int w = depth.as<rs2::video_frame>().get_width();
const int h = depth.as<rs2::video_frame>().get_height();
// Create OpenCV matrix of size (w,h) from the colorized depth data
Mat image(Size(w, h), CV_8UC3, (void*)depth.get_data(), Mat::AUTO_STEP);
// Update the window with new data
imshow(window_name, image);
}
I am using mapbox v1.6.1
to show up
var mapboxMap = L.mapbox.map(mapName, 'examples.map-20v6611k',{tileLayer:{noWrap:true},zoomControl:false,zoomAnimation:false,fadeAnimation:false,inertia:false}).setView([23.8, -11], 1);
a choropleth map and
var statesLayer = L.geoJson(localData, {
style: getStyle,
onEachFeature: onEachFeature
}).addTo(mapboxMap);
a normal map with markers
var featureLayer = L.mapbox.featureLayer(mapPlotData).addTo(mapboxMap);
These two layers are not showing up when i export the webpage to pdf using phantomJS
Increasing the timeout doesnt work as well.
I appreciate any help on this!
I am attempting to visualize audio coming out of an element on a webpage. The source for that element is a WebRTC stream connecting to an Asterisk call via sip.js. The audio works as intended.
However, when I attempt to get the frequency data using web audio api, it returns an array of all 0's, even though the audio is working. This seems be a problem with createMediaElementSource. If I call getUserMedia and use createMediaStreamSource to connect my microphone to the input, I indeed get the frequency data returned.
This was attempted in both Chrome 40.0 and Firefox 31.4. In my search I found similar errors with Android Chrome but my versions of desktop Chrome and Firefox seem like they should be functioning correctly. So far I have a feeling that the error may be due to the audio player getting it's audio from another AudioContext in sip.js, or something having to do with CORS. All of the demos that I have tried work correctly, but only use createMediaStreamSource to get mic audio, or use createMediaElementSource to play a file (rather than streaming to an element).
My Code:
var context = new (window.AudioContext || window.webkitAudioContext)();
var analyser = context.createAnalyser();
analyser.fftSize = 64;
analyser.minDecibels = -90;
analyser.maxDecibels = -10;
analyser.smoothingTimeConstant = 0.85;
var frequencyData = new Uint8Array(analyser.frequencyBinCount);
var visualisation = $("#visualisation");
var barSpacingPercent = 100 / analyser.frequencyBinCount;
for (var i = 0; i < analyser.frequencyBinCount; i++) {
$("<div/>").css("left", i * barSpacingPercent + "%").appendTo(visualisation);
}
var bars = $("#visualisation > div");
function update() {
window.requestAnimationFrame(update);
analyser.getByteFrequencyData(frequencyData);
bars.each(function (index, bar) {
bar.style.height = frequencyData[index] + 'px';
console.debug(frequencyData[index]);
});
};
$("audio").bind('canplay', function() {
source = context.createMediaElementSource(this);
source.connect(analyser);
update();
});
Any help is greatly appreciated.
Chrome doesn't support WebAudio processing of RTCPeerConnection output streams (remote streams); see this question. Their bug is here.
Edit: they now support this in Chrome 50
See the test code for firefox about to land as part of this bug:
Bug 1081819. This bug will add webaudio input to RTCPeerConnections in Firefox; we've had working WebAudio processing of output MediaStreams for some time. The test code there tests both sides; note it depends a lot on the test framework, so just use it as a guide on hooking to webaudio.