在web页面音视频录制并下载到本地

2024-02-01 19:04| 来源: 网络整理| 查看: 265

音视频录制前需要获取到流，使用 navigator.mediaDevices 来完成。

navigator.mediaDevices

MediaDevices 接口提供访问连接媒体输入的设备，如照相机和麦克风，以及屏幕共享等。它可以使你取得任何硬件资源的媒体数据。

简单介绍一下MediaDevices API。

方法名称说明getDisplayMedia()提示用户选择显示器或显示器的一部分（例如窗口）以捕获为 MediaStream 以便共享或记录。返回解析为 MediaStream 的 PromisegetUserMedia()在用户通过提示允许的情况下，打开系统上的相机或屏幕共享和/或麦克风，并提供 MediaStream 包含视频轨道和/或音频轨道的输入

官方示例如下：

"use strict"; // Put variables in global scope to make them available to the browser console. var video = document.querySelector("video"); var constraints = (window.constraints = { audio: false, video: true, }); var errorElement = document.querySelector("#errorMsg"); navigator.mediaDevices .getUserMedia(constraints) .then(function (stream) { var videoTracks = stream.getVideoTracks(); console.log("Got stream with constraints:", constraints); console.log("Using video device: " + videoTracks[0].label); stream.onended = function () { console.log("Stream ended"); }; window.stream = stream; // make variable available to browser console video.srcObject = stream; }) .catch(function (error) { if (error.name === "ConstraintNotSatisfiedError") { errorMsg( "The resolution " + constraints.video.width.exact + "x" + constraints.video.width.exact + " px is not supported by your device.", ); } else if (error.name === "PermissionDeniedError") { errorMsg( "Permissions have not been granted to use your camera and " + "microphone, you need to allow the page access to your devices in " + "order for the demo to work.", ); } errorMsg("getUserMedia error: " + error.name, error); }); function errorMsg(msg, error) { errorElement.innerHTML += "

" + msg + "

"; if (typeof error !== "undefined") { console.error(error); } }

要实现web页面录制，需要请求获取音视频流的媒体许可，代码如下：

const button = document.querySelector("button"); button.addEventListener("click", async () => { // 音视频都录制 const stream = await navigator.mediaDevices.getDisplayMedia({ video: true, audio: true }) })

这样通过button实现如下效果： stream

MediaRecorder

MediaRecorder 是 MediaStream Recording API 提供的用来进行媒体轻松录制的接口，他需要通过调用 MediaRecorder() 构造方法进行实例化。

简单介绍一下 MediaRecorder API。

构造函数名称说明MediaRecorder()创建一个新的 MediaRecorder 对象，对指定的 MediaStream 对象进行录制，支持的配置项包括设置容器的 MIME 类型 (例如"video/webm" 或者 “video/mp4”) 和音频及视频的码率或者二者同用一个码率配置项名称说明mimeType返回 MediaRecorder 对象创建时选择器选择的录制容器的 MIME typestate返回录制对象 MediaRecorder 的当前状态 (闲置中，录制中或者暂停 ) (inactive, recording, or paused.)strem返回录制对象 MediaRecorder 创建时构造函数传入的 stream 对象方法名称说明isTypeSupported()返回一个 Boolean 值，来表示设置的 MIME type 是否被当前用户的设备支持start()开始录制媒体，这个方法调用时可以通过给 timeslice 参数设置一个毫秒值，如果设置这个毫秒值，那么录制的媒体会按照你设置的值进行分割成一个个单独的区块，而不是以默认的方式录制一个非常大的整块内容pause()暂停媒体录制resume()继续录制之前被暂停的录制动作stop()停止录制。同时触发 dataavailable 事件，返回一个存储Blob内容的录制数据。之后不再记录事件处理名称说明ondataavailable调用它用来处理 dataavailable 事件，该事件可用于获取录制的媒体资源 (在事件的 data 属性中会提供一个可用的 Blob 对象.)onstart用来处理 start 事件，该事件在媒体开始录制时触发onpause用来处理 pause 事件，该事件在媒体暂停录制时触发onresume用来处理 resume 事件，该事件在暂停后回复录制视频时触发onstop用来处理 stop 事件，该事件会在媒体录制结束时、媒体流（MediaStream）结束时、或者调用 MediaRecorder.stop() 方法后触发事件

Listen to these events using addEventListener() or by assigning an event listener to the oneventname property of this interface.

通过以上介绍，可以调用 MediaRecorder.isTypeSupported() 这个API来测试当前浏览器的支持情况。官方代码如下：

返回结果如图： type

返回值为 True 的情况下，此代码显示Maybe，原因是即使编码格式支持，但是如果没有足够的资源来支持录制和编码过程，录制仍可能失败。所以仅作为参考判断，仍需要自己写错误处理。

之后通过监听来进行下载操作，代码如下：

const chunks = []; mediaRecorder.ondataavailable = e => chunks.push(e.data); mediaRecorder.onstop = () => { const blob = new Blob(chunks, { type: chunks[0].type }); const url = URL.createObjectURL(blob); const a = document.createElement("a"); a.href = url; a.download = "screen.webm"; a.click(); }

这样就实现了屏幕录制功能了，并且通过该方法实现了音视频下载的功能。

完整代码

完整代码下载地址

【本文地址】

公司简介

联系我们