Introduction : I recently studied the principle and implementation of audio and video recording on web pages, and now I will make a summary of the current implementation methods.
content
- Related API
- Method introduction
- Practical drill
Related API
To achieve this function involves two js api.
Method introduction
getUserMedia
Use getUserMedia
this interface to get the camera and microphone of the device and return an Promise
object.
grammarvar stream = navigator.mediaDevices.getUserMedia(constraints);
constraints
It includes the following spellings:
- Request audio and video
const constraints = {
audio: true,
video: true
}
复制代码
- Request a specific device video resolution
const constraints = {
audio: true,
video: {
width: {
min: 1280
},
height: {
min: 720
}
}
}
复制代码
- Use front camera (default)
const constraints = {
audio: true,
video: {
facingMode: "user"
}
}
复制代码
- Force the use of the rear camera
const constraints = {
audio: true,
video: {
facingMode: {
exact: "environment"
}
}
}
复制代码
E.g:
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();
复制代码
Of course, stream
there are other methods that can be used, such as
addTrack
Add a new track to the streamgetAudioTracks
Contains all audio tracks in the streamgetVideoTracks
for each video track included in the media streamgetTracks
all objects in this stream
MediaRecorder
This is one way to record a stream.
start
start recordingstop
end recordingonstop
Listen to the end eventondataavailable
real-time streaming data
grammarvar mediaRecorder = new MediaRecorder(stream[, options]);
E.g
// 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);
}
复制代码
Practical drill
- page structure section
<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 part
Get element added event
// 获取按钮
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();
}
复制代码
start recording
// 开始录制
function start (type) {
let option = type == 'audio' ? {
audio: true
} : {
video: true,
}
createMedia(type, option);
}
复制代码
stop recording
// 停止录制
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;
}
复制代码
How to pass
// 全局参数
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);
}
}
复制代码
see the effect
If you want to experience it, you can turn on this audio and video recording , which is better for mobile phones.
Well, today's tutorial is introduced here, bye!