I am trying to test are webpage on mobile and its clicking the play button on a video but not playing the video. It runs fine on desktop browsers. I have tried the following commands testcafe remote test/testCafe/was_test.js -e --autoplay-policy=no-user-gesture-required below is my code that is used to click the play button.
test('see if video plays', async t => {
await t.wait(10000) //this is to wait for the page to load
data = await getdata()
const playButton = await Selector('.plyr__control--overlaid')
await t.click(playButton)
})
Remote browsers do not support specifying arguments in this manner. See:
Start a Browser With Arguments
Browsers on Remote Devices
You might want to toggle your browser's default options, e.g.:
How to control audio and video autoplay in Google Chrome
Related
I want to achieve grid layout in my video call application which I am building with Agora's web SDK.
I was browsing the docs , but I couldn't get an help on how to achieve grid layout in video conferencing.
The best fit and grid layouts are only available in cloud recording APIs.
Any previous reference or github repo where it is implemented would also work.
Thanks for the help!
The Agora Web SDK provides a library for video streaming, it does not enforce a UI. Building the UI is your task. That being said, Agora makes its very easy to add video chat to your application.
In your case you can build a grid layout using CSS grid or any framework of your choosing. To connect Agora to your Grid layout you would use the stream-published event to create a new grid element, and subscribe to the new stream. Once the subscribe() promise resolves, use the video track's .play() method to play the video on a specific DOM element
client.on("user-published", async (user, mediaType) => {
// Initiate the subscription
await client.subscribe(user, mediaType);
// If the subscribed track is an audio track
if (mediaType === "audio") {
const audioTrack = user.audioTrack;
// Play the audio
audioTrack.play();
} else {
const videoTrack = user.videoTrack;
// Play the video the given DOM_ELEMENT
videoTrack.play(DOM_ELEMENT);
}
});
Screen Capture API, specifically getDisplayMedia(), currently supports screensharing and sharing the audio playing in your device (e.g: youtube) at the same time. Docs. Is this currently supported using TokBox/Vonage Video API? Has someone been able to achieve this?
I guess there could be some workaround using getDisplayMedia and passing the audio source when publishing, e.g: OT.initPublisher({ audioSource: newDisplayMediaAudioTrack }), but doesn't seem like a clean solution.
Thanks,
Manik here from the Vonage Client SDK team.
Although this feature does not exist in the Video Client SDK just yet, you can accomplish the sharing of audio with screen by creating a publisher like so:
let publisher;
try {
const stream = await navigator.mediaDevices.getDisplayMedia({video: true, audio: true });
const audioTrack = stream.getAudioTracks()[0];
const videoTrack = stream.getVideoTracks()[0];
publisher = OT.initPublisher({audioSource: audioTrack, videoSource: videoTrack});
} catch (e) {
// handle error
}
If you share a tab, but the tab doesn't play audio (static pdf or ppt) then the screen flickers. To avoid this, specify frameRate constraint for the video stream. see - https://gist.github.com/rktalusani/ca854ca8621c20488bea6e62ad04e341
I have an electron app that will just wrap a remote page while adding some extra features. With the following code the page loads and works. When the remote page fires some notifications using the notification API those notifications show up when the electron app is minimized. My problem is that when clicking on those notifications the app does not get put to front like it does when opening the remote page on any other browser directly. I could test this only for Ubuntu 19.10 Linux (Gnome 3).
Any idea if I need to configure something for that or if this is a bug with Electron/Ubuntu/Gnome?
const {app, shell, BrowserWindow} = require('electron');
let mainWindow;
function createWindow () {
// Create the browser window.
mainWindow = new BrowserWindow({
width: 1024,
height: 786,
});
mainWindow.setMenu(null);
mainWindow.setTitle('My app – Connecting…');
mainWindow.loadURL('https://some.url.somwhere');
// Emitted when the window is closed.
mainWindow.on('closed', () => {
mainWindow = null
})
}
app.on('ready', createWindow);
First of it is NOT a good idea to wrap a remote page unless you really know what you are doing as if you were redirected to a malicious page the page would have access to run code in the operating system. I would suggest giving this a read to make sure you're being safe.
Secondly the notification HTML5 API (runs in renderer) and notification module (runs in main) both do not have default behaviour to bring the page to the front when the notification is clicked you must add this behaviour yourself.
Because your loading a remote page you're probably using the notification module therefore it would be accomplished like follows:
notification = new Notification({title: "Message from: "+result[i].messageFrom,body: messagebody,icon: path.join(__dirname, 'assets','images','icon.png')})
notification.show()
notification.on('click', (event, arg)=>{
mainWindow.moveTop()
mainWindow.focus()
})
Part of the web application I am testing is to click a button, which normally opens a PDF in a new tab. This enables the user to go forward in the application. The PDF can be ignored.
Currently, my strategy is to click the button and then navigate back using ClientFunction. TestCafe successfully opens the PDF when the button is clicked, but it is opened in the same tab and the test is then stuck. Navigating back changes the URL, but the PDF is still displayed.
const goBack = ClientFunction(() => window.history.back())
await this.t.click(this.button)
await this.t.wait(10000)
await goBack()
Is TestCafe currently able to bypass this issue, as I don't need to actually do anything with the PDF?
TestCafe allows testing html pages, but not PDF files. So, you can check the generated link to the PDF file as a string without actually following this link. For example:
const overrideWindowOpen = ClientFunction(() => {
window.open = function (url) {
window.__lastWindowOpenUrl = url;
};
});
const getResultUrl = ClientFunction(() => window.__lastWindowOpenUrl);
await overrideWindowOpen();
await t
.click(this.button)
.expect(getResultUrl()).eql('http://example.com/path/to/PDF/93023813-0984-1');
See also: Multiple Browser Windows
I am trying video js based player in my web page. IT is working perfect in the desktop browsers and the mobile browser not auto playing the video.I tried all the options like:
var options = {};
var player = videojs('video-js', options, function onPlayerReady() {
videojs.log('Your player is ready!');
// In this context, `this` is the player that was created by Video.js.
this.play();
// How about an event listener?
this.on('ended', function() {
videojs.log('Awww...over so soon?!');
});
});
Still it is not auto playing the video.
May i know do you have any solution?
Autoplay on iOS 10 and recent versions of Chrome for Android only works if the video is muted. On older versions of each platform, it doesn't work at all.