WebRTC网页录制音视频教程
时间:2021-08-22
本文章向大家介绍WebRTC网页录制音视频教程,主要包括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);
}
}
看下效果
想要体验的可以打开这个音视频录制,手机上使用更佳。
好了,今天的教程就介绍到这里,拜拜!
原文地址:https://www.cnblogs.com/guanqiweb/p/15172815.html
- Linux终端复用神器-Tmux使用梳理
- 程序实现下载文件或者打开文件
- VisualTreeHelper
- Linux下路由配置梳理
- Gitlab利用Webhook实现Push代码后的jenkins自动构建
- db4o 7.4 for .net3.5试用手记
- JQuery笔记(五) 圆角表格的效果
- tomcat内存溢出问题记录
- 微信小程序开放 Wi-Fi、NFC 连接能力,未来可直接刷地铁?
- 2017奇葩机器人大盘点:Sophia想生孩子,Atlas后空翻,贝佐斯骑高达
- silverlight:分享一个不错的自定义布局CollectionFlow(可用于制作相册的哦!)
- 无法取得ConnectionSettings的问题
- DataTable,List去重复记录的方法
- Uploadify的一点总结
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Android中DrawerLayout实现侧滑菜单效果
- Android获取系统储存以及内存信息的方法(一)
- Android开发实现读取excel数据并保存为xml的方法
- 详解Kotlin 中使用和配置 Dagger2
- Android开发使用自定义View将圆角矩形绘制在Canvas上的方法
- Android编程双重单选对话框布局实现与事件监听方法示例
- android调用H5显示加载中效果的示例代码
- Java工作中遇到的问题Method has too many Body parameters的处理办法SpringCloud Feign报错:Method has too many Body par
- Android view滑动悬浮固定效果实现代码示例
- Android编程实现变化的双重选择框功能示例
- Java中使用json存储文件
- Android自定view画圆效果
- Android简洁的下拉放大刷新效果示例
- 自定义View | invalidate()源码分析
- Pagerslidingtabstrip菜单标题栏制作方法