HTML5 选择前置摄像头,选择后置摄像头
最近发现我写的都是乱七八糟的,觉得应该给大家带点福利,于是写了这篇
背景:最近想做个web应用,需要用到摄像头,但是发现默认一直是前置摄像头,拍照很麻烦,于是找了很多文章,居然没有人提到,只好翻墙去找外文,终于看到了HTML5的一些定义,研究以后……挺简单的,注意这句
MediaStreamTrack.getSources(gotSources);
有了这句就搞定了
html就不解释了,js里有一个兼容各个浏览器的
navigator.getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
然后是获取设备,就是上面说的需要注意的这句……研究好久才知道是这么用的……
最后选择好设备后,绑定设备,刷新就好了 源码如下,敏感部分我修改掉了,不过这个应该可以运行的
<div>
<label for='audioSource'>Audio source: </label><select id='audioSource'></select>
<label for='videoSource'>Video source: </label><select id='videoSource'></select>
<video id="me" width="160" height="120" autoplay></video>
<video id="you" width="160" height="120" autoplay></video>
</div>
<script type="text/javascript">
var videoElement = document.querySelector("video#me");
var audioSelect = document.querySelector("select#audioSource");
var videoSelect = document.querySelector("select#videoSource");
var startButton = document.querySelector("button#start"); navigator.getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia || navigator.mozGetUserMedia; function gotSources(sourceInfos) {
for (var i = 0; i != sourceInfos.length; ++i) {
var sourceInfo = sourceInfos[i];
var option = document.createElement("option");
option.value = sourceInfo.id;
if (sourceInfo.kind === 'audio') {
option.text = sourceInfo.label || 'microphone ' + (audioSelect.length + 1);
audioSelect.appendChild(option);
} else if (sourceInfo.kind === 'video') {
option.text = sourceInfo.label || 'camera ' + (videoSelect.length + 1);
videoSelect.appendChild(option);
} else {
console.log('Some other kind of source: ', sourceInfo);
}
}
} if (typeof MediaStreamTrack === 'undefined') {
alert('This browser does not support MediaStreamTrack.\n\nTry Chrome Canary.');
} else {
MediaStreamTrack.getSources(gotSources);
} function successCallback(stream) {
window.stream = stream; // make stream available to console
videoElement.src = window.URL.createObjectURL(stream);
videoElement.play();
} function errorCallback(error) {
console.log("navigator.getUserMedia error: ", error);
} function start() {
if (!!window.stream) {
videoElement.src = null;
window.stream.stop();
}
var audioSource = audioSelect.value;
var videoSource = videoSelect.value;
var constraints = {
audio: {
optional: [{ sourceId: audioSource }]
},
video: {
optional: [{ sourceId: videoSource }]
}
};
navigator.getUserMedia(constraints, successCallback, errorCallback);
} audioSelect.onchange = start;
videoSelect.onchange = start; start();
</script>
不知道这里能显示不,可以选择当前设备的音频和视频,然后切换以后会实时体现的
HTML5 选择前置摄像头,选择后置摄像头的更多相关文章
- android实现前置后置摄像头相互切换
首先自定义一个继承自SurfaceView并且实现了SurfaceHolder.Callback接口的组件: public class CameraView extends SurfaceView i ...
- win 10 禁用后置摄像头
2.双摄像头电脑,甄别时默认开启的是后置摄像头,识别不到人脸. (1)更换设备参加甄别: (2)自行调整:停用电脑后置摄像头,停用后甄别时会默认调取前置摄像头: 以下操作适用于Windows surf ...
- uwp之拍照(使用后置摄像头)
参考:wp8.1之拍照(获取焦点,使用后置摄像头) uwp开启摄像头要借助CaptureElement呈现来自捕获设备(如照相机或网络摄像机)的流.今天讲讲如何打开摄像头,获取焦点,以及拍照.废话不多 ...
- wp8.1之拍照(获取焦点,使用后置摄像头)
wp8.1 没有像wp8一样直接用启动器开启摄像头,他要开启摄像头要借助CaptureElement呈现来自捕获设备(如照相机或网络摄像机)的流.今天讲讲如何打开摄像头,获取焦点,以及拍照.废话不多说 ...
- C++中前置操作符和后置操作符的重载
1,C 语言中讨论了原生含义,C++ 中有必要考虑前置.后置操作符能够重载,有何问题: 2,值得思考的问题: 1,下面的代码有没有区别?为什么? 1,i++ // i 的值作为返回值,i 自增 1: ...
- Thinkphp入门 二 —空操作、空模块、模块分组、前置操作、后置操作、跨模块调用(46)
原文:Thinkphp入门 二 -空操作.空模块.模块分组.前置操作.后置操作.跨模块调用(46) [空操作处理] 看下列图: 实际情况:我们的User控制器没有hello()这个方法 一个对象去访问 ...
- thinkPHP 空模块和空操作、前置操作和后置操作 详细介绍(十四)
原文:thinkPHP 空模块和空操作.前置操作和后置操作 详细介绍(十四) 本章节:介绍 TP 空模块和空操作.前置操作和后置操作 详细介绍 一.空模块和空操作 1.空操作 function _em ...
- eas之dep的前置脚本和后置脚本
dep的前置脚本和后置脚本,什么时候写,是这样解释的: 前置脚本是在方法前执行,后置脚本是在方法后执行 1.比如保存扩展,如果你要在保存前校验某个字段的值,你要在前置脚本中写,如果要保存后 ...
- thinkPHP 空模块和空操作、前置操作和后置操作 具体介绍(十四)
本章节:介绍 TP 空模块和空操作.前置操作和后置操作 具体介绍 一.空模块和空操作 1.空操作 function _empty($name){ $this->show("$name ...
- C++语法小记---前置操作符和后置操作符
前置操作符和后置操作符 单独的"++i"和"i++"是否有区别 对于基本类型: 二者没有区别,因为编译器会对代码进行优化,二者的汇编代码完全相同 对于类类型: ...
随机推荐
- Google Maps API v2密钥申请
1. 进入到Google APIs Console页面 https://code.google.com/apis/console/ 点击左边导航栏的Seivices进入 在All services 的 ...
- [转]mysql 常用命令集锦[绝对精华]
测试环境:mysql 5.0.45 [注:可以在mysql中通过mysql> SELECT VERSION();来查看数据库版本] 一.连接MYSQL. 格式: mysql -h主机地址 -u用 ...
- silverlight客户端保存文件乱码问题
最近做一个项目,有一个需求是这样的:服务端从数据库里获得数据,客户端保存为Excel文件 最初解决方案:服务端获得数据,通过ExcelPackage,Convert.ToBase64String将by ...
- 启动ActiveMQ时报端口被占用异常
配置好ActiveMQ后,前几次都启动成功.有一天启动时发现启动不成功,查看报错日志发现出现如下提示: Failed to start Apache ActiveMQ (localhost, ID:* ...
- nginx做正向代理(Centos7,支持http和https)
默认的情况下,使用nginx做正向代理可以解析http请求, 对于诸如baidu.com这样的https请求,nginx默认并不支持,不过我们可以借助第三方模块来实现. 1.先说默认情况下的代理配置 ...
- Linux 目录和文件操作
Linux常用命令--目录和文件操作 [目录]删除.复制.移动 : 1.删除文件夹用:rmdir 文件夹名 但是rmdir不能删除非空的文件夹,那如何删除非空文件夹呢: 2.通常情况下,删除文件用:r ...
- bootstrap学习笔记 Bootstrap 列表组
本文将介绍列表组.列表组件用于以列表形式呈现复杂的和自定义的内容.创建一个基本的列表组的步骤如下: 向元素ul 添加class list-group 向li添加class list-group-ite ...
- 工作总结 .ToString("000000")
; ");//000123 指定格式 Console.WriteLine(ssp); ; ");//123456789 超过了返回原值 Console.WriteLine(ss);
- 自制MVC之工具类插件一
1).BreakRomoteURLAttribute 提交或交互的URL数据是否来源于其它地方,站内提交,防止跨站 2). DataAttribute 取得post或get提交的数据.如果没有特殊设置 ...
- SQL语句创建相同结构的表
--Oracle的语句create table sa_salaryRecord as select * from sa_salary where 1=2; --MSSQL的语句select * int ...