getUserMedia API

特别有趣的一个 API，能够调用电脑的摄像头，未来这个 API 将被广泛用来让浏览器和用户之间互动。

如果 <video> 标签和 Canvas 现结合 就能在浏览器中拍摄照片了。（你不是在说废话吧  ）

直接看代码  ：

 <html>

 <body onload="load()">

     <video id="video" style="background: darkblue; width: 500px;height: 500px;"></video>

 </audio>

 <script>

   window.addEventListener("DOMContentLoaded",function(){

         var v = document.getElementById("video");

       var vobj = {"video" : true}

         ///监听

           if(navigator.getUserMedia){

               navigator.getUserMedia(vobj , function(Mstream){

                   v.src =  Mstream ;

                   v.play();

               },function(error){

                   console.log(error.code)

               })

       }else if(navigator.webkitGetUserMedia){

           navigator.webkitGetUserMedia(vobj , function(Mstream){

               v.src = window.webkitURL.createObjectURL(Mstream);

               v.play()

           },function(error){

                   console.log(error.code)

               })

       }

   },false)

 </script>

 </body>

 </html>

getUserMedia API的更多相关文章

  1. getUserMedia API及HTML5 调用摄像头和麦克风

    getUserMedia API简介 HTML5的getUserMedia API为用户提供访问硬件设备媒体(摄像头.视频.音频.地理位置等)的接口,基于该接口,开发者可以在不依赖任何浏览器插件的条件 ...

  2. Safari支不支持HTML5录音？ 现在浏览器中最好的解决方案是WebRTC下的 navigator.getUserMedia API。

    先放结论:Safari支不支持HTML5录音? ——据我调查,不支持. 现在浏览器中最好的解决方案是WebRTC下的 navigator.getUserMedia API. 可是当使用Can I us ...

  3. getUserMedia API及HTML5 调用手机摄像头拍照

    getUserMedia API简介 HTML5的getUserMedia API为用户提供访问硬件设备媒体(摄像头.视频.音频.地理位置等)的接口,基于该接口,开发者可以在不依赖任何浏览器插件的条件 ...

  4. 使用 getUserMedia API获取麦克风和相机等流媒体

    概览 mediaDevices 是 Navigator 对象的只读属性,一个单列对象,可以连接访问相机和麦克风,屏幕共享等媒体输入设备 方法 enumerateDevices 请求一个可用的媒体输入和 ...

  5. 另5个你不知道的HTML5接口API

    原文地址: 5 More HTML5 APIs You Didn’t Know Existed 演示地址: 全屏API Demo 原文日期: 2012年11月08日 翻译日期: 2013年08月13日 ...

  6. Web开发者的最爱 5个超实用的HTML5 API

    摘要:毫无疑问,HTML5已经成为当今最流行的一门技术,尤其是Web开发者们对HTML5的兴趣是日趋渐浓.HTML5的许多功能也都能在现代浏览器中得以实现.然而,作为开发者,除了关注HTML5的功能和 ...

  7. WebRTC开发基础（WebRTC入门系列1：getUserMedia）

    什么是WebRTC WebRTC由IETF(Internet Engineering Task Force——互联网工程任务组)和W3C(World Wide Web Consortium——万维网联 ...

  8. 你可能不知道的5 个强大的HTML5 API 函数

    HTML5提供了一些非常强大的JavaScript和HTML API,来帮助开发者构建精彩的桌面和移动应用程序.本文将介绍5个新型的API,希望对你的开发工作有所帮助. 1.  全屏API(Fulls ...

  9. 全屏API接口

    HTML5的诞生给我们提供了很多精彩的JavaScript和HTML新功能和新特征.有些新特征我们已知多年并大量的使用,而另外一些主要是用在前沿的手机移动技术上,或者桌面应用中起辅助作用.不管这些HT ...

随机推荐

  1. 树莓派（Arduino）仿真软件 —— Fritzing

    Fritzing 官网:Fritzing Fritzing 下载地址:Fritzing Download windows 下降 zip 文件解压后,免安装双击 exe 即可运行:

  2. EF各版本增删查改及执行Sql语句

    自从我开始使用Visual Studio 也已经经历了好几个版本了,而且这中间EF等框架的改变也算是比较多的.本篇文章记录下各个版本EF执行Sql语句和直接进行增删查改操作的区别,方便自己随时切换版本 ...

  3. [BZOJ1022][SHOI2008]小约翰的游戏

    bzoj luogu sol 显然这个玩意儿和普通\(Nim\)游戏是有区别的. 形式化的,\(Nim\)游戏的关键在于决策集合为空者负,而这里的决策集合为空者胜. 所以就显然不能直接用\(SG\)函 ...

  4. bzoj1249: SGU277 HERO 动态凸包

    动态维护凸包面积. //Achen #include<bits/stdc++.h> #define For(i,a,b) for(int i=(a);i<=(b);i++) #def ...

  5. Phong光照模型的Shader实现

    计算反射向量 Phong用到的是反射向量,计算反射向量的公式是 R = 2*N(dot(N, L)) - L 这个公式是根据向量的投影公式以及平行四边形法则推导出来的 详细步骤请看这篇文章,讲的非常好 ...

  6. [转]NME Android目标中文输入问题完美解决！

    最近研究了一下haxe,发现蛮牛逼的,转几篇知识帖 haXe开发笔记:中文问题的小结 * .hx源文件中如果包含中文,要保存成UTF-8编码才能够正确被haXe编译器解析,是否包含BOM(Byte O ...

  7. 关于postman、postman interceptor的安装、配置问题

    由于app中有一些鉴权问题,需要携带浏览器的cookie. 不然的话不能够正确测试接口,就在chrome(这里下载的来源是Google商店)中添加了postman interceptor插件. 然后发 ...

  8. webrtc windows下的编译

    mkdir webrtc-checkoutcd webrtc-checkout set DEPOT_TOOLS_WIN_TOOLCHAIN=0set GYP_GENERATORS=ninjaset G ...

  9. Oracle导出导入

    导出 exp 用户名/密码 file=文件名.dmp full=y; 导入 imp 用户名/密码 file=文件名.dmp full=y; 使用EXPDP和IMPDP时应该注意的事项: EXP和IMP ...

  10. GXT4.0 BorderLayoutContainer布局

    T字型布局. @Override public void onModuleLoad() { BorderLayoutContainer con = new BorderLayoutContainer( ...