配置htts之后就可以开启webRTC了。

<!DOCTYPE html>

<html>

<head>

    <title>OpenCamera</title>

</head>

<body>

    <video id="video" autoplay></video>

</body>

    <script type="text/javascript">

        var getUserMedia=(navigator.getUserMedia ||navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia);

        getUserMedia.call(navigator,{

            video:true,

            audio:true

        },function(localMediaStream){

                var video =document.getElementById('video');

                video.src=window.URL.createObjectURL(localMediaStream);

                video.onloadedmetadata=function(e){

                console.log("Label: "+localMediaStream.id);

                console.log("AudioTracks",localMediaStream.getAudioTracks());

                console.log("VideoTracks ",localMediaStream.getVideoTracks());

            };

        },function(e){console.log("Reeeejected!",e);

    });

    </script>

</html>

这里给出了一个简单的例子。需要用到H5的video标签。通过webRTC注册摄像头和麦克风，生成mediastream然后作为video的输出。

这里的id是该媒体流的唯一标识。

音频和视频被放到两个数组中。

webRTC开启摄像头的更多相关文章

  1. cef开启摄像头和录音

    参考资料:https://github.com/cztomczak/phpdesktop/wiki/Chrome-settings#command_line_switches CefSharp中文帮助 ...

  2. WebRTC从摄像头获取图片传入canvas

    WebRTC从摄像头获取图片传入canvas 前面我们已经能够利用WebRTC的功能,通过浏览器打开摄像头,并把预览的图像显示在video元素中. 接下来我们尝试从视频中截取某一帧,显示在界面上. h ...

  3. 1┃音视频直播系统之浏览器中通过WebRTC访问摄像头

    一.WebRTC的由来 对于前端开发小伙伴而言,如果用 JavaScript 做音视频处理 在以前是不可想象的,因为首先就要考虑浏览器的性能是否跟得上音视频的采集 但是 Google 作为国际顶尖科技 ...

  4. QT与opencv（二）开启摄像头

    OpenCV中的VideoCapture不仅可以打开视频.usb摄像头,还可以做很多事,例如读取流媒体文件,网络摄像头,图像序列等. 下面我简单介绍一个在Qt中用VideoCapture类打开笔记本电 ...

  5. Qt FFMPEG+OpenCV开启摄像头

    //ffmpegDecode.h #ifndef __FFMPEG_DECODE_H__ #define __FFMPEG_DECODE_H__ #include "global.h&quo ...

  6. 在WPF中开启摄像头扫描二维码(Media+Zxing)

    近两天项目中需要添加一个功能,是根据摄像头来读取二维码信息,然后根据读出来的信息来和数据库中进行对比显示数据. 选择技术Zxing.WPFMediaKit.基本的原理就是让WPFmediaKit来对摄 ...

  7. Android IOS WebRTC 音视频开发总结（八十三）-- 使用WebRTC广播网络摄像头视频（上）

    本文主要介绍WebRTC (我们翻译和整理的,译者:weizhenwei,校验:blacker),最早发表在[编风网] 支持原创,转载必须注明出处,欢迎关注我的微信公众号blacker(微信ID:bl ...

  8. [转] HTML5利用WebRTC的getUserMedia获取摄像头信息模拟拍照及视频（完整示例）

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

  9. WebRTC学习之九：摄像头的捕捉和显示

    较新的WebRTC源代码中已经没有了与VoiceEngine结构相应的VidoeEngine了,取而代之的是MeidaEngine.MediaEngine包括了MediaEngineInterface ...

随机推荐

  1. J2EE项目集成SAP的BO报表

    网上的方案: 每个用户在自己的J2EE系统的用户登陆的同时登陆bo系统,这做法的缺点是登陆bo速度慢,而且如果J2EE用户比较多的话会在bo服务器生成很多的token. 最佳方案(自己研究): 1.调 ...

  2. newInstance() 的参数版本与无参数版本

    通过反射创建新的类示例,有两种方式: Class.newInstance() Constructor.newInstance()  以下对两种调用方式给以比较说明: Class.newInstance ...

  3. 揭开JDBC的神秘面纱，让JDBC数据库的连接参数不再神秘

    1.JDBC是什么? JDBC(Java DataBase Connectivity)java数据库连接 2.JDBC可以做什么?        简单地说,JDBC 可做三件事:与数据库建立连接.发送 ...

  4. springboot + mybatis +easyUI整合案例

    概述 springboot推荐使用的是JPA,但是因为JPA比较复杂,如果业务场景复杂,例如企业应用中的统计等需求,使用JPA不如mybatis理想,原始sql调优会比较简单方便,所以我们的项目中还是 ...

  5. HighCharts/Highstock使用小结,使用汉化及中文帮助文档

       此文档是本人在开发过程图形报表时使用HighCharts所遇到的问题及解决方案 .最后附上有HighCharts中文帮助文档 HighCharts  版本:Highcharts-3.0.1 Hi ...

  6. 【laravel5.4】查询构造器对象与模型instance的互相换换

    1.查询构造器一般情况下返回对象,但是无法直接使用model类的一些方法,如toJson.toArray等 DB::table 结果转换成 model 类实例[collect 实例] public f ...

  7. 搭建Hexo博客并部署到Github

    参考: http://www.jianshu.com/p/a67792d93682 http://jingyan.baidu.com/article/d8072ac47aca0fec95cefd2d. ...

  8. jquery serialize对json的包装用法

    jquery对象.serialize()  可以多用于表单对数据封装提交 能够收表参数,形成一个json格式字符串, 前提是:必须为每一个表单项取一个name属性 对元素 设置 name属性, 然后 ...

  9. c++课程设计（日历）

    今天比较无聊,就随便找了个程序设计来做,下面是源代码,以及效果图...不喜请喷!/*题目1:年历显示. 功能要求: (1) 输入一个年份,输出是在屏幕上显示该年的日历.假定输入的年份在1940-204 ...

  10. jquerymobile 的特有 事件 和 方法 (转)

    1.触摸屏事件—— Touch events tap Triggers after a quick, complete touch event. 本人实际测试效果:轻轻点击,效果和按普通按钮差不多. ...