配置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. 对threading模块源码文件的解读(不全)

    # -*- coding: utf-8 -*- #python 27 #xiaodeng #对threading模块源码文件的解读(不全) import threading #类 #Thread() ...

  2. HTTP协议详解之基本认证篇

    •什么是HTTP基本认证: 桌面应用程序也通过HTTP协议跟web服务器交互,桌面应用程序一般不会使用cookie,而是把‘用户名+:+密码’用base64编码之后的string放在request中的 ...

  3. java 加密工具（产生证书）

    给Tomcat服务器应用加密: 命令:keytool -genkey -alias tomcat -keyalg RSA -genkey产生密钥对 -alias取得别名 -keyalg RSA产生密钥 ...

  4. Spark GraphX 的数据可视化

    概述 Spark GraphX 本身并不提供可视化的支持, 我们通过第三方库 GraphStream 和 Breeze 来实现这一目标 详细 代码下载:http://www.demodashi.com ...

  5. CSS3制作Freebie标签

    <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...

  6. 原创：微信小程序+WEB使用JS实现注册【60s】倒计时功能

    1.效果图: 2.页面仅仅利用了JS的相关功能,包含:wxml.js.wxss 2.1wxml页面代码: <text>绑定手机</text> <form bindsubm ...

  7. 微信小程序：input输入框和form表单几种传值和取值方式

    1.传值:index下标传值.页面navigator传值 1.index下标 实现方式是:data-index="{{index}}"挖坑及e.currentTarget.data ...

  8. WPF基础学习第一天

    格式 1.XAML格式: <Button x:Name="btnClick" Content="按钮" HorizontalAlignment=" ...

  9. HDUOJ---2112HDU Today

    HDU Today Time Limit: 15000/5000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total ...

  10. HDUOJ---三角形(组合数学)

    http://acm.hdu.edu.cn/showproblem.php?pid=1249 三角形 Time Limit: 2000/1000 MS (Java/Others)    Memory ...