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++"是否有区别 对于基本类型: 二者没有区别,因为编译器会对代码进行优化,二者的汇编代码完全相同 对于类类型: ...
随机推荐
- Android应用经典主界面框架之二:仿网易新闻client、CSDN client (Fragment ViewPager)
另外一种主界面风格则是以网易新闻.凤凰新闻以及新推出的新浪博客(阅读版)为代表.使用ViewPager+Fragment,即ViewPager里适配器里放的不是一般的View.而是Fragment.所 ...
- 机器学习系列(8)_读《Nature》论文,看AlphaGo养成
作者:viewmode=contents">龙心尘 && viewmode=contents">寒小阳 时间:2016年3月. 出处:http://bl ...
- maven自动打包到tomcat 8
<build> <finalName>maven-project</finalName> <plugins> <plugin> <gr ...
- H5 Canvas | 基本操作
<canvas> - 定义使用 JavaScript 的图像绘制. p.s. ×150. getContext是DOM对象的方法,也就是原生js方法,不能用jQuery对象直接获取 ——— ...
- 尚学堂的一个用了ExtJs的页面代码
<html> <head> <meta http-equiv="Content-Type" content="tex ...
- Mybatis学习记录(六)--开发中的小问题
近期開始做项目,期间遇到一些小问题,开此贴记录一下 1.关于order by 今天写一个sql查询语句,用了order by可是一直没效果,后来才发现用了#{}取值,mybatis使用这个的话对于St ...
- 设置SSH编码为中文
http://www.qzz.in/?post=198下面是详细方法: 方法1: vi /etc/sysconfig/i18n 将内容改为 LANG="zh_CN.GB18030" ...
- 从构建分布式秒杀系统聊聊验证码 给大家推荐8个SpringBoot精选项目
前言 为了拦截大部分请求,秒杀案例前端引入了验证码.淘宝上很多人吐槽,等输入完秒杀活动结束了,对,结束了...... 当然了,验证码的真正作用是,有效拦截刷单操作,让羊毛党空手而归. 验证码 那么到底 ...
- TCP网络传输, 数据类型的问题
转载: http://blog.csdn.net/highfly591/article/details/45309239 1.采用TCP传输时, 应用层为什么要做超时重传: tcp保证数据可靠传输,传 ...
- linux下/etc/hosts 和hostname文件的区别
很过人一提到更改hostname首先就想到修改/etc/hosts文件,认为hostname的配置文件就是/etc/hosts.其实不是的. hosts文件的作用相当如DNS,提供IP地址到hostn ...