I have created a screen recorder application using getDisplayMedia() API but the output video quality is not good, is there any way to configure the output video quality to get HD resolution video?
I got a similar kind of question -> https://groups.google.com/g/discuss-webrtc/c/-KC3xg4MEp4 but solution is not available
var constraints = {
audio: false,
video: {
width: { ideal: 720, max: 1920 },
height: { ideal: 1024, max: 1080 }
}
}
video_stream = await navigator.mediaDevices.getDisplayMedia(constraints);
I got the answer, in order to set the good resolution just update the constraint and the output video quality will be better.
var constraints = {
audio: false,
video: {
width: { ideal: 1920, max: 1920 },
height: { ideal: 1080, max: 1080 }
}
}
Related
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'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!
I want an object, need it to fellow a complex path and move as an animation.
The path is included line and curve. just like a train.
Two solution: 1. PathAnimation or 2. states with multi-animation
Problem of solution 1:
The train maybe stop at a random time-point(pause the animation), and go reverse back to the start position(play animation reversely).
So i want know any way to play PathAnimation reversely?
I think QML doesn't have that functionality.
You could set a new path whenever you need a new one. I.e, when you animation ends.
Here you have an example:
import QtQuick 2.3
import QtQuick.Controls 1.1
ApplicationWindow {
visible: true
width: 350
height: 300
Rectangle {
id: window
width: 350
height: 300
Canvas {
id: canvas
anchors.fill: parent
antialiasing: true
onPaint: {
var context = canvas.getContext("2d")
context.clearRect(0, 0, width, height)
context.strokeStyle = "black"
context.path = pathAnim.path
context.stroke()
}
}
SequentialAnimation {
id: mySeqAnim
running: true
PauseAnimation { duration: 1000 }
PathAnimation {
id: pathAnim
duration: 2000
easing.type: Easing.InQuad
target: box
orientation: PathAnimation.RightFirst
anchorPoint: Qt.point(box.width/2, box.height/2)
path: myPath1
}
onStopped: {
console.log("test")
pathAnim.path = myPath2;
mySeqAnim.start();
}
}
Path {
id: myPath1
startX: 50; startY: 100
PathLine { x: 300; y: 100 }
onChanged: canvas.requestPaint()
}
Path {
id: myPath2
startX: 300; startY: 100
PathLine { x: 50; y: 100 }
onChanged: canvas.requestPaint()
}
Rectangle {
id: box
x: 25; y: 75
width: 50; height: 50
border.width: 1
antialiasing: true
Text {
anchors.centerIn: parent
}
}
}
}
In order to have PhantomJS create screenshots of a page at different viewport widths, I'd like to adjust it dynamically. This does not work, though:
var system = require('system');
var page = require('webpage').create();
page.viewportSize = { width: 800, height: 600 };
page.open('http://example.com', function (status) {
page.render('medium.png');
page.viewportSize = { width: 630, height: 420 };
page.render('small.png');
phantom.exit();
});
When run with phantomjs script.js this produces two identical PNG files medium.png and small.png at a width of 800px each. Expected behaviour was to have medium.png like this and small.png at a width of 630px. How can this be achieved?
PS: This answer to a similar question produces an error for me. Also the accepted answer to that question suggests quite an ugly workaround I would like to avoid.
I think it should be possible to set the viewport size and open the page again like this:
var system = require('system');
var page = require('webpage').create();
page.viewportSize = { width: 800, height: 600 };
page.open('http://example.com', function (status) {
page.render('medium.png');
page.viewportSize = { width: 630, height: 420 };
page.open('http://example.com', function (status) {
page.render('small.png');
phantom.exit();
});
});
If QML rendering is hardware accelerated, shouldn't this simple example outperform the equivalent implementation in Qt classic?
import QtQuick 2.3
import QtQuick.Controls 1.2
ApplicationWindow {
id: app
visible: true
width: 640
height: 480
Column {
id: cc
property real val: 0
Row {
spacing: 10
TextField {
id: numRows
text: "1"
property int value: parseInt(text);
validator: IntValidator { bottom: 1; top: 100; }
}
TextField {
id: numCols
text: "1"
property int value: parseInt(text);
validator: IntValidator { bottom: 1; top: 100; }
}
}
Repeater {
model: numRows.value
Row {
Repeater {
model: numCols.value
Slider {
width: app.width / numCols.value
height: 18.5
value: cc.val
onValueChanged: cc.val = value
}
}
}
}
}
}
I idea is to fill the screen with rows and columns of sliders, and have each slider connect to every other slider. For my screen I use 55 rows and 20 columns. As I move a slider, I expect to see a fluid motion of all the sliders on the screen, yet the frame rate is very low (I would guess 5 to 10 fps). I have a very beefy GPU, and I was expecting much better performance. What could be wrong?
Looking at this under a (CPU, not QML) profiler, the majority of the time spent is actually in rendering the Slider items using native styling. If performance is an important issue, and native desktop styling is not, I would suggest not using QtQuickControls 1, as the styling has a significant amount of overhead.
If I update your example to use QtQuickControls 2, it is significantly smoother:
import QtQuick 2.3
import QtQuick.Controls 2.0
ApplicationWindow {
id: app
visible: true
width: 640
height: 480
Column {
id: cc
property real val: 0
Row {
spacing: 10
TextField {
id: numRows
text: "1"
property int value: parseInt(text);
validator: IntValidator { bottom: 1; top: 100; }
}
TextField {
id: numCols
text: "1"
property int value: parseInt(text);
validator: IntValidator { bottom: 1; top: 100; }
}
}
Repeater {
model: numRows.value
Row {
Repeater {
model: numCols.value
Slider {
width: app.width / numCols.value
height: 18.5
value: cc.val
onPositionChanged: cc.val = position
}
}
}
}
}
}
If you get yourself 1100 sliders, you are asking to continuously update 1100 sliders. That is a lot of signals being sent. I will not ask you what you need 1100 synchronized sliders for ...
Although you can inch out a few cycles by only updating cc.val when the slider is pressed, this will not change very much.
All in all, you can only seriously reduce the work being done by choosing a stepSize or setting updateValueWhileDragging: false. You will still see a delay when you release a slider, but the frame rate will not disturb the experience as much.