Using following to set getUserMedia constraints to initiate screen capture.
const sources = await window.api.desktopCapturer.getSources({
types: ["screen"],
})
constraints = {
audio: false,
video: {
mandatory: {
chromeMediaSource: "desktop",
chromeMediaSourceId: sources[0].id,
},
},
}
For camera source, I set frameRate: { max: 5 } to limit frame rate.
When I add frameRate: { max: 5 } to above video property, following error is thrown.
Cannot use both optional/mandatory and specific or advanced constraints.
Is it possible to limit frame rate for desktopCapturer sources?
Solved… maxFrameRate: 5 is what I was looking for.
Related
How can I record a video and it will be attached to allure like trace or screenshot?
use: {
actionTimeout: 0,
trace: 'on',
screenshot: 'on',
viewport: {width:1920, height: 1080},
video: 'on',
},
that's what I have in playwright.config.ts and video is only one what is NOT working.
According to the documentation, you have to specify the dir property of recordVideo context option. Otherwise videos are not recorded. Thus, your configuration file should look like this:
use = {
actionTimeout: 0,
trace: 'on',
screenshot: 'on',
viewport: { width: 1920, height: 1080 },
video: 'on',
contextOptions: {
recordVideo: {
dir: './output' // Or wherever you want the videos to be saved.
}
}
}
Also, you can specify the record video directory on page level.
Don't forget to call browserContext.close() at the end of your tests, for the videos to be successfully saved. Personally, I do it in test.afterAll() hook.
EDIT: There is an open issue regarding some config options not working as expected, including the video one. On the first comment, one of the developers states that "Video does not work in this case, that's a known issue.". Maybe you can skip the video option completely - I guess it will still work.
EDIT2: To attach the video recording to Allure reporter, include the following code in test.afterAll() hook:
test.afterAll(async ({ }, testInfo) => {
await context.close() // Required for successful save of video recording.
const path = await page.video().path()
await testInfo.attach('video', {
path,
contentType: 'video/webm',
})
})
for playwright with allure report
After(async function (this: ICustomWorld, { result, pickle }: ITestCaseHookParameter) {
...
await this.page?.close();
await this.context?.close();
...
const buffer = fs.readFileSync(videoPath);
await this.attach(buffer, 'video/webm');
});
video will be attached, it is shown as a link attachment, when click on it - open in the next tab video with scenario run
Highchart, How to resize auto if there is a lot of data, then scale accordingly to make all the data visible.
Link demo
The problem is that Football-Player there is so much information that the charts can't show them all. I want to show all data no size and height restrictions. just show all the data.
You can adapt your chart's height to the number of points. Below you can find a simple implementation of such feature:
let spacePerPoint;
let allowChartRedraw = true;
Highcharts.chart('container', {
chart: {
type: 'bar',
width: 600,
height: 600,
events: {
load() {
spacePerPoint = this.plotSizeX / this.series[0].points.length;
if (this.renderer.forExport) {
Highcharts.drawTable(this);
}
},
redraw() {
if (allowChartRedraw) {
allowChartRedraw = false;
this.setSize(
null,
this.chartHeight - this.plotSizeX + this.series[0].points.length * spacePerPoint
);
allowChartRedraw = true;
}
}
}
},
...
});
Live demo: https://jsfiddle.net/BlackLabel/cy7gd0ab/
API Reference: https://api.highcharts.com/class-reference/Highcharts.Chart#setSize
I have two charts here where I was using static data for the candles. Let's consider the second Y-axis, where the max value for the few given candles is 215.
In the code I provided, the max value for this y Axes are set as:
yAxis: [{
...
}, {
max: 215*4
}],
From where we can see that I am hardcoding the value for the max as 215*4. What I need to do is, to be able to dynamically get the current value and to multiply it by 4.
I tried it like:
yAxis: [{
...
}, {
max: this.getExtremes().dataMax * 4
}],
But seems is not working and seems that this.getExtremes() can be used in the events only. So is there any way how can I accomplish to set up max value depending on the current displayed max value?
I also tried the following (but it still does not work).
render: function() {
let yAxisExtremesVolumeMax = this.yAxis[1].getExtremes().dataMax;
this.yAxis[1].update({
max: yAxisExtremesVolumeMax * 4
});
},
Anyway, I am not sure that I want to check it this way, since the render event can be called too many times, so I prefer other alternatives.
Try to use this solution with the load instead the render. Doing update in the render callback creates the infinity loop. Code:
chart: {
events: {
load() {
let chart = this,
max = chart.series[1].dataMax;
chart.yAxis[1].update({
max: max * 4
})
}
}
},
Demo: https://jsfiddle.net/BlackLabel/c6qjnf5z/
Try to use this solution...
load: function () {
let { min, max } = this.yAxis[1].getExtremes();
max = max * 4;
this.yAxis[1].setExtremes(min, max);
}
With slick.js, I am able to pause a playing YouTube video after advancing to the next slide.
However, I can't figure out how to pause the slider's autoplay function (slickPause) on the slider itself while the video is playing.
Then, resume autoplay on the slider only after the video has finished or when the user advances to a different slide.
Please help!
(function($) {
jQuery(document).ready(function($) {
$(".hero-slider").on("beforeChange", function(event, slick) {
var currentSlide, slideType, player, command;
currentSlide = $(slick.$slider).find(".slick-current");
slideType = currentSlide.attr("class").split(" ")[1];
player = currentSlide.find("iframe").get(0);
if (slideType == "vimeo") {
command = {
"method": "pause",
"value": "true"
};
} else {
command = {
"event": "command",
"func": "pauseVideo",
"args": ""
};
}
if (player != undefined) {
player.contentWindow.postMessage(JSON.stringify(command), "*");
}
});
$(".hero-slider").slick({
infinite: true,
arrows: true,
dots: false,
fade: true,
cssEase: 'linear',
autoplay: true,
autoplaySpeed: 5000,
focusOnSelect: true
});
});
})(jQuery);
You may refer with this sample code. You can use slickPause like this:
$('.hero-slider').click(function() {
$('.hero-slider').slick('slickPause');
});
Also, here are some references which might help:
Slick-carousel - How To Pause and Play embedded Youtube videos on slide Change?
Slick-carousel how to stop autoplay when video is on via youtube api
I use youtube iframe api for embedding some videos. I observe that at the end of the video, api displays some thumbnails/videos (as recommendations) for next watch.
How can I disable that? I want it to be blank or can I customize? I do something like this:
function onYouTubeIframeAPIReady() {
player = new YT.Player('player1', {
height: YTPlayerHeight,
width: YTPlayerWidth,
playerVars: { 'autoplay': 1, 'showinfo' : 0, controls: 0 },
videoId: firstVideoId,
events: {
'onReady': onReady,
'onStateChange': onPlayerStateChange
}
});
}
Pleas help
Setting rel: 0 as one of the playerVars will disable the end screen. All of the supported parameters are listed in the documentation.
Just setting parameter - related: false