jsp做购物网站技术可行性,安庆网站建设推广,网站照片加水印,手机版自适应网站怎么做文章目录 前言一、WebRTC 简介1、webrtc 是什么2、webrtc 可以做什么3、数据传输需要些什么4、SDP 协议5、STUN6、TURN7、ICE 二、WebRTC 整体框架三、WebRTC 功能模块1、视频相关①、视频采集---video_capture②、视频编解码---video_coding③、视频加密---video_engine_encry… 文章目录 前言一、WebRTC 简介1、webrtc 是什么2、webrtc 可以做什么3、数据传输需要些什么4、SDP 协议5、STUN6、TURN7、ICE 二、WebRTC 整体框架三、WebRTC 功能模块1、视频相关①、视频采集---video_capture②、视频编解码---video_coding③、视频加密---video_engine_encryption④、视频媒体文件---media_file⑤、视频图像处理---video_processing⑥、视频显示---video_render⑦、网络传输与流控 2、音频相关①、音频设备---audio_device②、音频编解码---audio_coding③、声音加密---voice_engine_encryption④、声音文件⑤、声音处理---audio_processing⑥、网络传输与流控 四、WEBRTC 调用本地摄像头1、确认本地设备2、WebRTC 所用 API①、getUserMedia②、展示摄像头图像 3、Html 与 js 代码4、WEBRTC 调用本地摄像头 总结 前言
WebRTC 只是一个媒体引擎上面有一个 JavaScript API所以每个人都知道如何使用它尽管浏览器实现仍然各不相同本文对 WebRTC网页实时通信的相关内容进行简要介绍。 一、WebRTC 简介
WebRTC名称源自网页实时通信Web Real-Time Communication的缩写是一个支持网页浏览器进行实时语音通话或视频聊天的技术是谷歌 2010 年以 6820 万美元收购 Global IP Solutions 公司而获得的一项技术。
WebRTC 提供了实时音视频的核心技术包括音视频的采集、编解码、网络传输、显示等功能并且还支持跨平台windowslinuxmacandroid。
虽然 WebRTC 的目标是实现跨平台的 Web 端实时音视频通讯但因为核心层代码的 Native、高品质和内聚性开发者很容易进行除 Web 平台外的移殖和应用。很长一段时间内 WebRTC 是业界能免费得到的唯一高品质实时音视频通讯技术。
1、webrtc 是什么
浏览器为音视频获取传输提供的接口
2、webrtc 可以做什么
浏览器端到端的进行音视频聊天、直播、内容传输
3、数据传输需要些什么
IP、端口、协议客户端、 服务端
4、SDP 协议
有关 SDP 相关的内容可以参考我之前的博文RTSP协议抓包及讲解 sdp 协议SDP 信息相当于 PC 的名片主要是协商两个端点在传输数据的时候一些配置 数据格式keyvalue
SDP 协商利用的是请求和响应这两个模型offer、answerOfferer 发给 Answerer 的请求消息称为请求 offer 内容包括媒体流类型、各个媒体流使用的编码集以及将要用于接收媒体流的 IP 和端口。Answerer 收到 offer 之后回复给 Offerer 的消息称为响应内容包括要使用的媒体编码是否接收该媒体流以及告诉 Offerer 其用于接收媒体流的 IP 和端口。
在 WebRTC 连接流程中在创建 PeerConnectionA 后就会去创建一个 offerSDP并设置为 localSDP。通过 signaling 发送 PeerB。peerB 收到 peerA 的 SDP 后把收到的 SDP 设置为 RemoteSDP。在设置完成后PeerB 再生成 AnswerSDP设置为 localSDP通过 signaling 通道发送给 PeerAPeerA 收到后 AnswerSDP 后设置为 RemoteSDP以上流程完成了 SDP 的交换。
5、STUN
允许应用程序发现自己和公网之间的中间件类型同时也能允许应用程序发现自己被 NAT 分配的公网 IP从而替代位于应用层中的私网地址达到 NAT 穿透的目的
6、TURN
通过修改应用层中的私网地址达到 NAT 穿透 也是解决内网穿透的这里是 stun 不能工作的时候采取的办法 相当于一个中转器即 peerA-TURN-PeerB
7、ICE
交互式连接的建立 把 STUN 和 TURN 结合在一起的一个标准叫 ICE不是协议 是整合了 STUNTURN 的框架。利用 STUN 和 TURN 为连接提供正确的路由然后寻找一系列双方可用地址按顺序测试地址直到找到双方都可用的组合。
二、WebRTC 整体框架 绿色部分是 WebRTC 核心部分核心库 核心层第一层 C API提供给外面的接口最主要的是PeerConnedtion 对等连接核心层第二层 Session上下文管理层音视频核心层第三层【最重要的部分】 音视频引擎 编解码音频缓冲 BUFFER 防止音频网络抖动 NetEQ回音消除降噪静音检测视频引擎 编解码jitter buffer 防止视频网络抖动图像处理增强传输SRTP 加密后的 RTP多路复用P2PSTUNTURNICE) 核心层第四层硬件相关层音视频采集网络 IO 紫色部分是 JS 提供的 API应用层 整体是应用层调用核心层
三、WebRTC 功能模块
WebRTC 实现了基于网页的视频会议标准是 WHATWG 协议目的是通过浏览器提供简单的 javascript 就可以达到实时通讯Real-Time Communications (RTC)能力。
1、视频相关
①、视频采集—video_capture
源代码在 webrtc\modules\video_capture\main 目录下 包含接口和各个平台的源代码。
在 windows 平台上WebRTC 采用的是 dshow 技术来实现枚举视频的设备信息和视频数据的采集这意味着可以支持大多数的视频采集设备对那些需要单独驱动程序的视频采集卡比如海康高清卡就无能为力了。
视频采集支持多种媒体类型比如 I420、YUY2、RGB、UYUY 等并可以进行帧大小和帧率控制。
②、视频编解码—video_coding
源代码在 webrtc\modules\video_coding 目录下。
WebRTC 采用 I420/VP8 编解码技术。VP8 是 google 收购 ON2 后的开源实现并且也用在 WebM 项目中。VP8 能以更少的数据提供更高质量的视频特别适合视频会议这样的需求。
③、视频加密—video_engine_encryption
视频加密是 WebRTC 的 video_engine 一部分相当于视频应用层面的功能给点对点的视频双方提供了数据上的安全保证可以防止在 Web 上视频数据的泄漏。
视频加密在发送端和接收端进行加解密视频数据密钥由视频双方协商代价是会影响视频数据处理的性能也可以不使用视频加密功能这样在性能上会好些。
④、视频媒体文件—media_file
源代码在 webrtc\modules\media_file 目录下。
该功能是可以用本地文件作为视频源有点类似虚拟摄像头的功能支持的格式有 Avi另外 WebRTC 还可以录制音视频到本地文件比较实用的功能。
⑤、视频图像处理—video_processing
源代码在 webrtc\modules\video_processing 目录下。
视频图像处理针对每一帧的图像进行处理包括明暗度检测、颜色增强、降噪处理等功能用来提升视频质量。
⑥、视频显示—video_render
源代码在 webrtc\modules\video_render 目录下。
在 windows 平台WebRTC 采用 direct3d9 和 directdraw 的方式来显示视频只能这样必须这样。
⑦、网络传输与流控
对于网络视频来讲数据的传输与控制是核心价值。WebRTC 采用的是成熟的 RTP/RTCP 技术。
2、音频相关
WebRTC 的音频部分包含设备、编解码iLIBC/iSAC/G722/PCM16/RED/AVT、 NetEQ、加密、声音文件、声音处理、声音输出、音量控制、音视频同步、网络传输与流控RTP/RTCP等功能。
①、音频设备—audio_device
源代码在 webrtc\modules\audio_device\main 目录下 包含接口和各个平台的源代码。
在 windows 平台上WebRTC 采用的是 Windows Core Audio 和 Windows Wave 技术来管理音频设备还提供了一个混音管理器。
利用音频设备可以实现声音输出音量控制等功能。
②、音频编解码—audio_coding
源代码在 webrtc\modules\audio_coding 目录下。
WebRTC 采用 iLIBC/iSAC/G722/PCM16/RED/AVT 编解码技术。
WebRTC 还提供 NetEQ 功能—抖动缓冲器及丢包补偿模块能够提高音质并把延迟减至最小。
另外一个核心功能是基于语音会议的混音处理。
③、声音加密—voice_engine_encryption
和视频一样 WebRTC 也提供声音加密功能。
④、声音文件
该功能是可以用本地文件作为音频源支持的格式有 Pcm 和 Wav。
同样WebRTC 也可以录制音频到本地文件。
⑤、声音处理—audio_processing
源代码在 webrtc\modules\audio_processing 目录下。
声音处理针对音频数据进行处理包括回声消除AEC、AECMAEC Mobile、自动增益AGC、降噪NS、静音检测VAD处理等功能 用来提升声音质量。
⑥、网络传输与流控
和视频一样WebRTC 采用的是成熟的 RTP/RTCP 技术。
四、WEBRTC 调用本地摄像头
WebRTC 是“ 网络实时通信” Web Real Time Communication的缩写它主要用来让浏览器实时获取和交换视频、音频和数据。
1、确认本地设备
列出 Windows 系统上可用的音视频设备
ffmpeg -list_devices true -f dshow -i dummy-list_devices true这是一个选项参数用于告诉 FFmpeg 列出可用的设备。-f dshow这是另一个选项参数用于指定使用 DirectShow 框架来访问设备。-i dummy这是输入参数dummy 是一个虚拟设备名称用于触发设备列表的输出。 可以看到笔记本电脑只有个前置摄像头未外接 USB 摄像头
下面命令使用前置摄像头进行捕捉画面
ffplay -f dshow -i videoIntegrated Camera2、WebRTC 所用 API
WebRTC 共分三个 API
MediaStream又称 getUserMediaRTCPeerConnectionRTCDataChannel
getUserMedia 主要用于获取视频和音频信息后两个 API 用于浏览器之间的数据交换。
①、getUserMedia
首先检查浏览器是否支持 getUserMedia 方法。
navigator.getUserMedia ||
(navigator.getUserMedia navigator.mozGetUserMedia || navigator.webkitGetUserMedia
|| navigator.msGetUserMedia);
if (navigator.getUserMedia) {
//do something
} else {
console.log(your browser not support getUserMedia);
}Chrome21 、Opera 18 和 Firefox 17 支 持 该 方 法 目 前 IE 还 不 支 持 上 面 代 码 中 的 msGetUserMedia 只是为了确保将来的兼容。
getUserMedia(streams, success, error); 含义如下
streams表示包括哪些多媒体设备的对象success回调函数获取多媒体设备成功时调用error回调函数获取多媒体设备失败时调用
用法如下
navigator.getUserMedia({
video: true,
audio: true
}, onSuccess, onError);上面的代码用来获取摄像头和麦克风的实时信息。
如果网页使用了 getUserMedia浏览器就会询问用户是否许可提供信息。如果用户拒绝就调用回调函数 onError。
发生错误时回调函数的参数是一个 Error 对象它有一个 code 参数取值如下
PERMISSION_DENIED用户拒绝提供信息。NOT_SUPPORTED_ERROR浏览器不支持指定的媒体类型。MANDATORY_UNSATISHIED_ERROR指定的媒体类型未收到媒体流。
②、展示摄像头图像
将用户的摄像头拍摄的图像展示在网页上需要先在网页上放置一个 video 元素。图像就展示在这个元素中。
video idwebcam/video然后 用代码获取这个元素。
function onSuccess(stream) {var video document.getElementById(webcam);
//more code
}最后将这个元素的 src 属性绑定数据流摄像头拍摄的图像就可以显示了。
function onSuccess(stream) {var video document.getElementById(webcam);if (window.URL) {video.src window.URL.createObjectURL(stream);} else {video.src stream;}video.autoplay true;//or video.play();
}它的主要用途是让用户使用摄像头为自己拍照。
3、Html 与 js 代码
webrtcdemo.html
!DOCTYPE html
html
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/title
/head
bodydivbutton idstart开始/buttonbutton idstop停止/button/divdivvideo autoplay controls idid__stream/video/divscript// 只获取视频let constraints {audio: false, video: true}; let startBtn document.getElementById(start)let stopBtn document.getElementById(stop)let videoShowControl document.getElementById(id__stream)startBtn.onclick function() {navigator.getUserMedia(constraints, function(stream) {videoShowControl.srcObject stream;window.stream stream;}, function(err) {console.log(err)})}stopBtn.onclick function() {videoShowControl.pause();}/script
/body
/html4、WEBRTC 调用本地摄像头
双击 webrtcdemo.html 可以看到下图界面点击开始 点击允许 可以看到电脑摄像头捕捉到的图像 总结
提示这里对文章进行总结
例如以上就是今天要讲的内容本文仅仅简单介绍了pandas的使用而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。
