有时我们想把 游戏的界面或者游戏的内容录制成视频 用于制作宣传片
一般的想法是使用录屏软件
但录屏的缺点在于,占用空间大,效率更低
我独家自创的方法是:
1 将游戏导出 网页版
2 在index.html 中加入 h5 的 api 代码
3 用网页浏览该游戏项目,并录制,并导出视频文件
4 谷歌内核浏览器 导出的视频 没有时长,导致无法剪辑,这时需要 ffmpeg 修复一下
h5 api 代码如下:
我的代码的使用方法是: 从运行 开始 就录制视频, 录制结束后 点击一下屏幕 就会自动下载视频 文件 并保存到 ‘下载’ 文件夹
需要"开始录制" “结束录制” 按钮的话 请自行写html代码吧…
var canvas = document.getElementById('GameCanvas');
var allchunks=[];
const options = {mimeType:'video/webm;codecs=vp9'};
const stream = canvas.captureStream?canvas.captureStream():canvas.mozCaptureStream();//浏览器兼容处理
var recorder = new MediaRecorder(stream,options );
// recorder.mimeType='video/mp4'
recorder.ondataavailable =function(e){ //结束录制后 自动保存视频文件
//allChunks.length=0;
// allchunks.push(e.data);
// const tmpBlob = new Blob(allchunks, { 'type' : options.mimeType } );
//var videoUrl = window.URL.createObjectURL(tmpBlob)
var videoUrl = window.URL.createObjectURL(e.data)
var a = document.createElement('a')
a.href = videoUrl
a.download = '1.webm' //导出文件的文件名
a.style.display = 'none'
document.body.appendChild(a)
a.click()
}
recorder.start(); //开始录制
canvas.onclick =function(){ //当点击屏幕后 结束录制
recorder.stop()
}
最后 使用 ffmpeg 修复视频的 神秘代码如下
ffmpeg -i 1.webm -vcodec copy -acodec copy 2.webm
把视频文件拷贝到 ffmpeg 文件夹 然后在 命令行 里写以上代码
