chrome插件
manifest.json
{
"name": "Desktop Capture",
"description": "Allows you to capture your desktop for use in video applications",
"version": "0.1.0",
"manifest_version": 2,
"background": {
"scripts": [
"extension.js"
],
"persistent": false
},
"externally_connectable": {
"matches": [
"*://localhost/*"
]
},
"permissions": [
"desktopCapture"
]
}
extension.js:
chrome.runtime.onMessageExternal.addListener(
(message, sender, sendResponse) => {
if (message == 'version') {
sendResponse({
type: 'success',
version: '0.1.0'
});
return true;
}
const sources = message.sources;
const tab = sender.tab;
chrome.desktopCapture.chooseDesktopMedia(sources, tab, streamId => {
if (!streamId) {
sendResponse({
type: 'error',
message: 'Failed to get stream ID'
});
} else {
sendResponse({
type: 'success',
streamId: streamId
});
}
});
return true;
}
);
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<title>Screen Record</title>
</head>
<body>
<p>This example shows you the contents of the selected part of your display.
Click the Start Capture button to begin.</p>
<p>
<button id="start">Start Capture</button>
<button id="stop">Stop Capture</button>
<button onclick="download()">下载</button>
</p>
<!-- <video id="video" autoplay style="display: none;"></video> -->
<canvas id="canvas"></canvas>
<br>
<strong>Log:</strong>
<br>
<pre id="log"></pre>
</body>
<script src="./index.js"></script>
</html>
index.js:
let recordedBlobs
let recorder
const videoElem = document.createElement('video');
document.body.appendChild(videoElem);
// const videoElem = document.getElementById("video");
const logElem = document.getElementById("log");
const startElem = document.getElementById("start");
const stopElem = document.getElementById("stop");
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
let chooseing = false;
const screenW = window.screen.width
const screenH = window.screen.height
let startX = 0;
let startY = 0;
let width = 0;
let height = 0;
$(document).mousedown(function (event) { //获取鼠标按下的位置
window.a = event
if (chooseing) {
console.log('start')
startX = event.clientX;
startY = event.clientY;
}
});
$(document).mouseup(function (event) {//鼠标释放
window.b = event
if (chooseing) {
console.log('end')
var endX = event.clientX;
var endY = event.clientY;
width = endX - startX;
height = endY - startY;
canvas.style.width = width + 'px';
canvas.style.height = height + 'px';
console.log(startX, startY, width, height);
chooseing = false;
timerCallback();
const chunks = [];
const options = {
audioBitsPerSecond: 128000,
videoBitsPerSecond: 2500000,
mimeType: 'video/webm'
};
recorder = new MediaRecorder(canvas.captureStream(30), options);
recorder.start();
recorder.onstop = event => {
console.log(chunks)
recordedBlobs = new Blob(chunks, {
type: 'video/mp4'
});
}
recorder.ondataavailable = event => {
console.log(event.data);
chunks.push(event.data);
};
}
})
const id = "hohmnmdnclginhdfncbajlicojdlgiek"; //加载的插件id
// Options for getDisplayMedia()
const displayMediaOptions = {
cursor: "never",
audio: true,
video: {
cursor: "never"
}
};
// Set event listeners for the start and stop buttons
startElem.addEventListener("click", function (evt) {
startCapture();
}, false);
stopElem.addEventListener("click", function (evt) {
stopCapture();
}, false);
async function startCapture() {
logElem.innerHTML = "";
chooseing = true;
const request = { sources: ['window', 'tab'] };
chrome.runtime.sendMessage(id, request, async response => {
if (!response) {
console.log('No extension');
return;
}
if (response && response.type === 'success') {
try {
const stream = await navigator.mediaDevices.getUserMedia({
video: {
mandatory: {
chromeMediaSource: 'desktop',
chromeMediaSourceId: response.streamId
},
}
})
console.log(videoElem.style.height)
console.log(videoElem.style.width)
videoElem.style.display = 'none';
videoElem.style.height = screenH + 'px';
videoElem.style.width = screenW + 'px';
videoElem.autoplay = true
videoElem.srcObject = stream;
} catch (err) {
console.error("Error: " + err);
}
}
})
}
function stopCapture(evt) {
recorder.stop();
let tracks = videoElem.srcObject.getTracks();
tracks.forEach(track => {
console.info(track.getConstraints())
track.stop()
});
videoElem.srcObject = null;
}
function download() {
const url = URL.createObjectURL(recordedBlobs);
const a = document.createElement('a');
document.body.appendChild(a);
a.style.display = 'none';
a.href = url;
a.download = 'test.mp4';
a.click();
window.URL.revokeObjectURL(url);
}
function timerCallback() {
ctx.drawImage(videoElem, startX, startY, width, height, 0, 0, width, height);
// ctx.drawImage(videoElem, 0, 0, width, height, -startX * width / screenW, -startY * height / screenH, width, height);
setTimeout(function () {
timerCallback();
}, 0);
}