getScreenId | Capture Screen on Any Domain!
- Live Demo: https://www.webrtc-experiment.com/getScreenId/
- YouTube video: https://www.youtube.com/watch?v=UHrsfe9RYAQ
getScreenStream(function(screenStream) {
video.srcObject = screenStream;
});
function getScreenStream(callback) {
if (navigator.getDisplayMedia) {
navigator.getDisplayMedia({
video: true
}).then(screenStream => {
callback(screenStream);
});
} else if (navigator.mediaDevices.getDisplayMedia) {
navigator.mediaDevices.getDisplayMedia({
video: true
}).then(screenStream => {
callback(screenStream);
});
} else {
getScreenId(function(error, sourceId, screen_constraints) {
navigator.mediaDevices.getUserMedia(screen_constraints).then(function(screenStream) {
callback(screenStream);
});
});
}
}
- Install this: https://chrome.google.com/webstore/detail/screen-capturing/ajhifddimkapgcifgcodmmfdlknahffk
- Now use below codes on any HTTPs domain.
- Remember, HTTPs is required.
- getScreenId gives you "MediaStream" object; you can share that object with other users using AppRTC demo, SimpleWebRTC or EasyRTC or PeerJs libraries, or any standalone peer-to-peer demo.
- In simple words, you have to use RTCPeerConnection API along with getScreenId to share screen with other users.
npm instll webrtc-screen-capturingHacking to use single chrome-extension on any domain!
<!--
* This script is a hack used to support single chrome extension usage on any domain.
* This script has issues, though.
* It uses "postMessage" mechanism which fails to work if someone is using it from inside an <iframe>.
* The only solution for such cases is, use WebSockets or external servers to pass "source-ids".
-->You don't need to PUBLISH/deploy your own chrome-extension when using this script!
LocalHost server
node server.jsNope open: https://localhost:9001/
How to use?
<script src="https://cdn.WebRTC-Experiment.com/getScreenId.js"></script>
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
<video controls autoplay playsinline></video>getScreenId
This method allows you get chrome-media-source-id; which can be used to capture screens.
getScreenId(function (error, sourceId, screen_constraints) {
// error == null || 'permission-denied' || 'not-installed' || 'installed-disabled' || 'not-chrome'
// sourceId == null || 'string' || 'firefox'
if(navigator.userAgent.indexOf('Edge') !== -1 && (!!navigator.msSaveOrOpenBlob || !!navigator.msSaveBlob)) {
navigator.getDisplayMedia(screen_constraints).then(stream => {
document.querySelector('video').srcObject = stream;
}, error => {
alert('Please make sure to use Edge 17 or higher.');
});
return;
}
if(error == 'not-installed') {
alert('Please install Chrome extension.');
return;
}
navigator.mediaDevices.getUserMedia(screen_constraints).then(function (stream) {
document.querySelector('video').srcObject = stream;
// share this "MediaStream" object using RTCPeerConnection API
}).catch(function (error) {
console.error('getScreenId error', error);
alert('Failed to capture your screen. Please check Chrome console logs for further information.');
});
});Or...
getScreenId(function (error, sourceId, screen_constraints) {
// error == null || 'permission-denied' || 'not-installed' || 'installed-disabled' || 'not-chrome'
// sourceId == null || 'string' || 'firefox'
if(sourceId && sourceId != 'firefox') {
screen_constraints = {
video: {
mandatory: {
chromeMediaSource: 'screen',
maxWidth: 1920,
maxHeight: 1080,
minAspectRatio: 1.77
}
}
};
if (error === 'permission-denied') return alert('Permission is denied.');
if (error === 'not-chrome') return alert('Please use chrome.');
if (!error && sourceId) {
screen_constraints.video.mandatory.chromeMediaSource = 'desktop';
screen_constraints.video.mandatory.chromeMediaSourceId = sourceId;
}
}
navigator.getUserMedia = navigator.mozGetUserMedia || navigator.webkitGetUserMedia;
navigator.getUserMedia(screen_constraints, function (stream) {
document.querySelector('video').src = URL.createObjectURL(stream);
// share this "MediaStream" object using RTCPeerConnection API
}, function (error) {
console.error('getScreenId error', error);
alert('Failed to capture your screen. Please check Chrome console logs for further information.');
});
});getChromeExtensionStatus
This method allows you detect whether chrome extension is installed or not:
getChromeExtensionStatus(function(status) {
if (status === 'installed-enabled') alert('installed');
if (status === 'installed-disabled') alert('installed but disabled');
// etc.
});How it works?
- Your script will make a
postMessagerequest togetScreenId.js getScreenId.jswill connect with chrome-extension using an internal<iframe>.- That
<iframe>is loaded from domain:https://www.webrtc-experiment.com/ - That
<iframe>can connect with chrome-extension. It can send/receivepostMessagedata. - Same
postMessageAPI are used to passscreen-idback to your script.
Custom Parameter
Pass second argument to getScrenId method:
truemeans that capture system audio i.e. speakers[]array means that capture custom array items
getScreenId(successCallback, true); // capture speakers
getScreenId(successCallback, ['tab']); // capature only tab
getScreenId(successCallback, ['window']); // capature only app's windows
getScreenId(successCallback, ['screen', 'audio']); // capature only screen with speakersFirefox
Deploy extension yourself?
Alternative?
Disclaimer
There is no warranty, expressed or implied, associated with this product. Use at your own risk.
License
getScreenId.js is released under MIT licence . Copyright (c) Muaz Khan.