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. BestCoder Round #18(hdu5105)Math Problem(高中数学)

    最大值无非就是在两个端点或极值点处取得. 我注意讨论了a=0和b=0,却忽略了极值点可能不在L到R的范围内这一问题.被Hack了. #include<iostream> #include& ...

  2. javascript.history.go();

    转自:http://www.mikebai.com/Article/2009-11/757.html <input type=button value=刷新 onclick="wind ...

  3. 机器学习：YOLO for Object Detection (二)

    之前介绍了 YOLO-v1 单纯的利用一个卷积网络完成了目标检测,不过 YOLO-v1 虽然速度很快,但是比起其他的网络比如 Fast R-CNN 检测的准确率还是差不少,所以作者又提出了改良版的 Y ...

  4. git常用命令收藏

    git init //初始化本地git环境 git clone XXX//克隆一份代码到本地仓库 git pull //把远程库的代码更新到工作台 git pull --rebase origin m ...

  5. Android Studio 学习 - Activity生命周期

    落下两晚了,继续学习…… 先粘贴2张官方给的流程图: ------------------------------------------------------------------------- ...

  6. [UOJ171][WC2016]挑战NPC

    uoj luogu bzoj sol 你可以列一个表格. 一个框子里放球的数量 0 1 2 3 对"半空框子"数量的贡献 1 1 0 0 把一个框子拆三个点.两两之间连边. 会发现 ...

  7. [BZOJ1242]Fishing Net

    dbzoj vjudge1 vjudge2 sol 给一个无向图,求判定是不是弦图. sol 还是弦图那套理论. 复杂度是\(O(n^2)\)的,因为\(m\)本质上和\(n^2\)是同级的. cod ...

  8. python IOError: cannot identify image file

    转:http://blog.csdn.net/sinat_25704999/article/details/50118465

  9. 用php实现斐波那契数列

    //1 1 2 3 5 8 13 ....//观察数列 你会发现下一个数是如何得来的 //  f(3) = f(2) + f(1)      f(4)=f(3)+f(2)           f(18 ...

  10. C# 读xml注释或过滤xml注释

    有这么个需求: 要统计所有的配置文件,这些配置文件都xml格式,并把这些配置写到数据表里,如果有注释要把这些注释写到对应配置对象的描述字段上 <item id="" key= ...