网页视频抓取脚本(【】如何把我canvas画板的内容录制成一个视频 )
优采云 发布时间: 2021-11-17 17:08网页视频抓取脚本(【】如何把我canvas画板的内容录制成一个视频
)
今天要写的东西，不是你们平时用的。因为兼容性真的不好，只是为了说明前端可以做这些事情。
你能想象前端可以提取*敏*感*词*和麦克风的视频流和音频流，然后为所欲为吗？换句话说，我想把我画布画板的内容录制成视频。这些看似js不该做的事情其实可以做，只是兼容性不好。我在这里以 chrome 浏览器为例。
以下是首先使用的 API 列表：
1、显示来自相机的视频
一、打开相机
// 这里是打开*敏*感*词*和麦克设备（会返回一个Promise对象）
navigator.mediaDevices.getUserMedia({
audio: true,
video: true
}).then(stream => {
console.log(stream) // 放回音视频流
}).catch(err => {
console.log(err) // 错误回调
})
上面我们成功开启了*敏*感*词*和麦克风，获得了视频流。下一步是将流呈现给交互界面。
二、显示视频
Document
var video = document.getElementById('video')
navigator.mediaDevices.getUserMedia({
audio: true,
video: true
}).then(stream => {
// 这里就要用到srcObject属性了，可以直接播放流资源
video.srcObject = stream
}).catch(err => {
console.log(err) // 错误回调
})
效果如下：
到目前为止，我们已经成功地在页面上展示了我们的相机。下一步是如何采集视频并下载视频文件。
2、来自*敏*感*词*的视频采集
此处使用 MediaRecorder 对象：
新建MediaRecorder对象，返回MediaStream对象进行录制操作，支持配置项配置容器的MIME类型（例如“video/webm”或“video/mp4”）或audio bitrate video bitrate
MediaRecorder 接收两个参数。第一个是流音频和视频流，第二个是选项配置参数。接下来，我们可以将上述*敏*感*词*获取到的流添加到MediaRecorder中。
var video = document.getElementById('video')
navigator.mediaDevices.getUserMedia({
audio: true,
video: true
}).then(stream => {
// 这里就要用到srcObject属性了，可以直接播放流资源
video.srcObject = stream
var mediaRecorder = new MediaRecorder(stream, {
audioBitsPerSecond : 128000, // 音频码率
videoBitsPerSecond : 100000, // 视频码率
mimeType : 'video/webm;codecs=h264' // 编码格式
})
}).catch(err => {
console.log(err) // 错误回调
})
在上面我们创建了一个 MediaRecorder mediaRecorder 的实例。下一步是控制mediaRecorder的启动采集和停止采集方法。
MediaRecorder 提供了一些方法和事件供我们使用：
// 这里我们增加两个按钮控制采集的开始和结束
var start = document.getElementById('start')
var stop = document.getElementById('stop')
var video = document.getElementById('video')
navigator.mediaDevices.getUserMedia({
audio: true,
video: true
}).then(stream => {
// 这里就要用到srcObject属性了，可以直接播放流资源
video.srcObject = stream
var mediaRecorder = new MediaRecorder(stream, {
audioBitsPerSecond : 128000, // 音频码率
videoBitsPerSecond : 100000, // 视频码率
mimeType : 'video/webm;codecs=h264' // 编码格式
})
// 开始采集
start.onclick = function () {
mediaRecorder.start()
console.log('开始采集')
}
// 停止采集
stop.onclick = function () {
mediaRecorder.stop()
console.log('停止采集')
}
// 事件
mediaRecorder.ondataavailable = function (e) {
console.log(e)
// 下载视频
var blob = new Blob([e.data], { 'type' : 'video/mp4' })
let a = document.createElement('a')
a.href = URL.createObjectURL(blob)
a.download = `test.mp4`
a.click()
}
}).catch(err => {
console.log(err) // 错误回调
})
ok，现在进行一波操作；
上图中可以看到采集结束后ondataavailable事件返回的数据中有一个Blob对象，这就是视频资源，然后我们就可以将Blob作为url下载到本地通过 URL.createObjectURL() 方法。视频采集下载完毕，非常简单粗暴。
以上是下载视频采集的例子。如果只需要音频 采集，出于同样的原因设置“mimeType”。我不会在这里举例。下面我介绍一下canvas作为视频文件的录制
2、画布输出视频流
这里使用了 captureStream 方法。也可以将画布输出到流中，然后在视频中显示，或者使用 MediaRecorder采集 资源。
// 这里就闲话少说直接上重点了因为和上面视频采集的是一样的道理的。
Document
var video = document.getElementById('video')
var canvas = document.getElementById('canvas')
var stream = $canvas.captureStream(); // 这里获取canvas流对象
// 接下来你先为所欲为都可以了，可以参考上面的我就不写了。
下面我再贴一个gif（这是我上次写的canvas事件的demo和这个视频的组合采集）传送门（Canvas事件绑定）
希望你能达到以下效果。其实你也可以在画布视频中插入背景音乐。这些都比较简单。
