canvas2video
Version:
Convert dynamic canvas to video, support merge audio
113 lines (103 loc) • 2.91 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>canvas2video demo</title>
<style>
* {
padding: 0;
margin: 0;
}
#container {
width: 300px;
height: 300px;
}
</style>
<script src="https://unpkg.com/spritejs@3.4.24/dist/spritejs.min.js"></script>
<script src="https://unpkg.com/@ffmpeg/ffmpeg@0.7.0/dist/ffmpeg.min.js"></script>
</head>
<body>
<div style="width: 300px; margin: auto;">
<h1>canvas2video(mp4)</h1>
<div id="container"></div>
<div id="videoContainer" style="display: none;">
<h2>视频</h2>
<video
width="300"
height="300"
controls="true"
autoplay="true"
id="video"
></video>
</div>
</div>
<script src="../dist/canvas2video.js"></script>
<script src="https://unpkg.com/@ffmpeg/ffmpeg/dist/ffmpeg.min.js"></script>
<script>
const { Scene, Label, Group } = spritejs;
const container = document.getElementById("container");
const scene = new Scene({
container,
width: 300,
height: 300,
});
const fglayer = scene.layer("fglayer", {
bgcolor: 'red'
});
// fglayer.canvas.style.backgroundColor = "#3f097a";
const group = new Group();
group.attr({
pos: [150, 150],
});
fglayer.append(group);
const text1 = new Label("Hello World !");
text1.attr({
anchor: [0.5, 0.5],
font: "bold 24px Arial",
fillColor: "#ffdc45",
});
const text2 = new Label("SpriteJS.org");
text2.attr({
anchor: [0.5, 0.5],
y: 60,
font: "bold 24px Arial",
fillColor: "#ffdc45",
});
group.animate(
[
{ scale: 1.5, rotate: -30 },
{ scale: 1, rotate: 0 },
{ scale: 1.5, rotate: 30 },
],
{
duration: 3000,
iterations: Infinity,
direction: "alternate",
}
);
group.append(text1, text2);
</script>
<script>
const canvas2videoInstance = new Canvas2Video({
canvas: document.querySelector("canvas"),
outVideoType: "mp4",
workerOptions: {
// corePath: 'https://unpkg.com/@ffmpeg/core@0.6.0/ffmpeg-core.js'
}
});
canvas2videoInstance.startRecord();
setTimeout(() => {
canvas2videoInstance.stopRecord();
}, 3000);
canvas2videoInstance
.getStreamURL()
.then((url) => {
console.log("url", url);
document.querySelector("#videoContainer").style.display = "block";
document.querySelector("video").src = url;
})
.catch((err) => console.error(err));
</script>
</body>
</html>