使用Chrome采集摄像头并生成视频下载
主要使用2个技术点：WebRtc 的 getUserMedia 和 MediaRecorder
注意点
- 开始录制调用 start 方法要传入一个采样间隔，这样录制的媒体会按照你设置的值进行分割成一个个单独的区块, 而不是以默认的方式录制一个非常大的整块内容.
- demo地址：https://young-cowboy.github.io/gallery/MediaRecorder.html
参考资料
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<video width="400" height="300" controls id="video" autoplay></video>
<div>
<button type="button" id="record">record</button>
<button type="button" id="pause">pause</button>
<button type="button" id="resume">resume</button>
<button type="button" id="stop">stop</button>
<button type="button" id="finish">finish</button>
<a href="#" target="_blank" id="download">download</a>
</div>
<div>
<button type="button" id="info">info</button>
<button type="button" id="isTypeSupported">isTypeSupported</button>
</div>
<script type="text/javascript">
(function () {
let mediaRecorder = null;
let mediaStream = null;
let chunks = [];
function getMediaStream(params) {
var constraints = {
audio: true,
video: true
};
return navigator
.mediaDevices
.getUserMedia(constraints);
}
function attachMedia() {
getMediaStream()
.then(stream => {
document.querySelector('#video').srcObject = stream;
mediaStream = stream;
})
.catch(err => alert(`${err.name}: ${err.message}`));
}
function record() {
mediaRecorder = new MediaRecorder(mediaStream, { mimeType:"video/webm" });
mediaRecorder.addEventListener('dataavailable', e => {
console.log('dataavailable %o', e);
chunks.push(e.data);
});
mediaRecorder.addEventListener('error', e => console.log('error %o', e));
mediaRecorder.addEventListener('pause', e => console.log('pause %o', e));
mediaRecorder.addEventListener('resume', e => console.log('resume %o', e));
mediaRecorder.addEventListener('start', e => console.log('start %o', e));
mediaRecorder.addEventListener('stop', e => console.log('stop %o', e));
// 调用时可以通过给timeslice参数设置一个毫秒值,如果设置这个毫秒值,那么录制的媒体会按照你设置的值进行分割成一个个单独的区块, 而不是以默认的方式录制一个非常大的整块内容.
mediaRecorder.start(10);
}
function stop() {
mediaRecorder.stop();
}
function pause() {
mediaRecorder.pause();
}
function resume() {
mediaRecorder.resume();
}
function stop() {
mediaRecorder.stop();
}
function download() {
var blob = new Blob(chunks, {type: "video/webm"});
chunks = [];
var downloadLink = document.querySelector('a#download');
var videoURL = window.URL.createObjectURL(blob);
var rand = Math.floor((Math.random() * 10000000));
var name = "video_"+rand+".webm" ;
downloadLink.href = videoURL;
downloadLink.setAttribute( "download", name);
downloadLink.setAttribute( "name", name);
}
function info() {
console.log(`mimeType ${mediaRecorder.mimeType}`);
console.log(`state ${mediaRecorder.state}`);
console.log(`stream ${mediaRecorder.stream}`);
console.log(`videoBitsPerSecond %o`, mediaRecorder.videoBitsPerSecond);
console.log(`audioBitsPerSecond ${mediaRecorder.audioBitsPerSecond}`);
}
function isTypeSupported() {
var types = [
"video/webm",
"audio/webm",
"video/webm\;codecs=vp8",
"video/webm\;codecs=daala",
"video/webm\;codecs=h264",
"audio/webm\;codecs=opus",
"video/mpeg"
];
for (var i in types) {
console.log(`Is ${types[i]} supported? ${MediaRecorder.isTypeSupported(types[i] ? "Maybe!" : "No")}`);
}
}
document.querySelector('#record').addEventListener('click', e => record());
document.querySelector('#pause').addEventListener('click', e => pause());
document.querySelector('#resume').addEventListener('click', e => resume());
document.querySelector('#stop').addEventListener('click', e => stop());
document.querySelector('#finish').addEventListener('click', e => download());
document.querySelector('#info').addEventListener('click', e => info());
document.querySelector('#isTypeSupported').addEventListener('click', e => isTypeSupported());
attachMedia();
})()
</script>
</body>
</html>
使用Chrome采集摄像头并生成视频下载的更多相关文章
- JavaCV 采集摄像头及桌面视频数据
javacv 封装了javacpp-presets库很多native API,简化了开发,对java程序员来说比较友好. 之前使用JavaCV库都是使用ffmpeg native API开发,这种方式 ...
- JavaCV 采集摄像头和麦克风数据推送到流媒体服务器
越来越觉得放弃JavaCV FFmpeg native API,直接使用JavaCV二次封装的API开发是很明智的选择,使用JavaCV二次封装的API开发避免了各种内存操作不当引起的crash. 上 ...
- Android中直播视频技术探究之---采集摄像头Camera视频源数据进行推流(采用金山云SDK)
一.前言 在之前已经详细介绍了Android中的一种视频数据源:Camera,不了解的同学可以点击进入:Android中Camera使用详解 ,在这篇文章中我们介绍了如何采集摄像头的每一帧数据,然后进 ...
- 如何用FFmpeg API采集摄像头视频和麦克风音频，并实现录制文件的功能
之前一直用Directshow技术采集摄像头数据,但是觉得涉及的细节比较多,要开发者比较了解Directshow的框架知识,学习起来有一点点难度.最近发现很多人问怎么用FFmpeg采集摄像头图像,事实 ...
- 音视频下载Chrome插件 官方主页
2019年3月20日前的旧版有不能下载的情况,请使用下面的新版 音视频下载是个点击图标后就能下载网页里正在播放的音视频文件的软件 下载:官方下载 百度网盘 Chr ...
- YouTube视频下载的12个软件(Win和Mac)
如今,观看视频已经成为人们生活中重要的一部分.很多时候,我们都需要用到视频,比如教育用途.会议报告.休闲娱乐以及广告宣传等.如果你觉得有时候资源不好找的话,不放去看下YouTube.YouTube是世 ...
- 基于opencv在摄像头ubuntu根据视频获取
基于opencv在摄像头ubuntu根据视频获取 1 工具 原料 平台 :UBUNTU12.04 安装库 Opencv-2.3 2 安装编译执行步骤 安装编译opencv-2.3 參考h ...
- 记一次加密的ts视频下载
想要下载一个视频,但是网站上不能直接下载.试过IDM,以及Streaming Video Recorder 都不行.因为视频被加密了. ts 是分片的视频文件,m3u8 是播放索引列表(还可配置其他参 ...
- 手把手教你用python打造网易公开课视频下载软件3-对抓取的数据进行处理
上篇讲到抓取的数据保存到rawhtml变量中,然后通过编码最终保存到html变量当中,那么html变量还会有什么问题吗?当然会有了,例如可能html变量中的保存的抓取的页面源代码可能有些标签没有关闭标 ...
随机推荐
- 谷歌高管无意中透露Google Glass未获得成功的原因
Google X高管Astro Teller在接受媒体采访时无意中透露了这款设备没有取得预期成绩的原因 最终我们发现,在他们生活的世界里,数字生活和即时物理生活根本无法融为一体. Teller提出的这 ...
- SVM支持向量机
支持向量机(Support Vector Machine,SVM)是效果最好的分类算法之中的一个. 一.线性分类器: 一个线性分类器就是要在n维的数据空间中找到一个超平面,通过这个超平面能够把两类数据 ...
- CMD命令获取电脑所有连接过的WiFi密码
cmd中输入命令:for /f "skip=9 tokens=1,2 delims=:" %i in ('netsh wlan show profiles') do @echo ...
- Is this its limit?
import sys import os curPath = os.path.abspath(os.path.dirname(__file__)) rootPath = os.path.split(c ...
- Delphi 对话框实现源码分析
Delphi 对话框实现源码分析 简介 在这篇文章中,我将大概的从Delphi XE2 的Dialogs单元入手,分析ShowMessage,MessageBox等对话框运行原理,希望能帮助你理解 ...
- 【题解】P2161[SHOI2009]会场预约(set)
[题解][P2161 SHOI2009]会场预约 题目很像[[题解]APIO2009]会议中心 \(set\)大法好啊! 然后我们有个小\(trick\)(炒鸡帅),就是如何优雅地判断线段交? str ...
- Django 之Form组件
Django之From组件 扩展:Django 之 ModelForm组件 Form组件功能 Django的Form主要具有一下几大功能 生成HTML标签 验证用户数据(显示错误信息) HTML Fo ...
- spring jdbcTemplate的CRUD操作
一.jdbcTemplate准备 1.导入与jdbcTemplate相关的jar包 2.设置数据库信息 3.创建jdbcTemplate对象,设置数据源 二.添加操作 1.代码 2.结果 三.修改操作 ...
- centos7下只需两个命令升级php版本
我的php5.4 升级到5.6 sudo yum clean allsudo yum install -y php56w Resolving Dependencies --> Running t ...
- k近邻算法（k-nearest neighbor,k-NN）
kNN是一种基本分类与回归方法.k-NN的输入为实例的特征向量,对应于特征空间中的点:输出为实例的类别,可以取多类.k近邻实际上利用训练数据集对特征向量空间进行划分,并作为其分类的"模型&q ...