【WebRTC】第二篇:采集音视频数据

前言



这一篇内容主要是通过调用本地摄像头和麦克风实现对音视频流的采集。在实现之前,我们要先了解采集音视频数据的一个非常重要的API—getUserMedia()。

这个API会提示用户给予使用媒体输入的许可,媒体输入会产生一个MediaStream,里面包含了请求的媒体类型的轨道。

【注】这需要注意一点的是这个API原来的用法navigator.getUserMedia()已废弃,也已从web标准中删除,虽然一些浏览器目前还支持,但还是建议尽量不要使用这种方法,因为不确定什么时候它就不支持了。这个API现在的用法是

navigator.mediaDevices.getUserMedia()。

语法格式

var promise = navigator.mediaDevices.getUserMedia(constraints);

参数



constraints 参数是一个包含video和audio两个成员的对象,用于说明请求的媒体说明,必须至少一个类型或同时两个被指定。

比如同时请求不带任何参数的音频和视频

var constraints = { audio: true, video: true }

也可对视频设置相应的参数来满足自己的需求

{  audio: true,  video: { width: 1280, height: 720 }}

如果是移动设备还可设置前置摄像头和后置摄像头

//使用前置摄像头
{ audio: true, video: { facingMode: "user" } }

//使用后置摄像头
{ audio: true, video: { facingMode: "environment" } }

当然还有一些其他设置,就不一一例举了。

使用方法

navigator.mediaDevices.getUserMedia(constraints)
.then(function(stream) {
  /* 使用这个stream stream */
})
.catch(function(err) {
  /* 处理error */
});

采集音视频流小案例



了解了这个API后,自己就可以做一个获取本地音视频流的小案例了。

代码如下:

 1 <!DOCTYPE html>
 2 <html>
 3   <head>
 4       <meta charset="UTF-8">
 5       <title>采集本地音视频流</title>
 6   </head>
 7   <body>
 8     <div>
 9         <video autoplay id="stream"></video>
10     </div>
11     <script>
12       var video = document.getElementById(‘stream‘);
13
14       var constraints = {
15           video: true,
16           audio: true
17       }
18       //判断浏览器支不支持getUserMedia
19       if(!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia){
20           console.log("您的浏览器不支持getUserMedia")
21       }else {
22           navigator.mediaDevices.getUserMedia(constraints)
23           .then(function(stream) {
24           video.srcObject = stream;
25         }).catch(function(err) {
26           console.log(err.name + ":" + err.message)
27         })
28       }
29     </script>
30   </body>
31 </html>

运行效果

最后欢迎大家关注我的公众号,一起学习

原文地址:https://www.cnblogs.com/wangrong1/p/12579618.html

时间: 2024-10-07 09:20:14

【WebRTC】第二篇:采集音视频数据的相关文章

第六十篇、音视频采集硬编码(H264+ACC)

使用 AVCaptureSession进行实时采集音视频(YUV.),编码 通过AVCaptureVideoDataOutputSampleBufferDelegate获取到音视频buffer- 数据 分别对音视频原始数据进行编码 传输 ViewController // // ViewController.h // H264AACEncode // // Created by ZhangWen on 15/10/14. // Copyright ? 2015年 Zhangwen. All ri

vlc-android对于通过Live555接收到音视频数据包后的处理分析

通过ndk-gdb跟踪调试vlc-android来分析从连接到RTSP服务器并接收到音视频数据包后的处理过程. 首先,从前面的文章有分析过vlc-android的处理过程通过线程函数Run()(Src/input/input.c)来处理的,代码如下: [cpp] view plaincopy static void *Run( void *obj ) { input_thread_t *p_input = (input_thread_t *)obj; const int canc = vlc_s

网络摄像机IPCamera RTSP直播播放网络/权限/音视频数据/花屏问题检测与分析助手EasyRTSPClient

前言 最近在项目中遇到一个奇怪的问题,同样的SDK调用,访问海康摄像机的RTSP流,发保活OPTIONS命令保活,一个正常,而另一个一发就会被IPC断开,先看现场截图: 图1:发OPTIONS,摄像机立马断流 图2:但在另一个程序中发OPTIONS保活包又不断流 在大部分的摄像机上,都没什么问题,单单在海康的这一款摄像机中出现了这种问题,不仔细对比命令行中的输出,根本无法确定问题点,图2中的OPTIONS报文中携带了Authorization的头字段,将认证信息都带入了进来,而图1中只是简单将用

[ffmpeg] 抽取音视频数据

参考自: [FFmpeg抽取视频h264数据]  https://www.jianshu.com/p/11cdf48ec248 [FFmpeg抽取音频数据?]  https://www.jianshu.com/p/5337260efd97 [ADTS详解]  https://www.jianshu.com/p/af0165f923e9 音频流 代码实现: 1 #include "stdafx.h" 2 ? 3 #define DDug av_log(NULL, AV_LOG_WARNI

让 WebRTC 使用外部的音视频编解码器

WebRTC 支持使用自己的编解码器(限 native 开发),音频,视频都可以.这里以视频编码为例来分析下 WebRTC 中相应的源码. CreatePeerConnectionFactory 在 webrtc/api/peerconnectioninterface.h 中有个方法 CreatePeerConnectionFactory,原型如下: inline rtc::scoped_refptr<PeerConnectionFactoryInterface> CreatePeerConn

第二篇:R语言数据可视化之数据塑形技术

前言 绘制统计图形时,半数以上的时间会花在调用绘图命令之前的数据塑型操作上.因为在把数据送进绘图函数前,还得将数据框转换为适当格式才行. 本文将给出使用R语言进行数据塑型的一些基本的技巧,更多技术细节推荐参考<R语言核心手册>. 数据框塑型 1. 创建数据框 - data.frame() # 创建向量p p = c("A", "B", "C") # 创建向量q q = 1:3 # 创建数据框:含p/q两列 dat = data.fra

第二篇:Power BI数据可视化之基于网页数据的报表制作(经典级示例)

前言 报表制作流程的第一步显然是从各个数据源导入数据,Power BI能从很多种数据源导入数据:如Excel,CSV,XML,以及各类数据库(SQL Server,Oracle,My SQL等),两大主流开源平台(Hadoop,Spark)等等.本文篇幅所限,无法一一说明,仅就网页获取数据的方式进行讲解(其他方式大同小异). 然后本文将在Power BI后台工作区(下简称后台区)对获取到的数据集进行塑形.所谓塑形就是确定数据集的列名以及数据类型,还有进行一些基本数据清洗转换工作,以保证Power

手机Android音视频采集与直播推送,实现单兵、移动监控类应用

恰逢2014 Google I/O大会,不难看出安卓在Google的推进以及本身的开放性作用下,已经快延生到生活的各个方面了,从安卓智能手机.平板,到可穿戴的Android Ware.眼镜.手表.再到Android汽车.智能家居.电视,甚至最近看新闻,日本出的几款机器人都是Android系统的,再把目光放回监控行业,传统监控中的移动终端设备,例如:单兵设备.手持设备.车载终端设备,包括家庭监控中用到的智能设备,都可以用Android系统替代了,不仅开发容易,而且易扩展,设备也更加智能了. 图 -

Android IOS WebRTC 音视频开发总结(七六)-- 探讨直播低延迟低流量的粉丝连麦技术

本文主要探讨基于WebRTC的P2P直播粉丝连麦技术 (作者:郝飞,亲加云CTO,编辑:dora),最早发表在[这里] 支持原创,转载必须注明出处,欢迎关注微信公众号blacker(微信ID:blackerteam  或 webrtcorgcn) 到目前为止,直播行业继续如预期的那样如火如荼的发展着,在先后竞争完延迟,高清,美 颜,秒开等功能后,最近各大直播平台比拼的一个热点就是连麦.什么是连麦? 简单??述 就是当主播直播期间,可以与其中某一个粉丝进行互动,并且其他粉丝能够观看到这个互动 过程