getUserMedia/WebRTC助力跨浏览器摄像头捕获影像
来源:互联网 发布:java设计模式pdf 编辑:程序博客网 时间:2024/04/27 17:04
http://mozilla.com.cn/thread-45435-1-1.html
概览
随着Firefox支持getUserMedia,三个主要的桌面浏览器能够实现无需使用插件即可从摄像头中获取数据。因为现在仍处于初期阶段,所以浏览器之间的实现略有不同。下面的例子展示如何应对这些不同,并用一个脚本来帮助你做这些繁重的工作,但是首先必须了解这三款浏览器都是怎么工作的。
getUserMedia 是通过在about:config中将 media.peerconnection.enabled option 设置为 true 启用的.
开始编码时会遇到各种差异,不过没关系,现在就让我们一起来一步一步看怎么解决这些问题。成功使用getUserMedia将按如下步骤为大家一一介绍:
1. 一点HTML5小知识
2. 特征检测
3. 视频流
4. 准备就绪
5. 最后一点小提示
深吸一口气哦,好戏即将开始…
一点HTML5小知识
在这个简短的教程中,我们的主要任务是只是为了将一个动态图像显示在一个页面中。视频都是普通视频,所以第一步是在HTML文件中引入一个简单的<video>元素:
就这样。没有控制,没有源码,什么都没有。
在JavaScript中,需要得到关联到<video>元素,我们可以这样做(或者用一个id):
特征检测
在我们检查getUserMedia支持时事情就变得有趣起来。我们绝对不会使用不可靠的用户代理去做嗅探 – 绝不,我们将用检查navigator.getUserMedia对象这种最简单的方式来实现。它是在Firefox和Chrome对前缀中,所以在所有的浏览器中将其分配到一个共同的对象会非常的方便。比如为window.URL对象采用这种方式,以便稍后使用。
navigator.getUserMedia= navigator.getUserMedia|| navigator.webkitGetUserMedia|| navigator.mozGetUserMedia|| navigator.msGetUserMedia;window.URL= window.URL|| window.webkitURL|| window.mozURL|| window.msURL;
然后实际存在性的检查如下:
if(navigator.getUserMedia){// Call the getUserMedia method here}else{ console.log('Native device media streaming (getUserMedia) not supported in this browser.');// Display a friendly "sorry" message to the user.}
如果getUserMedia支持,我们需要为它传递三个参数 – 一个选项对象,一个成功的回调函数和一个错误回调函数。需要注意的是错误回调函数在Firefox是必须的,但在Opera和Chrome是可选的。选项参数是一个JSON风格的对象,指定是否要使用音频,视频或两者都将使用。下面的示例代码仅适用于视频:
navigator.getUserMedia({video:true}, successCallback, errorCallback);
使用摄像机请求时的对话框
Firefox中的对话框
Chrome中的对话框
Opera中的对话框
视频流
到目前为止,一切都很好,让我们看看接下来会发生什么。成功回调函数接收一个参数,包含摄像头的视频流,我们需要将该视频流发送到我们的<video>元素。为此,我们设定它的src属性,但有几件事情要牢记:
Firefox使用mozSrcObject的属性,而Opera和Chrome使用src属性。
Chrome使用createObjectURL的方法,而Firefox和Opera直接发送视频流。
在Firefox中,video.mozSrcObject最初为null,而不是未定义的,所以我们可以靠这个来检测Firefox的支持(hat tip to Florent)。一旦视频流知道去哪儿了,我们就可以告诉视频流播放了。
准备就绪
基本工作准备完毕。添加一个简单的错误回调函数,我们就拥有了一个可以工作的跨浏览器的脚本,它看起来像这样:
(注:此为部分截图,源码看这里)
在GitHub上获取
为了方便大家学习跨网络浏览器的方式访问getUserMedia,我们把一个可以工作的例子放在了GitHub上:GumWrapper。
最后一个小提示
如果你想要使用照相机流做更炫的事情,比如捕获静止图像或添加奇炫的效果,你可能会希望将数据传输到在画布背景下。您可以使用drawImage()来实现,在这种情况下,你需要视频的尺寸。这些都可以通过的video.videoWidth和video.videoHeight属性来活动,但要小心 - 他们只当浏览器有这些跟视频流相关的信息时才能设置。这意味着你必须监听某些事件,然后才能获取这些属性。有如下相关的事件,它们总是按以下顺序触发:
1. play
2. loadedmetadata
3. loadeddata
4. playing
Video.play()方法被调用后,play事件被触发,但是在视频开始播放之前有可能会有轻微的延迟。这就是palying事件被触发的情况,但请注意,当流或视频播放时,它在Firefox中会多次触发。在此之前,有一些数据事件,首先是只对metadata,但是在Firefox中它并不包括视频尺寸。因此,最可靠的可侦听事件是loadeddata的事件 – 你肯定能知道视频流的宽度和高度。你可以这样编写代码:
顺便说一句,你也可以使用流的尺寸做进一步的错误检查,例如检查是否宽度和高度都大于0。这将避免出现某些问题,如用户的网络摄像头被破坏或根本就没有插上。
这样就大功告成啦。我敢肯定,随着技术的成熟,浏览器之间的差异会消失。在目前的情况下,上面的代码应该可以根据你的需要帮助您。
英文原文
概览
随着Firefox支持getUserMedia,三个主要的桌面浏览器能够实现无需使用插件即可从摄像头中获取数据。因为现在仍处于初期阶段,所以浏览器之间的实现略有不同。下面的例子展示如何应对这些不同,并用一个脚本来帮助你做这些繁重的工作,但是首先必须了解这三款浏览器都是怎么工作的。
getUserMedia 是通过在about:config中将 media.peerconnection.enabled option 设置为 true 启用的.
开始编码时会遇到各种差异,不过没关系,现在就让我们一起来一步一步看怎么解决这些问题。成功使用getUserMedia将按如下步骤为大家一一介绍:
1. 一点HTML5小知识
2. 特征检测
3. 视频流
4. 准备就绪
5. 最后一点小提示
深吸一口气哦,好戏即将开始…
一点HTML5小知识
在这个简短的教程中,我们的主要任务是只是为了将一个动态图像显示在一个页面中。视频都是普通视频,所以第一步是在HTML文件中引入一个简单的<video>元素:
就这样。没有控制,没有源码,什么都没有。
在JavaScript中,需要得到关联到<video>元素,我们可以这样做(或者用一个id):
特征检测
在我们检查getUserMedia支持时事情就变得有趣起来。我们绝对不会使用不可靠的用户代理去做嗅探 – 绝不,我们将用检查navigator.getUserMedia对象这种最简单的方式来实现。它是在Firefox和Chrome对前缀中,所以在所有的浏览器中将其分配到一个共同的对象会非常的方便。比如为window.URL对象采用这种方式,以便稍后使用。
navigator.getUserMedia= navigator.getUserMedia|| navigator.webkitGetUserMedia|| navigator.mozGetUserMedia|| navigator.msGetUserMedia;window.URL= window.URL|| window.webkitURL|| window.mozURL|| window.msURL;
然后实际存在性的检查如下:
if(navigator.getUserMedia){// Call the getUserMedia method here}else{ console.log('Native device media streaming (getUserMedia) not supported in this browser.');// Display a friendly "sorry" message to the user.}
如果getUserMedia支持,我们需要为它传递三个参数 – 一个选项对象,一个成功的回调函数和一个错误回调函数。需要注意的是错误回调函数在Firefox是必须的,但在Opera和Chrome是可选的。选项参数是一个JSON风格的对象,指定是否要使用音频,视频或两者都将使用。下面的示例代码仅适用于视频:
navigator.getUserMedia({video:true}, successCallback, errorCallback);
使用摄像机请求时的对话框
Firefox中的对话框
Chrome中的对话框
Opera中的对话框
视频流
到目前为止,一切都很好,让我们看看接下来会发生什么。成功回调函数接收一个参数,包含摄像头的视频流,我们需要将该视频流发送到我们的<video>元素。为此,我们设定它的src属性,但有几件事情要牢记:
Firefox使用mozSrcObject的属性,而Opera和Chrome使用src属性。
Chrome使用createObjectURL的方法,而Firefox和Opera直接发送视频流。
在Firefox中,video.mozSrcObject最初为null,而不是未定义的,所以我们可以靠这个来检测Firefox的支持(hat tip to Florent)。一旦视频流知道去哪儿了,我们就可以告诉视频流播放了。
准备就绪
基本工作准备完毕。添加一个简单的错误回调函数,我们就拥有了一个可以工作的跨浏览器的脚本,它看起来像这样:
(注:此为部分截图,源码看这里)
在GitHub上获取
为了方便大家学习跨网络浏览器的方式访问getUserMedia,我们把一个可以工作的例子放在了GitHub上:GumWrapper。
最后一个小提示
如果你想要使用照相机流做更炫的事情,比如捕获静止图像或添加奇炫的效果,你可能会希望将数据传输到在画布背景下。您可以使用drawImage()来实现,在这种情况下,你需要视频的尺寸。这些都可以通过的video.videoWidth和video.videoHeight属性来活动,但要小心 - 他们只当浏览器有这些跟视频流相关的信息时才能设置。这意味着你必须监听某些事件,然后才能获取这些属性。有如下相关的事件,它们总是按以下顺序触发:
1. play
2. loadedmetadata
3. loadeddata
4. playing
Video.play()方法被调用后,play事件被触发,但是在视频开始播放之前有可能会有轻微的延迟。这就是palying事件被触发的情况,但请注意,当流或视频播放时,它在Firefox中会多次触发。在此之前,有一些数据事件,首先是只对metadata,但是在Firefox中它并不包括视频尺寸。因此,最可靠的可侦听事件是loadeddata的事件 – 你肯定能知道视频流的宽度和高度。你可以这样编写代码:
顺便说一句,你也可以使用流的尺寸做进一步的错误检查,例如检查是否宽度和高度都大于0。这将避免出现某些问题,如用户的网络摄像头被破坏或根本就没有插上。
这样就大功告成啦。我敢肯定,随着技术的成熟,浏览器之间的差异会消失。在目前的情况下,上面的代码应该可以根据你的需要帮助您。
英文原文
0
上一篇:手机摄像头拍照 Cross-browser camera capture with getUserMedia/WebRTC
下一篇:Aircrack-ng——Tutorial
相关热门文章
- Android之开发环境搭建
- Android自定义View的实现...
- AndroidManifest.xml配置文件...
- Android相对布局+圆角按钮+Sha...
- 查看Android应用包名package和...
- linux dhcp peizhi roc
- 关于Unix文件的软链接
- 求教这个命令什么意思,我是新...
- sed -e "/grep/d" 是什么意思...
- 谁能够帮我解决LINUX 2.6 10...
给主人留下些什么吧!~~
评论热议
0 0
- getUserMedia/WebRTC助力跨浏览器摄像头捕获影像
- getUserMedia/WebRTC助力跨浏览器摄像头捕获影像
- getUserMedia/WebRTC助力跨浏览器摄像头捕获影像
- 手机摄像头拍照 Cross-browser camera capture with getUserMedia/WebRTC
- HTML5利用WebRTC的getUserMedia获取摄像头信息模拟拍照及视频(完整示例)
- WebRTC 初览(2) getUserMedia 介绍一
- WebRTC 初览(2) getUserMedia 介绍二
- WebRTC 初览(3) getUserMedia 介绍三
- WebRTC开发基础(WebRTC入门系列1:getUserMedia)
- 关闭navigator.getUserMedia打开的摄像头
- HTML5调用手机摄像头拍照 - getUserMedia.js
- html5调用摄像头使用Getusermedia和canvas
- WebRTC 之视频捕获——浏览器显示
- WebRTC 入门 02 通过浏览器使用摄像头 I
- 捕获摄像头
- HTML5使用 getUserMedia方法调用本地摄像头拍照
- Webrtc 音频捕获
- 《学习OpenCV》摄像头影像处理
- Displaying an image with EJS in node.js/express
- HTML5调用手机摄像头拍照 - getUserMedia.js
- 手机摄像头拍照 Cross-browser camera capture with getUserMedia/WebRTC
- am335 启动流程
- 通过登录触发器跟踪会话产生trace文件
- getUserMedia/WebRTC助力跨浏览器摄像头捕获影像
- 反射(二)反射工厂
- Aircrack-ng——Tutorial
- Hashcat——Cracking WPA2 WPA with Hashcat in Kali Linux
- MFC 单文档标题栏菜单按钮重绘
- bzoj3594&&方伯伯的玉米田
- Airodump-ng——Description
- RxVolley-初认识
- 深入浅出 Cocoa 之 Core Data
原创粉丝点击
热门IT博客
热门问题
老师的惩罚
人脸识别
我在镇武司摸鱼那些年
重生之率土为王
我在大康的咸鱼生活
盘龙之生命进化
天生仙种
凡人之先天五行
春回大明朝
姑娘不必设防,我是瞎子
竹器长粉虫怎么办
竹子摇摆椅生虫怎么办
竹制品生虫怎么办
竹萝生虫子怎么办
竹床生虫子怎么办
竹衣架蛀虫怎么办
竹蛀虫怎么办
竹椅子蛀虫怎么办
花分叉怎么办
盆栽干叶子怎么办
水培竹子瘦长怎么办
富贵竹越长越高怎么办
榕树烂根怎么办
莲花竹烂根怎么办
水培莲花竹烂根怎么办
辣椒掉叶子怎么办
转运竹水臭怎么办
转运竹根泡臭了怎么办
步步高竹变黄怎么办
富贵竹水里有虫怎么办
碗莲长虫子怎么办
荷花长蚜虫怎么办
竹子黄叶怎么办
步步高竹子黄了怎么办
竹叶子发黄怎么办
富贵竹有虫怎么办
毛竹叶子卷怎么办
棕树叶子发黄怎么办
水泡富贵竹黄叶怎么办
富贵竹黄叶了怎么办
富贵竹有黄叶怎么办
竹叶发黄怎么办
竹叶干枯怎么办
竹子长虫怎么办
干竹子长虫怎么办
家里竹子长虫怎么办
竹子里面长虫怎么办
竹子床生虫全是粉末怎么办
竹子生虫子怎么办
桂花小叶病怎么办
毛竹太多怎么办