The chrome.desktopCapture API is used to capture the screen, window or individual tabs and can be used to make a creating a screen recorder.
We’d encourage reading the official chrome documentation here: https://developer.chrome.com/docs/extensions/reference/api/desktopCapture and how navigator.mediaDevices.getUserMedia function works.
How to declare it in Manifest.json
{
...
"permissions":[
"desktopCapture"
]
...
}
How to use the API?
The are to major functions in this API chrome.desktopCapture.chooseDesktopMedia and chrome.desktopCapture.cancelChooseDesktopMedia showing the popup to choose the media and then streamId and hiding the desktop media picker respectively.
const targetTab = null;
const sources = ["screen", "window", "tab", "audio"];
const desktopMediaRequestId = chrome.desktopCapture.chooseDesktopMedia(sources, targetTab, (streamId, options) => {
// streamId is empty when no option is selected
if (streamId){
}
});
// desktopMediaRequestId comes from the return of chrome.desktopCapture.chooseDesktopMedia
chrome.desktopCapture.cancelChooseDesktopMedia(desktopMediaRequestId);
Sample Project
A chrome extensions that uses the chrome.desktopCapture API to capture the screen, window or individual tabs and display a video of the capture on the extension page. In addition when a user clicks the extension icon it opens up a full screen page of the HTML. This is to avoid the popup extension from closing when a users clicks away
Source code for the project can be found here: https://github.com/BuildChromeExtensions/screenrecorder
We will need 3 files from this project manifest.json, index.html and scripts.js
manifest.json
{
"name": "Screen Recorder",
"version": "1.0.0.0",
"manifest_version": 3,
"permissions": [
"desktopCapture",
"tabs"
],
"action": {
"default_title": "Open in Full Screen"
},
"background": {
"service_worker": "background.js"
}
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Screen Recorder</title>
<style>
body {
background: #f9a640;
justify-content: center;
display: flex;
flex-direction: column;
padding: 10px 20px;
color: white;
}
button {
background: #764d00;
color: #ffffff;
padding: 10px 20px;
border: none;
cursor: pointer;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
transition: all 0.4s;
border-radius: 30px;
font-weight: 700;
margin: 4px;
}
</style>
</head>
<body>
<h1>Screen Recorder</h1>
<button id="start">Start Recording</button>
<button id="stop">Stop Recording</button>
<video width="800" height="600"></video>
<script type="text/javascript" src="./scripts.js"></script>
</body>
</html>
scripts.js
// Documentation - https://developer.chrome.com/docs/extensions/reference/api/desktopCapture
let desktopMediaRequestId = null;
document.getElementById("start").onclick = (e) => {
const sources = ["screen", "window", "tab", "audio"];
const targetTab = null;
desktopMediaRequestId = chrome.desktopCapture.chooseDesktopMedia(sources, targetTab, (streamId, options) => {
if (streamId) {
const useAudio = options.canRequestAudioTrack
const audioSettings = {
// whether these settings are coming from
// https://developer.chrome.com/docs/extensions/how-to/web-platform/screen-capture#audio-and-video-offscreen-doc
mandatory: {
chromeMediaSource: "desktop",
chromeMediaSourceId: streamId,
},
}
const audio = useAudio ? audioSettings : false
const constraints = {
audio: audio,
video: {
// whether these settings are coming from
// https://developer.chrome.com/docs/extensions/how-to/web-platform/screen-capture#audio-and-video-offscreen-doc
mandatory: {
chromeMediaSource: 'desktop',
chromeMediaSourceId: streamId,
}
}
}
// Get stream based off of constraints
navigator.mediaDevices.getUserMedia(constraints).then(screenCaptureStream => {
// add stream to video element
const video = document.querySelector("video");
video.srcObject = screenCaptureStream;
video.onloadedmetadata = () => video.play();
console.log(screenCaptureStream);
})
}
});
}
// cancel the desktop capture request and stop the video recording
document.getElementById("stop").onclick = (e) => {
if (desktopMediaRequestId) {
chrome.desktopCapture.cancelChooseDesktopMedia(desktopMediaRequestId);
desktopMediaRequestId = null;
const video = document.querySelector("video");
video.pause()
}
}
Note: the
chrome.desktopCaptureAPI can also be use in side panel and background scripts
Leave a Reply