chrome插件demo

最新推荐文章于 2022-11-22 10:28:29 发布

Z网球

最新推荐文章于 2022-11-22 10:28:29 发布

阅读量433

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/qq1036548849/article/details/105361859

版权

html 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

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>&nbsp;
		<button id="stop">Stop Capture</button>&nbsp;
		<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);
}

Z网球

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
chrome插件demo

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": { ...
复制链接

扫一扫

专栏目录