So, here's is my doubt.
I'm using the MediaRecorder API, to make a recording of my browser's screen. I can capture the whole browser screen + audio(tab) + my microphone. Everything is working fine. But I only need to capture the screen+audio from the tab that started the recording. On that popup thats opens on google chrome, when I want to screenshare some tab or application, is it possible to show only the tab that started the screenshare? So I don't have to seek everytime the tab that I want to share.
I didn't find any information about that.
When working with the google chrome API, I see that we can capture only a tab, but outside this API, is it possible to accomplish something similar? Or is only possible to work with pre-selected tab if I develop a google chrome extension?
chrome.tabCapture.capture({audio: true, video: true}, callback);
Unfortunately you can't specify it or limit it to the current tab.
Note: Constraints never cause changes to the list of sources available
for capture by the Screen Sharing API. This ensures that web
applications can’t force the user to share specific content by
restricting the source list until only one item is left
https://developer.mozilla.org/en-US/docs/Web/API/Screen_Capture_API/Using_Screen_Capture
Related
I'm writing an Angular web app for VoIP communication that includes screen sharing using Azure Communication Services.
When screen sharing is initiated in Microsoft Edge, the pop-up for selecting screen/window/tab includes the current tab with the call itself. Google Chrome on the other hand does not offer current tab in the pop-up menu (it offers other opened tabs). I can only screen share the whole chrome window.
I've read that Google Chrome can record or share stream from browser using getDisplayMedia() and selfBrowserSurface can be set to the value 'include' to include the current tab in the pop up menu.
Problem is, that I don't know how to use this method in combination with Azure Communication Services and it is not recommended to use in combination with ACS. ACS Best Practices Documentation clearly states
Your application shouldn't use native browser APIs like getUserMedia or getDisplayMedia to acquire streams outside of the SDK.
Is there any way to force Google Chrome to allow screen sharing current tab?
Or even better solution: Is there any way to programmatically select current tab without displaying Pop-Up Window at all? (I can see the security concern in this case)
Chrome is rolling out the change to hide the current tab (unless selfBrowserSurface is set to 'include') along with the reordering of tabs. See https://bugs.chromium.org/p/chromium/issues/detail?id=1407021#c7 for details.
For 1.10.0-beta.1 version of the sdk, a local run of calling sample app
https://github.com/Azure-Samples/communication-services-web-calling-tutorial
shows the existing tab as an option:
sample screenshot
on this version of chrome:
screenshot
I am trying to migrate my extension which records screen/tab/window according to the chosen option from manifest V2 to V3. In manifest V2 I was able to use background script as persistent and reach html page objects such as mediaRecorder, navigator. However in manifest V3 background script works as a service worker. So, I have to start the screen record in content-scripts to be able to reach the html objects. When I start chrome.desktopCapture API from the background script, I have to start the screenRecord in one of the tabs (should give a tabid to chrome.desktopCapture.chooseDesktopMedia API call). I cannot start it on the background page and when the page was refreshed or changed to a new URL screen record stops. Is there any workaround for this?
I believe the best way to handle updates such as a URL change on a tab is to attach the onUpdated listener to the chrome tabs in the background script.
chrome.tabs.onUpdated.addListener(function(tabId, changes, tab) {
//Detect Type of Change and Handle Accordingly
});
There are quite a few other events that may be of use that are listed in the chrome documentation Chrome Tabs Events. It's also possible to inject inline JavaScript from the content script so you can access the pages window object directly and attach event listeners there to handle reloads or URL changes. Check this stack overflow post for more information Modify Window Object in Chrome Extension
So using the Google Chrome Top Sites api has values for the url and the title, but when you load the default google chrome page it also has an image of those sites, is there any way to get that sort of image for an extension? If not how does google get that image and how can you get an image of the the user's top viewed website?
Since that it isn't possible to get a screenshot of a page without loading it inside a tab, Chrome is simply getting those screenshots while you're browsing your favourite sites. You can tell this easily because sometimes sites and images do not coincide (e.g. sometimes my facebook.com top site has the image of my profile page, but links to the home).
Then, if you want your screenshots of the Top Sites, you'll have to start without screenshots, and create them while the user browses the web by using the chrome.tabs API to check when a tab loads one of the Top Sites (listening to the event onUpdated), and get a screenshot of that tab using captureVisibleTab.
NOTES: make sure that you've requested the permission for "<all_urls>" in your manifest, which is required for captureVisibleTab to work. Additionally, you may find this question and its answer helpful.
It's unfortunately not possible*. Chrome stores those thumbnails internally in URIs not accessible from an extension.
There is an existing feature request: https://code.google.com/p/chromium/issues/detail?id=11854
If you look at the comments, one of the main use cases is to access site thumbnails to replicate the New Tab page.
Do star the feature request above to raise its priority if you want this functionality implemented.
* By that I mean that it's not possilbe to access Chrome's own internal store of thumbnails.
Furthermore, as Marco suggested the way to replicate that would be tab capture, but you can't do it "in the background" for privacy reasons - a user must make an explicit gesture (e.g. click the extension's button, press a shortcut, etc.) to perform capture.
Marco's answer is valid now, captureVisibleTab should be accessible upon events. But yes, as of now Chrome forces you to have very broad permissions and maintaining your own thumbnail store.
Is there any way to completely duplicate the state of a current tab in Google Chrome? I want an exact copy of the current state of the page without having to reload the page in another tab.
An example use case:
While browsing a "slideshow" on a news website, I want to preserve the current slide that I'm on, but create a duplicate so that I can continue viewing the next slide. If I simply Right-Click and "Duplicate" the tab, the new page will completely Reload, reprocessing all of the Javascript and running the pre-slideshow advertisement again.
In short "NO" you can't.
I am not expert on this
but a similar behavior can be achieved in some ways i know :
Dump the whole DOM
Never tried this though. You can convert the DOM to a string, pass it to the new window and then parse it as a document. This will let you lose your DOM events and State manipulation javascript. (But that's good for your case)
var dtab = window.open('about:blank', 'duplicate_a_tab');
dtab.document.open();
dtab.document.write("... yout html string ..");
dtab.document.close();
Develop an extension
Let the users continue on the current tab with the current state, your extension should be able to capture the screenshot of that area and open that screenshot in new tab. There are plenty of screenshot taking extensions are available in the market.
If that website is your own
You can develop your services that uses state locally like progressive web apps. Give a link separately to 'duplicate' which will eventually open the same URL in different tab with the same local state and with the flag do-not-sync.
This will not work when the user uses browser inbuilt duplicate
feature.
I'm looking to build a chrome extension that allows the user to have an independent subwindow that is the same in each tab (for example you are taking notes and the notes are synchronized among each tab). Also, clicking a link should not destroy this subwindow.
One solution is to inject an iframe in each tab, and try to synchronize this data serverside and send back to each client tab, as it is updated.
This seems very tedious, plus the iframe would be provided by a third party, and I want to make it the easiest for them.
Is there a way I can have a shared dom piece and display it in its current state across several tabs?
There's an API (still experimental as of Chrome 17) that does more or less exactly what you want. If you visit about:flags, and enable "Panels" (they're enabled by default in Dev and on Canary (and on ChromeOS)), you'll be able to use chrome.windows.create with a type of panel to create a floating pane that exists independently from the browser window. That would likely meet your need.
Take a look at the Google Talk extension for an example of how it might work.