有时候写一些文档,需要弄些视频,然后把视频转为gif,就可以在掘金上显示。但是视频这块,用一些手机录制或者一些软件录制,感觉不太方便。就想试试看,用js 如何快速实现录制视频。后面发现js 确实有这方面的功能,而且只需要几行代码就可以实现。
1、mediaDevices
- 接口提供访问连接媒体输入的设备,如照相机和麦克风,以及屏幕共享等。它可以使你取得任何硬件资源的媒体数据
- 常用方法
- getDisplayMedia: 提示用户选择显示器或显示器的一部分(例如窗口)以捕获为
MediaStream
以便共享或记录。返回解析为 MediaStream 的 Promise。 - getUserMedia: 在用户通过提示允许的情况下,打开系统上的相机或屏幕共享和/或麦克风,并提供
MediaStream
包含视频轨道和/或音频轨道的输入。
- getDisplayMedia: 提示用户选择显示器或显示器的一部分(例如窗口)以捕获为
2、MediaRecorder
- 构造函数会创建一个对指定的
MediaStream
进行录制的 MediaRecorder 实例对象- MediaStream 将要录制的流. 它可以是来自于使用 navigator.mediaDevices.getUserMedia() 创建的流或者来自于
<audio>
,<video>
以及<canvas>
DOM元素.
- MediaStream 将要录制的流. 它可以是来自于使用 navigator.mediaDevices.getUserMedia() 创建的流或者来自于
- MediaRecorder常用实列属性
- state 只读,返回录制对象MediaRecorder 的当前状态(闲置中,录制中或者暂停 ) (inactive, recording, or paused.)
- stream 只读,返回录制器对象 MediaRecorder 创建时构造函数传入的stream对象
- 常用方法
- stop()停止录制. 同时触发
dataavailable
事件,返回一个存储Blob内容的录制数据,之后不再记录
- stop()停止录制. 同时触发
- 事件
- ondataavailable,调用它用来处理 dataavailable 事件, 该事件可用于获取录制的媒体资源 (在事件的 e.data 属性中会提供一个可用的 Blob 对象.
const mediaRecorder = new MediaRecorder(stream[, options])
3、演示案列
<body>
<button onclick="start()">开始录制</button>
<button onclick="end()">停止录制</button>
</body>
<script>
let recorder = null;
async function start() {
let videoStream = await navigator.mediaDevices.getDisplayMedia({ video: true });//获取共享视频流
let audioStream = await navigator.mediaDevices.getUserMedia({ audio: true });//获取音频流
let tracks = [];//整合视频和音频
videoStream.getVideoTracks().forEach(t => tracks.push(t));
audioStream.getAudioTracks().forEach(t => tracks.push(t));
let stream = new MediaStream(tracks);//重新生成媒体流
recorder = new MediaRecorder(stream);//开始录制
let data = [];
recorder.ondataavailable = (e) => {
data.push(e.data)
}
recorder.onstop = function () {
this.stream.getTracks().forEach(track => track.stop());
let blob = new Blob(data, { type: this.mimeType });
let link = document.createElement("a");
link.href = URL.createObjectURL(blob);
link.download = new Date().getTime() + ".webm";
document.body.appendChild(link);
link.click();
URL.revokeObjectURL(link.href);
link.remove();
}
recorder.start();
}
function end() {
recorder.stop();
}
</script>
4、注意,获取多媒体权限,对浏览器需要以下服务才可以,且需要手动同意操作
- localhost 域
- 开启了 HTTPS 的域
- 使用 file:/// 协议打开的本地文件