导语：最近钻研了一下网页录制音视频的原理以及实现，当初就目前的实现办法做一个总结。
目录
- 相干API
- 办法介绍
- 实战演练
相干API
要实现这个性能就波及到两个js api。
- getUserMedia
- MediaRecorder
办法介绍
getUserMedia
通过getUserMedia这个接口来获取设施的摄像头和麦克风，返回一个Promise对象。
语法var stream = navigator.mediaDevices.getUserMedia(constraints);
constraints包含一下几种写法：
- 申请音视频
const constraints = { audio: true, video: true}- 申请特定的设施视频分辨率
const constraints = { audio: true, video: { width: { min: 1280 }, height: { min: 720 } }}- 应用前摄像头（默认）
const constraints = { audio: true, video: { facingMode: "user" }}- 强制应用后置摄像头
const constraints = { audio: true, video: { facingMode: { exact: "environment" } }}例如：
const constraints = { audio: true, video: { width: 1280, height: 720 }};async function createMedia() { try { let stream = await navigator.mediaDevices.getUserMedia(constraints); var video = document.querySelector('video'); video.srcObject = stream; video.onloadedmetadata = function (e) { video.play(); }; } catch (error) { console.log(`getUserMedia: ${error}`); }}createMedia();当然了这个stream还有一些办法能够应用，比方
addTrack给流增加一个新轨道getAudioTracks蕴含流中所有的音轨getVideoTracks于媒体流中蕴含的每个视频轨道getTracks此流的中的所有对象
MediaRecorder
这个就是录制流的一个办法。
start开始录制stop完结录制onstop监听完结事件ondataavailable实时流数据
语法var mediaRecorder = new MediaRecorder(stream[, options]);
例如
// stream就是下面获取的音视频流let options = { audioBitsPerSecond : 128000, videoBitsPerSecond : 2500000,}let mediaRecorder = new MediaRecorder(stream, options);// 实时的录制流数据mediaRecorder.ondataavailable = function (e) { console.log(e.data);}// 监听进行录制事件并生成播放地址mediaRecorder.onstop = function () { let blob = new Blob(chunks, {'type': mediaRecorder.mimeType}); let url = window.URL.createObjectURL(blob); console.log(url);}实战演练
- 页面构造局部
<audio controls src=""></audio><video controls src="" style="width: 100%;"></video><button id="start">开始音频</button><button id="stop">完结音频</button><button id="play">播放音频</button><button id="startVideo">开始视频</button><button id="stopVideo">完结视频</button><button id="playVideo">播放视频</button>- js局部
获取元素增加事件
// 获取按钮let audioStart = document.querySelector('#start');let audioStop = document.querySelector('#stop');let audioPlay = document.querySelector('#play');let startVideo = document.querySelector('#startVideo');let stopVideo = document.querySelector('#stopVideo');let playVideo = document.querySelector('#playVideo');// 音频操作audioStart.onclick = function () { start('audio');}audioStop.onclick = function () { stop('audio');}audioPlay.onclick = function () { document.querySelector('audio').play();}// 视频操作startVideo.onclick = function () { start('video');}stopVideo.onclick = function () { stop('video');}playVideo.onclick = function () { document.querySelector('video').play();}开始录制
// 开始录制function start (type) { let option = type == 'audio' ? { audio: true } : { video: true, } createMedia(type, option);}进行录制
// 进行录制function stop (type) { mediaRecorder.stop();}function stopSet (type) { if (type == 'audio') { stream.getAudioTracks()[0].stop(); stream = null; } else { stream.getVideoTracks()[0].stop(); } stream = null; mediaRecorder = null; chunks = []; meida = null;}通用办法
// 全局参数let stream = null,mediaRecorder = null,chunks = [], media = null;async function createMedia (type, option) { try { // 获取媒体流 stream = await navigator.mediaDevices.getUserMedia(option); media = document.querySelector(type); if (type === 'video') { media.srcObject = stream; } console.log(type, stream); // 录制流 let options = { audioBitsPerSecond : 128000, videoBitsPerSecond : 2500000, } mediaRecorder = new MediaRecorder(stream, options); console.log(type, mediaRecorder); mediaRecorder.ondataavailable = function (e) { chunks.push(e.data); } mediaRecorder.start(); // 进行录制 mediaRecorder.onstop = function () { let blob = new Blob(chunks, {'type': mediaRecorder.mimeType}); let url = window.URL.createObjectURL(blob); if (type === 'video') { media.srcObject = null; } media.src = url; stopSet(type); } } catch (error) { console.log('getUserMedia： ', error); }}看下成果
想要体验的能够关上这个音视频录制，手机上应用更佳。
好了，明天的教程就介绍到这里，拜拜！