WebRTC网页录制音视频教程

导语:最近研究了一下网页录制音视频的原理以及实现,现在就目前的实现方法做一个总结。

目录

  • 相关API
  • 方法介绍
  • 实战演练

相关API

要实现这个功能就涉及到两个js api。

方法介绍

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);
}
}

看下效果

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

想要体验的可以打开这个音视频录制,手机上使用更佳。

好了,今天的教程就介绍到这里,拜拜!

posted @   MarkGuan  阅读(438)  评论(0编辑  收藏  举报
编辑推荐:
· 智能桌面机器人:用.NET IoT库控制舵机并多方法播放表情
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
阅读排行:
· 新年开篇:在本地部署DeepSeek大模型实现联网增强的AI应用
· DeepSeek火爆全网,官网宕机?本地部署一个随便玩「LLM探索」
· Janus Pro:DeepSeek 开源革新,多模态 AI 的未来
· 互联网不景气了那就玩玩嵌入式吧,用纯.NET开发并制作一个智能桌面机器人(三):用.NET IoT库
· 上周热点回顾(1.20-1.26)
点击右上角即可分享
微信分享提示