[译] 用HTML5捕获音频和视频
原文地址:http://www.html5rocks.com/en/tutorials/getusermedia/intro/
概述
有了HTML5,我们就可以在不借助Flash或者Silverlight的情况下完成这项工作了。
HTML5能够使我们访问设备的硬件,比如GPS,WebGL等等。
这篇文章,我们就来看看一个新的API——navigator.getUserMedia(),她允许网页应用去访问用户的摄像机和麦克风。
getUserMedia之路
第一阶段:HTML Media Capture
当我们设置<input type="file">标签,并设置此标签的accept属性,她就可以正常的工作了。
<input type="file" accept="image/*;capture=camera"> <!--拍照-->
<input type="file" accept="video/*;capture=camcorder"> <!--摄像-->
<input type="file" accept="audio/*;capture=micophone"> <!--录音-->
这个"API"的短板之处在于她做实时处理的能力比较弱,比如用canvas来渲染和应用于WebGL.
HTML Media Capture只允许你去及时的记录视频和拍照。
第二阶段:device element
很多人认为HTML Media Capture太有局限性了,所以一个强大的支持所有设备的元素出现了。好不惊奇的,她的名字就是<device>,她就是getUserMedia要处理的对象。
Opera、WhatWG、Microsoft等都相继实现此元素与API。
<device>看起来如下:
<device type="media" onchange="update(this.data)"></device>
<video autoplay></video>
<script>
function update(stream){
document.querySelector('video').src = stream.url;
}
</script>
不幸的是,没有发布的浏览器支持此标签。
尽管如此她还是有两个好处的:
- 语义化
- 高扩展性不仅仅是audio/video.
第三阶段:WebRTC
<device>最终还是流产了。
多亏了WebRTC才让需找合适的API的步伐得意继续。
现在的getUserMedia()就是参考的WebRTC,因为这是通往一套API的桥梁。她提供了访问用户本地摄像机和麦克风的能力。
正式开始
特性检查
在使用之前我们应该检查一下我们的设备是否支持此方法。
function hasGetUserMedia(){
return !!(navigator.getUserMedia || navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia || navigator.msGetUserMedia);
}
if(hasGetUserMedia()){
alert('Good to go!');
}else{
alert('Not supported!');
}
获得访问设备的权限
我们应当发送允许我们使用设备的请求。getUserMedia的第一个参数是一个对象,保存的是我们想要请求的设备。例如,如果我们想用摄像机和麦克风,第一个参数就是{video: true, audio: ture};
<video autoplay></video>
<script>
var errorCallback = function(e){
console.log('Reeeejected!');
};
navigator.getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia;
if(!!navigator.getUserMedia){ //good to go
console.log('Not Suppoted!');
navigator.getUserMedia({video: true, audio: ture}, function(localMediaStream){
var video = document.querySelector('video');
video.src = window.URL.createObjectURL(localMediaStream); video.onloadedmetadata = function(e){
//Do some stuff
};
}, errorCallback);
}
</script>
定制media
getUserMedia的第一个参数也可以被用实现高清等。
var hdConstraints = {
video: {
minWidth: 1280,
minHeight: 720
}
}
navigator.getUserMedia(hdConstraints, successCallback, errorCallback); var vgaConstraints = {
video: {
mandatory: {
maxWidth: 640,
maxHeight: 360
}
}
}
navigator.getUserMedia(vgaConstraints, successCallback, errorCallback);
选择媒体源
在Chrome 30之后,我们可以使用MediaStreamTrack.getSources() API来选择video/audio的源。
MediaStreamTrack.getSources(function(sourceInfos){
var audioSource = null;
var videoSource = null; for(var i=0; i!=sourceInfos.length; ++i){
var souceInfo = sourceInfos[i];
if(sourceInfo.kind === 'audio'){
console.log(sourceInfo.id, sourceInfo.label || 'microphone');
audioSource = sourceInfo.id;
}else if(sourceInfo.kind === 'video'){
console.log(sourceInfo.id, sourceInfo.label || 'camera');
videoSource = sourceInfo.id;
}else{
console.log('Some other kind of source: ', sourceInfo);
}
}
sourceSelected(audioSource, videoSource);
});
function sourceSelected(audioSource, videoSource){
var constraints = {
audio: {
optional: [{sourceId: audioSource}]
},
video: {
optional: [{sourceId: videoSource}]
}
};
navigator.getUserMedia(constraints, successCallback, errorCallback);
}
安全
当我们调用getUserMedia()时,浏览器会弹出一个对话框来让用户决定接下怎么做,不幸的是,当我们的应用使用的是https时,这将会被拒绝。
后备方法
对用不支持getUserMedia的用户来说,我们可以指定一个存在的video或者抛出错误提示。
function fallback(e){
video.src = 'fallbackvideo.webm';
}
function success(stream){
video.src = window.URL.createObjectURL(stream);
} if(!navigator.getUserMedia){
fallback();
}else{
navigator.getUserMedia({video: true}, success, fallback);
}
屏幕截图
我们可以使用<canvas>捕获<video>的某一帧,这样就可以实现截图了。
<video autoplay></video>
<img src="">
<canvas style="display:none;"></canvas>
<script>
var video = document.querySelector('video');
var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');
var localMediaStream = null; function snapshot(){
if(localMediaStream){
ctx.drawImage(video, 0, 0);
document.querySelector('img').src = canvas.toDataURL('image/webp');
}
} video.addEventListener('click', snapshot, false); navigator.getUserMedia({video: true}, function(stream){
video.src = window.URL.createObjectURL(stream);
localMediaStream = stream;
}, errorCallback);
</script>
应用样式
使用css过滤器
<style>
video {
width: 307px;
height: 250px;
background: rgba(255,255,255,0.5);
border: 1px solid #ccc;
}
.grayscale {
+filter: grayscale(1);
}
.sepia {
+filter: sepia(1);
}
.blur {
+filter: blur(3px);
}
...
</style> <video autoplay></video> <script>
var idx = 0;
var filters = ['grayscale', 'sepia', 'blur', 'brightness',
'contrast', 'hue-rotate', 'hue-rotate2',
'hue-rotate3', 'saturate', 'invert', '']; function changeFilter(e) {
var el = e.target;
el.className = '';
var effect = filters[idx++ % filters.length]; // loop through filters.
if (effect) {
el.classList.add(effect);
}
} document.querySelector('video').addEventListener(
'click', changeFilter, false);
</script>
WebGL纹理
有兴趣的可以参考http://learningthreejs.com/blog/2012/02/07/live-video-in-webgl/ 这篇文章。
使用Audio API
window.AudioContext = window.AudioContext ||
window.webkitAudioContext; var context = new AudioContext(); navigator.getUserMedia({audio: true}, function(stream) {
var microphone = context.createMediaStreamSource(stream);
var filter = context.createBiquadFilter(); // microphone -> filter -> destination.
microphone.connect(filter);
filter.connect(context.destination);
}, errorCallback);
[译] 用HTML5捕获音频和视频的更多相关文章
- html5之音频、视频(video&audio)
音频&视频 本篇为本人的学习笔记. 在Html5之前,浏览器对于视频和音频的处理并没有一个标准.因此在网页中看到的视频,都是通过第三插件的方式嵌入的,如:QuickTime.RealPlaye ...
- css总结16:HTML5 多媒体音频(Audio)视频(video )
1 显示嵌入网页中的 MP3 文件: <embed height="50" width="100" src="horse.mp3"&g ...
- 在 HTML5 中捕获音频和视频
简介 长久以来,音频/视频捕获都是网络开发中的"圣杯".多年来,我们总是依赖于浏览器插件(Flash 或 Silverlight)实现这一点.快来看看吧! 现在轮到 HTML5 大 ...
- html5音频和视频标签
在html5之前的版本中如果想要在网页中插入音频和视频必须要安装插件才可以,比如最常见的flash插件.很多人在刚安装一款浏览器的时候都会遇到浏览器建议安装flash插件,在移动端也是如此.如果想要在 ...
- html5 音频和视频(audio And video)
1.音频和视频 Web 上的视频 直到现在,仍然不存在一项旨在网页上显示视频的标准. 今天,大多数视频是通过插件(比如 Flash)来显示的.然而,并非所有浏览器都拥有同样的插件. HTML5 规定 ...
- 【译】如何使用Vue捕获网络摄像头视频
几个月前,我一直关注着比特币的爆发并且在GDAX网站上注册账号.在注册验证的过程中,网站提示要通过计算机的网络摄像头提交我自己的一张照片作为照片ID.这是一个很酷的做法,让我思考一个问题:在网络浏览器 ...
- html5页面怎么播放音频和视频
html5页面怎么播放音频和视频 一.总结 一句话总结:html5 音频和视频标签:(audio And video),局限是不同浏览器对音频视频的格式支持很让人头痛 1.最基础的音频和视频标签的使用 ...
- HTML5——拖放 地理定位 视频 音频 新的input类型
拖放 ————> 设置元素为可拖放 拖动什么 放到何处 进行放置 实例[来回拖放] 地理定位 使用地理定位 处理错误和拒绝 在地图中显示结果 基于脚本的交互式地图 给定位置的信息 用户移动时 ...
- 20款jQuery 的音频和视频插件
分享 20 款jQuery的音频和视频插件 Blueimp Gallery: DEMO || DOWNLOAD Blueimp gallery 主要为移动设备而设计,同时也支持桌面浏览器.可定制视频和 ...
随机推荐
- [转帖].net 4.8 将不再支持win7 win8 版本
ZT:https://blogs.msdn.microsoft.com/dotnet/2018/07/18/announcing-net-framework-4-8-early-access-buil ...
- [转帖] Oracle JDK 11 正式发布.. 版本号真快
Java 11 / JDK 11 正式发布! oschina 发布于 2018年09月26日 收藏 19 评论 38 在您的既有IT基础设施上按需构建人工智能更高效>>> 美 ...
- docker-py安装
linux: pip install docker-py
- Linux环境下安装配置Mysql
首先我们的使用的是linux的 centOS6 版本 安装mysql: 1.查看有没有安装包 yum list mysql* 2.进行安装mysql:一般我们在服务器端安装的都是服务端( mysql- ...
- Memcache介绍与应用场景
一:概念介绍 Memcache是一个高性能的分布式的内存对象缓存系统,通过在内存里维护一个统一的巨大的hash表,它能够用来存储各种格式的数据,包括图像.视频.文件以及数据库检索的结果 ...
- 通过ClientDataSet复制表的结构及数据
1. 需要2个ClientDataSet组件: 2. clientDataSet1连接目标表,clientDataSet2连接源表,如果无法直接连接,使用DataSetProvider进行桥接: ...
- 最新wireshark抓包教程
http://jingyan.baidu.com/article/d71306350f213b13fdf475b9.html 大家都知道,sniffer是一款收费产品, 要真正的学会使用,因为有许多的 ...
- JS的强制类型转换
将值从一种类型转换为另一种类型通常称为类型转换,这是显式的情况,隐式的情况称为强制类型转换. JavaScript中的强制类型转换总是返回标量基本类型值,如字符串.数字和布尔值,不会返回对象和函数. ...
- Redis学习基础一
今天开始系统的学习redis基础知识,以往只是看redis的手册,貌似总是记不住.这次尝试手记笔记,使得印象更加深刻,从零开始学习.看是很慢,其实很快哟. 一.什么是Redis 至于什么是redis, ...
- pytorch文档阅读(一)
本章主要针对pytorch0.4.0英文文档的前两节,顺序可能有些不一样: torch torch.Tensor 张量 Tensors Data type CPU tensor GPU tensor ...