配置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. PLY格式介绍

    PLY是一种电脑档案格式,全名为多边形档案(Polygon File Format)或 斯坦福三角形档案(Stanford Triangle Format).  史丹佛大学的 The Digital ...

  2. servlet ServletConfig ServletContext

    ServletConfig对象 在Servlet的配置文件中,可以使用一个或者多个<init-param>标签为servlet配置一些初始化参数. 当servlet配置了初始化参数后,we ...

  3. Drupal的$messages是怎么显示的？

    Drupal的默认主题bartik会在页面顶部显示系统信息,例如警告.状态等.这个过程是如何实现的? 首先,在bartik目录下找到page.tpl.php,这是bartik主题的页面显示模板.其中有 ...

  4. python实现的、带GUI界面电影票房数据可视化程序

    代码地址如下:http://www.demodashi.com/demo/14588.html 详细说明: Tushare是一个免费.开源的python财经数据接口包.主要实现对股票等金融数据从数据采 ...

  5. 【laravel5.4+vue.js】laravel 循环三维数组，解决：htmlentities() expects parameter 1 to be string, array given

    laravel循环三维数组   +++   vue.js循环三维数组  (数据均是以三维数组形式存在的) <form-item label="权限名称" prop=" ...

  6. js常用点

    <span onClick="onDetail(this.id,'edit');"  style="cursor: hand;color:black;" ...

  7. configure: error: newly created file is older than distributed files!

    在linux下安装软件包的时候,有时候提示 configure: error: newly created file is older than distributed files!Check you ...

  8. Python练习笔记——斐波那契数列

    斐波那契数列(Fibonacci sequence),又称黄金分割数列.因数学家列昂纳多·斐波那契(Leonardoda Fibonacci)以兔子繁殖为例子而引入,故又称为“兔子数列”,指的是这样一 ...

  9. centos7 搭建go环境

    下载go #cd /home #mkdir app #cd app #wget https://storage.googleapis.com/golang/go1.9.linux-amd64.tar. ...

  10. Linux内核(1) - Kernel地图：Kconfig与Makefile

    Makefile不是Make Love 从前在学校,混了四年,没有学到任何东西,每天就是逃课,上网,玩游戏,睡觉.毕业的时候,人家跟我说Makefile我完全不知,但是一说Make Love我就来劲了 ...