console
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style type="text/css">
html,
body {
width: 100%;
height: 100%;
}
.main {
display: flex;
}
#videoContainer {
}
.bg-miusic {
width: 400px;
height: 50px;
border: 1px solid;
}
#output-video {
margin-left: 100px;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="main">
<canvas class="canvas" style="border: 1px solid black;" width="450" height="600"></canvas>
<div id="videoContainer" style="margin-left: 50px;">
<h2>视频</h2>
<video style="border: 1px solid black;" width="300" height="300" controls="true" autoplay="true"
id="video"></video>
</div>
</div>
<script src="https://unpkg.com/@ffmpeg/ffmpeg@0.10.0/dist/ffmpeg.min.js"></script>
<script>
var img = {}
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
const {
width,
height
} = canvas;
ctx.fillStyle = 'red';
function draw(rotation = 0) {
ctx.clearRect(0, 0, 1000, 1000);
ctx.save();
ctx.translate(width / 2, height / 2);
ctx.rotate(rotation);
ctx.translate(-width / 2, -height / 2);
ctx.beginPath();
ctx.rect(200, 200, 200, 200);
ctx.fill();
ctx.restore();
let h1 = img.height
let w1 = img.width
ctx.drawImage(img, 0, 0, w1, h1, 0, 0, 200, 200);
}
function update(t) {
draw(t / 500);
requestAnimationFrame(update);
}
var imgLoaded = 0;
function main() {
img = new Image();
img.crossOrigin = "Anonymous";
img.addEventListener('load', () => {
onload()
})
img.src = "http://material.baobeituan.com/video/admin/test-canvas/pic1.jpg"
let onload = () => {
this.imgLoaded++
if (this.imgLoaded == 1) {
console.log(img.width)
getVideo()
update(0);
}
}
}
main()
function getVideo() {
const stream = canvas.captureStream();
const recorder = new MediaRecorder(stream, {
mimeType: 'video/webm',
videoBitsPerSecond: 250000000,
});
const data = [];
recorder.ondataavailable = function (event) {
if (event.data && event.data.size) {
data.push(event.data);
}
};
recorder.onstop = () => {
const url = URL.createObjectURL(new Blob(data, {
type: 'video/mp4'
}));
document.querySelector("#videoContainer").style.display = "block";
document.querySelector("video").src = url;
};
recorder.start();
setTimeout(() => {
recorder.stop();
}, 5000);
}
sendServer('S');
function sendServer(data) {
console.log('data', data)
let xhr = new XMLHttpRequest()
xhr.open(
'post',
'http://127.0.0.1/template/video/createV2.post',
true
)
xhr.responseType = 'application/json;charset=UTF-8'
xhr.setRequestHeader("Content-Type","application/json;charset=UTF-8")
xhr.onload = function () {
if (xhr.status == 200) {
console.log(xhr.response)
}else{
console.log(xhr.response)
}
}
let params = {
id:555,
name:"测试"
}
xhr.send('id=55&a=66')
}
</script>
</body>
</html>