最近发现我写的都是乱七八糟的,觉得应该给大家带点福利,于是写了这篇

背景:最近想做个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 选择前置摄像头,选择后置摄像头的更多相关文章

  1. android实现前置后置摄像头相互切换

    首先自定义一个继承自SurfaceView并且实现了SurfaceHolder.Callback接口的组件: public class CameraView extends SurfaceView i ...

  2. win 10 禁用后置摄像头

    2.双摄像头电脑,甄别时默认开启的是后置摄像头,识别不到人脸. (1)更换设备参加甄别: (2)自行调整:停用电脑后置摄像头,停用后甄别时会默认调取前置摄像头: 以下操作适用于Windows surf ...

  3. uwp之拍照(使用后置摄像头)

    参考:wp8.1之拍照(获取焦点,使用后置摄像头) uwp开启摄像头要借助CaptureElement呈现来自捕获设备(如照相机或网络摄像机)的流.今天讲讲如何打开摄像头,获取焦点,以及拍照.废话不多 ...

  4. wp8.1之拍照(获取焦点,使用后置摄像头)

    wp8.1 没有像wp8一样直接用启动器开启摄像头,他要开启摄像头要借助CaptureElement呈现来自捕获设备(如照相机或网络摄像机)的流.今天讲讲如何打开摄像头,获取焦点,以及拍照.废话不多说 ...

  5. C++中前置操作符和后置操作符的重载

    1,C 语言中讨论了原生含义,C++ 中有必要考虑前置.后置操作符能够重载,有何问题: 2,值得思考的问题: 1,下面的代码有没有区别?为什么? 1,i++  // i 的值作为返回值,i 自增 1: ...

  6. Thinkphp入门 二 —空操作、空模块、模块分组、前置操作、后置操作、跨模块调用(46)

    原文:Thinkphp入门 二 -空操作.空模块.模块分组.前置操作.后置操作.跨模块调用(46) [空操作处理] 看下列图: 实际情况:我们的User控制器没有hello()这个方法 一个对象去访问 ...

  7. thinkPHP 空模块和空操作、前置操作和后置操作 详细介绍(十四)

    原文:thinkPHP 空模块和空操作.前置操作和后置操作 详细介绍(十四) 本章节:介绍 TP 空模块和空操作.前置操作和后置操作 详细介绍 一.空模块和空操作 1.空操作 function _em ...

  8. eas之dep的前置脚本和后置脚本

    dep的前置脚本和后置脚本,什么时候写,是这样解释的:    前置脚本是在方法前执行,后置脚本是在方法后执行    1.比如保存扩展,如果你要在保存前校验某个字段的值,你要在前置脚本中写,如果要保存后 ...

  9. thinkPHP 空模块和空操作、前置操作和后置操作 具体介绍(十四)

    本章节:介绍 TP 空模块和空操作.前置操作和后置操作 具体介绍 一.空模块和空操作 1.空操作 function _empty($name){ $this->show("$name ...

  10. C++语法小记---前置操作符和后置操作符

    前置操作符和后置操作符 单独的"++i"和"i++"是否有区别 对于基本类型: 二者没有区别,因为编译器会对代码进行优化,二者的汇编代码完全相同 对于类类型: ...

随机推荐

  1. HTML+JavaScript实现链式运动特效

    在学习js的过程中,发现这家伙做特效真是不错,尽管说眼下水平还不够,只是也能写点简单的效果. 今天分享一个简单的运动框架.然后利用这个框架实现简单的链式运动特效. 1.move.js 在运动框架中.主 ...

  2. 蓝牙中文API文档

    蓝牙是一种低成本.短距离的无线通信技术.对于那些希望创建个人局域网(PANs)的人们来说,蓝牙技术已经越来越流行了.每个个人局域网都在独立设备的周围被动态地创建,并且为蜂窝式电话和PDA等设备提供了自 ...

  3. 求字符串A与字符串B的最长公共字符串(JAVA)

    思路:引入一个矩阵的思想,把字符串A(长度为m)当成矩阵的行,把字符串B(长度为n)当矩阵的列.这样就构成一个m*n的矩阵.若该矩阵的节点相应的字符同样,即m[i]=n[j]时.该节点值为1:当前字符 ...

  4. EAS开发

    WAFII中的 数据获取与传输 首先看实例代码: DataAction:function(){ //获取选中所有列的id var selectedIds = waf("#grid" ...

  5. python求pi的方法

    来自 #_*_ coding=utf-8 *_* ## {{{ http://code.activestate.com/recipes/578130/ (r5) def pi(places=10): ...

  6. Load和CPU利用率是如何算出来的 (转发)

    本文内容遵从CC版权协议, 可以随意转载, 但必须以超链接形式标明文章原始出处和作者信息及版权声明网址: http://www.penglixun.com/tech/system/how_to_cal ...

  7. 【MySQL】设置字符集UTF-8(解决)

    1.检查你需要的字符集,GBK或者UTF8 2.数据库是否是UTF8, 3.数据表是否是UTF8 4.模板是否设置了UTF-8 以上都没设置错误,那么继续往下看: 进入目标数据库,使用语句: SHOW ...

  8. 利用POI进行Excel的导出

    需求:将用户的违约金信息导出为excel表格格式 步骤 1. 数据库中增加按钮的值(注意上级编号要和页面隐藏域中的相等) DZ内容(页面加载时根据SJBH查询数据库内容,读取DZ字段信息并加载样式及方 ...

  9. [1-1] 把时间当做朋友(李笑来)Chapter 1 【心智的力量】 摘录

    今天开了读书笔记这一专题,主要是对自己今后读的书有一个小小的记录,也为解决自己读书多年的存在的一些习惯的问题. 打小就喜欢书,可能最早的书是家人买的看图识动物.还记得七八岁时见书摊上的书时赖着不走央求 ...

  10. Arm Cache学习总结

    cache,高速缓存,其原始意义是指访问速度比一般随机存取内存(RAM)快的一种RAM,通常它不像系统主存那样使用DRAM技术,而使用昂贵但较快速的SRAM技术. 1.cache映射方式 cache中 ...