Does the device selected in Spark AR Studio simulator affect the generated Instagram test links?
As I see, test links look different on Instagram camera depending on what device is selected in the simulator, but I am not sure as I do some rectangle calculations in script according to device width and height. These calculations work fine in Studio on app restart, but not on Instagram camera on app start.
So I've found a solution.
My mistake was to get screen sizes in script from canvas with .pinLastValue().
But it should be done with Patches module and Device Info to script bridging.
Spark Ar Screenshot
const screenSize = await Patches.outputs.getPoint2D('screenSize');
const screenScale = await Patches.outputs.getScalar('screenScale');
const scale = screenScale.pinLastValue();
const screenX = screenSize.x.pinLastValue();
const screenY = screenSize.y.pinLastValue();
Related
Note: I am asking here a adapted version of this this closed question.
When using Puppeteer, it's easy to produce screenshots. It's even their first example, and it works fine on my web app:
const puppeteer = require('puppeteer');
const iPhone = puppeteer.devices['iPhone 6']; //iPhone 5/SE does not work
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.emulate(iPhone);
await page.goto('https://web.replayer.app', {
waitUntil: 'networkidle2',
});
await page.screenshot({ path: 'replayer-app.png' });
await browser.close();
})();
This produces a nice screenshot, but without device frame.
If I try to use one of the device names, that do produce a visual device frame in Google Chrome, like iPhone5/SE, I get
C:\Users\masu\Documents\node_modules\puppeteer\lib\cjs\puppeteer\common\Page.js:1500
this.setViewport(options.viewport),
^
TypeError: Cannot read properties of undefined (reading 'viewport')
at Page.emulate (C:\Users\masu\Documents\node_modules\puppeteer\lib\cjs\puppeteer\common\Page.js:1500:38)
at C:\Users\masu\Documents\puppeteer-question.js:7:14
at processTicksAndRejections (node:internal/process/task_queues:96:5)
However, since it's a web app, I would like to have the screen shot a device frame around it.
How to use and capture a screenshot from an emulated device with a viewport?
What is the cause of the issue?
I. You get this error because you are emulating the desired device with the wrong name. Even if DevTools UI names it "iPhone 5/SE" in reality DevTools Protocol only knows either "iPhone 5" or "iPhone SE" (you can give a try to give any false strings here, like "iPhone 2000", you will end up with the very same error msg). The available and valid device names are listed in DeviceDescriptors.ts on Github.
II. Since the referenced question was asked the situation is still the same: you cannot do a screenshot of the page with the device frames in puppeteer. Simply because those frames are part of the DevTools UI while Puppeteer is a high-level API to control Chrome over the DevTools Protocol: one is related to its frontend the other to its backend functionalities.
How you can proceed?
Implement the functionality in Node yourself. As I mentioned in the other post: it is easy to achieve it with node-images npm package if you have the device frames as transparent png file. E.g.: images('iPhone_5_portrait.png').draw(images('wikipedia.png').size(320), 130, 220).save('output.jpg').
Raise a feature request on Puppeteer's GitHub however it is not likely they plan to go this way (see point II. above).
I am using janus to build my webrtc SFU server. I need the chrome browser to send the video resolution from a start to a fixed value and remain unchanged during the transfer. Where should I set it?
I tried setting the degradationPreference in the js code, but it didn't work, the resolution will still change, it seems that chrome does not support this parameter.
var senderList = config.pc.getSenders();
var sender = config.pc.getSenders().find(function(s) {return s.track.kind == "video"});
if(sender) {
var parameters = sender.getParameters();
parameters.degradationPreference = "maintain-resolution";
sender.setParameters(parameters);
}
Image1 with varying resolution
Image2 with varying resolution
I looked at frameHeightSend/frameWidthSend in chrome://webrtc-internals, hoping it will keep the same value from the start, but now it grows slowly at startup and will fluctuate during subsequent transfers.
I found a message that sets the constant resolution in IOS, which is set when the screen is shared, and whether there are similar settings in chrome.
We want to zoom-in to a 2D sheet in forge-viewer to take screenshot and stitch multiple screenshot later to get better image quality.
We are facing issue to zoom-in to exact bounding box, it always is little less zoomed-in i.e. we can see portion of sheet which shouldn't be part of screenshot.
Take a case of dividing a 2D sheet in equal 4 quadrants to zoom-in and take screenshot (we can increase quadrants/sections as per the required image quality later), we use below code to zoom-in,
var max = viewer.model.getBoundingBox().max;
var min = viewer.model.getBoundingBox().min;
var Q1Min = new THREE.Vector3( min.x, min.y, 0 )
var Q1Max = new THREE.Vector3( (min.x)+(max.x)/2, (min.y)+(max.y)/2, 0 )
var Q1Box = new THREE.Box3(Q1Min, Q1Max);
viewer.navigation.fitBounds( immediate, Q1Box);
We also tried using below method, it also produces same result
viewer.impl.setViewFromViewBox(viewer.model, [Q1Min.x,Q1Min.y,Q1Max.x,Q1Max.y],'Q1',true)
Full sheet view as seen in browser.
Result after above code execution.
Required result, notice the difference in width of image. In some case height and width both become an issue.
Engineering came back and offered the same workaround - and see a live sample I just put together to zoom in programmatically here:
var direction = new THREE.Vector3();
camera.getWorldDirection( direction );
camera.position.add( direction.multiplyScalar(distance) ); //set distance move the camera forward to your needs
viewer.navigation.setView(camera.position,viewer.navigation.getTarget())
Also see here and here for code samples putting the above into practice.
They conceded that this could be a bug but didn't provide more details - will chase them up but guess they got other priorities for the moment like to maintain the newly released Viewer v7.
I've got two questions about how to access the camera on Windows Phone 8:
How can I access the front-facing camera to take pictures?
How can I access the flash/torch of main camera?
This article from MSDN has an example of both accessing the front and back cameras, as well as accessing the flash, assuming your using C# (since you didn't specify). Here's a snippet under the Creating the Capture Device heading:
System.Collections.Generic.IReadOnlyList<Windows.Foundation.Size> SupportedResolutions =
PhotoCaptureDevice.GetAvailableCaptureResolutions(CameraSensorLocation.Front);
Windows.Foundation.Size res = SupportedResolutions[0];
this.captureDevice = await PhotoCaptureDevice.OpenAsync(CameraSensorLocation.Front, res);
For accessing the flash of the camera, here is a snippet under the Specifying Camera Properties heading:
cam.SetProperty(KnownCameraPhotoProperties.FlashMode, FlashState.On);
cam.SetProperty(KnownCameraGeneralProperties.PlayShutterSoundOnCapture, true);
cam.SetProperty(KnownCameraGeneralProperties.AutoFocusRange, AutoFocusRange.Infinity);
Hope this helps!
I am building an app in AS3/Air and I would like to target both iPhone and iPad resolutions. I understand the different aspect ratios between iPhone and iPad however the app I am building currently has different layout and slightly different content to fit the different screen sizes. I currently have 2 versions of the app already built, one for iPhone the other for iPad. All assets have been created with the target platform in mind but now, I would like to combine the 2 apps into a single one.
I am thinking I will rename each each screen file to iphone_login, ipad_menu, ipad_settings etc and include them all in the same build. Then during startup, check what device the user is on and set iphone_ or ipad_ and also set the resolution at this time too.
I prefer not to have black edges going from iphone resolution to ipad so my questions are:
Is my approach a suitable one considering the outcome I would like?
How do I determine what device a user is on to show the correct files, assets and resolution?
I understand the app size will increase at least double by adding 2 sets of assets and 2 sets of code files but considering the differences in design layout and content I don't see another solution, apart from keeping 2 apps.
Thanks :)
What's the problem? iPad and iPhone have different resolution and dpi combination, check them and identify current platform.
Get view you need by class like this:
public static const PAGE1:String = "page1";
public static const PAGE2:String = "page2";
private static var PHONE_VIEW_NAME_2_CLASS:Dictionary = new Dictionary();
private static var TABLET_VIEW_NAME_2_CLASS:Dictionary = new Dictionary();
public class ViewProvider
{
{
PHONE_VIEW_NAME_2_CLASS[ViewProvider.PAGE1] = Page1PhoneView;
PHONE_VIEW_NAME_2_CLASS[ViewProvider.PAGE2] = Page2PhoneView;
TABLET_VIEW_NAME_2_CLASS[ViewProvider.PAGE1] = Page1TabletView;
TABLET_VIEW_NAME_2_CLASS[ViewProvider.PAGE2] = Page2TabletView;
}
public function ViewProvider()
{
}
public static function isTablet():Boolean {
...analyze Capabilities.screenResolutionY, Capabilities.screenResolutionX and Capabilities.screenDPI
}
public static function getViewClass(name:String):Class
{
return isTablet() ? TABLET_VIEW_NAME_2_CLASS[name] : PHONE_VIEW_NAME_2_CLASS[name];
}
}
And in your program
navigator.pushView(ViewProvider.getViewClass(ViewProvider.PAGE1))
All coordinated, paddings and another position numbers, font sizes etc correct with multiplier depending on runtime dpi by simular way...
I'm in the middle of a similar problem.
My solution is to have the images at the best resolution in a file pool, and then downscale them depending on the device when the app starts. You can do this also with non animated vector assets and put them into a bitmapData object.
Another option is to always have the asset pool with files at the maximum resolution needed loaded in the memory, and downscale them at runtime when they are needed. This works well if you will be using some asset in different places at different sizes, for example an icon.
As for the code, you should find a way to separate the code that manages data, the codes that manages the logic, and the code that "paints" the UI. This way you will be able to reuse most of the code in both versions, but only change the code that "paints" the UI. Check the MVC pattern for more info.