Javascript 将mediaRecorder与木偶演员和铬一起使用以保存画布?
我正在尝试使用Puppeter登录到一个站点并录制画布。我已经在dev控制台中成功地使用了它,但无法在我自己的木偶脚本中使用它。我对JS/node相当陌生,我认为问题在于我使用的page.evaluate/waitis是错误的。以前我拥有(mediaRecorder=await page.evaluate…)之外的所有内容,但这不起作用,我认为这是因为它没有在页面上下文中运行Javascript 将mediaRecorder与木偶演员和铬一起使用以保存画布?,javascript,node.js,async-await,puppeteer,web-mediarecorder,Javascript,Node.js,Async Await,Puppeteer,Web Mediarecorder,我正在尝试使用Puppeter登录到一个站点并录制画布。我已经在dev控制台中成功地使用了它,但无法在我自己的木偶脚本中使用它。我对JS/node相当陌生,我认为问题在于我使用的page.evaluate/waitis是错误的。以前我拥有(mediaRecorder=await page.evaluate…)之外的所有内容,但这不起作用,我认为这是因为它没有在页面上下文中运行 const puppeteer = require('puppeteer'); const fs = require('
const puppeteer = require('puppeteer');
const fs = require('fs');
const config = require('./login.json');
(async () => {
try {
//load cookies
const cookiesString = fs.readFileSync('./cookies.json', 'utf8');
const cookies = JSON.parse(cookiesString);
//open pup and browse to vm
const browser = await puppeteer.launch({
args:
[
"--no-sandbox",
// "--executablePath=/usr/bin/google-chrome"
]
});
const page = await browser.newPage();
await page.setViewport({width: 1920, height: 1080});
await page.setCookie.apply(page, cookies);
await page.goto(config.testurl);
console.log(page.url());
mediaRecorder = await page.evaluate((options) => {
var recordedChunks = [];
var options = {mimeType: "video/webm; codecs=vp9"};
canvas = document.querySelector('canvas')
mediaRecorder = new MediaRecorder(canvas.captureStream(25), options);
mediaRecorder.start(10);
// mediaRecorder.stop();
mediaRecorder.ondataavailable = handleDataAvailable;
// mediaRecorder.start();
function handleDataAvailable(event) {
console.log("data-available");
if (event.data.size > 0) {
recordedChunks.push(event.data);
console.log(recordedChunks);
download();
} else {
// ...
}
}
function download() {
var blob = new Blob(recordedChunks, {
type: "video/webm"
});
var url = URL.createObjectURL(blob);
var a = document.createElement("a");
document.body.appendChild(a);
a.style = "display: none";
a.href = url;
a.download = "test.webm";
a.click();
window.URL.revokeObjectURL(url);
}
// demo: to download after 9sec
setTimeout(event => {
console.log("stopping");
}, 3000);
return mediaRecorder
})
mediaRecorder.ondataavailable = handleDataAvailable;
// mediaRecorder.start();
function handleDataAvailable(event) {
console.log("data-available");
if (event.data.size > 0) {
recordedChunks.push(event.data);
console.log(recordedChunks);
download();
} else {
// ...
}
}
function download() {
var blob = new Blob(recordedChunks, {
type: "video/webm"
});
var url = URL.createObjectURL(blob);
var a = document.createElement("a");
document.body.appendChild(a);
a.style = "display: none";
a.href = url;
a.download = "test.webm";
a.click();
window.URL.revokeObjectURL(url);
}
// demo: to download after 9sec
setTimeout(event => {
console.log("stopping");
}, 3000);
await page.close();
await browser.close();
} catch (e) {
console.log(e)
}
})();