使用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变量中的保存的抓取的页面源代码可能有些标签没有关闭标 ...
随机推荐
- Windows找出占用端口的进程
第一步:找出监听指定端口的进程号: C:\> netstat -ao | findstr 443 TCP 0.0.0.0:443 Sean-NotePC:0 ...
- 打造自己的LINQ Provider（上）：Expression Tree揭秘
概述 在.NET Framework 3.5中提供了LINQ 支持后,LINQ就以其强大而优雅的编程方式赢得了开发人员的喜爱,而各种LINQ Provider更是满天飞,如LINQ to NHiber ...
- hdu 4902 Nice boat（线段树区间改动，输出终于序列）
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4902 Problem Description There is an old country and ...
- 关于angularjs的model的一些问题
有的时候 在一些页面中 我们会需要用到弹出的模态框,这里主要是使用angularjs的uimodel. 页面效果如下: 首先我们需要在JS的controller中导入$uibModal模块. HTML ...
- ajax 和jsonp 不是一码事 细读详解
由于Sencha Touch 2这种开发模式的特性,基本决定了它原生的数据交互行为几乎只能通过AJAX来实现. 当然了,通过调用强大的PhoneGap插件然后打包,你可以实现100%的Socket通讯 ...
- Lock和Condition
1 什么是可重入锁 可重入锁是说一个线程在已经获取了该锁的情况下,还可以再次获取该锁. 主要的应用场景: 可重入锁指的是在一个线程中可以多次获取同一把锁,比如:一个线程在执行一个带锁的方法,该方法中又 ...
- nginx-1.10.3 编译安装
1.系统环境 [root@crazy-acong ~]# cat /etc/redhat-release CentOS release 6.6 (Final) [root@crazy-acong ~] ...
- Webpack探索【7】--- sourceMap、自动构建刷新功能详解
本文主要讲sourceMap.自动构建刷新功能.
- zip filter map 列表生成器
map map(function, list): 就是对list 中的每一个元素都调用function函数进行处理,返回一个map的对象 list一下就可以生成一个列表 或者for循环该对象就可以输出 ...
- PAT 1064. 朋友数(20)
如果两个整数各位数字的和是一样的,则被称为是“朋友数”,而那个公共的和就是它们的“朋友证号”.例如123和51就是朋友数,因为1+2+3 = 5+1 = 6,而6就是它们的朋友证号.给定一些整数,要求 ...