如何实现webrtc多人视频直播会议?
发布网友
发布时间：2022-04-23 00:20
共6个回答
懂视网
时间：2022-05-12 07:45
1、概述
WebRTC是“网络实时通信”（Web Real Time Communication）的缩写，它主要用来让浏览器实时获取和交换视频、音频和数据。
WebRTC共分三个API。
MediaStream（又称getUserMedia）
RTCPeerConnection
RTCDataChannel
getUserMedia主要用于获取视频和音频信息，后两个API用于浏览器之间的数据交换。
2、getUserMedia
2.1 简介
首先，检查浏览器是否支持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方法接受三个参数。
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：指定的媒体类型未收到媒体流。
2.2 展示摄像头图像
将用户的摄像头拍摄的图像展示在网页上，需要先在网页上放置一个video元素。图像就展示在这个元素中。
<video id="webcam"></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();}它的主要用途是让用户使用摄像头为自己拍照。
2.3 捕获麦克风声音
通过浏览器捕获声音，相对复杂，需要借助Web Audio API。
function onSuccess(stream) {
//创建一个音频环境对像
audioContext = window.AudioContext || window.webkitAudioContext;
context = new audioContext();
//将声音输入这个对像
audioInput = context.createMediaStreamSources(stream);
//设置音量节点
volume = context.createGain();
audioInput.connect(volume);
//创建缓存，用来缓存声音
var bufferSize = 2048;
// 创建声音的缓存节点，createJavaScriptNode方法的
// 第二个和第三个参数指的是输入和输出都是双声道。
recorder = context.createJavaScriptNode(bufferSize, 2, 2);
// 录音过程的回调函数，基本上是将左右两声道的声音
// 分别放入缓存。
recorder.onaudioprocess = function(e){
console.log('recording');
var left = e.inputBuffer.getChannelData(0);
var right = e.inputBuffer.getChannelData(1);
// we clone the samples
leftchannel.push(new Float32Array(left));
rightchannel.push(new Float32Array(right));
recordingLength += bufferSize;
} // 将音量节点连上缓存节点，换言之，音量节点是输入
// 和输出的中间环节。
volume.connect(recorder);
// 将缓存节点连上输出的目的地，可以是扩音器，也可以
// 是音频文件。
recorder.connect(context.destination);
}3、实时数据交换
WebRTC的另外两个API，RTCPeerConnection用于浏览器之间点对点的连接，RTCDataChannel用于点对点的数据通信。
RTCPeerConnection带有浏览器前缀，Chrome浏览器中为webkitRTCPeerConnection，Firefox浏览器中为mozRTCPeerConnection。Google维护一个函数库adapter.js，用来抽像掉浏览器之间的差异。
var dataChannelOptions = {
ordered: false, // do not guarantee order
maxRetransmitTime: 3000, // in milliseconds};
var peerConnection = new RTCPeerConnection();
// Establish your peer connection using your signaling channel herevar dataChannel =
peerConnection.createDataChannel("myLabel", dataChannelOptions);
dataChannel.onerror = function (error) {
console.log("Data Channel Error:", error);
};
dataChannel.onmessage = function (event) {
console.log("Got Data Channel Message:", event.data);
};
dataChannel.onopen = function () {
dataChannel.send("Hello World!");
};
dataChannel.onclose = function () {
console.log("The Data Channel is Closed");
};4、参考链接
[1] Andi Smith, Get Started with WebRTC
[2] Thibault Imbert, From microphone to .WAV with: getUserMedia and Web Audio
[3] Ian Devlin, Using the getUserMedia API with the HTML5 video and canvas elements
[4] Eric Bidelman, Capturing Audio & Video in HTML5
[5] Sam Dutton, Getting Started with WebRTC
[6] Dan Ristic, WebRTC data channels
[7] Ruanyf, WebRTC
热心网友
时间：2022-05-12 04:53
WebRTC（Web Real-Time Communication）项目的最终目的主要是让Web开发者能够基于浏览器（Chrome\FireFox\...）轻易快捷开发出丰富的实时多媒体应用，而无需下载安装任何插件，Web开发者也无需关注多媒体的数字信号处理过程，只需编写简单的Javascript程序即可实现，W3C等组织正在制定Javascript 标准API，目前是WebRTC 1.0版本，Draft状态；另外WebRTC还希望能够建立一个多互联网浏览器间健壮的实时通信的平台，形成开发者与浏览器厂商良好的生态环境。同时，古格也希望和致力于让WebRTC的技术成为HTML5标准之一，可见古格布局之深远。
WebRTC提供了视频会议的核心技术，包括音视频的采集、编解码、网络传输、显示等功能，并且还支持跨平台：windows，linux，mac，android。
架构组件介绍
(1) Your Web App
Web开发者开发的程序，Web开发者可以基于集成WebRTC的浏览器提供的web API开发基于视频、音频的实时通信应用。
(2)Web API
面向第三方开发者的WebRTC标准API（Javascript），使开发者能够容易地开发出类似于网络视频聊天的web应用，最新的标准化进程可以查看这里。
(3)WebRTC Native C++ API
本地C++ API层，使浏览器厂商容易实现WebRTC标准的Web API，抽象地对数字信号过程进行处理。
(4)Transport / Session
传输/会话层
会话层组件采用了libjingle库的部分组件实现，无须使用xmpp/jingle协议
a. RTP Stack协议栈
Real Time Protocol
b. STUN/ICE
可以通过STUN和ICE组件来建立不同类型网络间的呼叫连接。
c. Session Management
一个抽象的会话层，提供会话建立和管理功能。该层协议留给应用开发者自定义实现。
(5)VoiceEngine
音频引擎是包含一系列音频多媒体处理的框架，包括从视频采集卡到网络传输端等整个解决方案。
P使其能够快速且高解析度地适应不断变化的网络环境，确保音质优美且缓冲延迟最小。
是GIPS公司独步天下的技术，能够有效的处理由于网络抖动和语音包丢失时候对语音质量产生的影响。
(6)VideoEngine
WebRTC视频处理引擎
VideoEngine是包含一系列视频处理的整体框架，从摄像头采集视频到视频信息网络传输再到视频显示整个完整过程的解决方案。
a. VP8
视频图像编解码器，是WebRTC视频引擎的默认的编解码器
VP8适合实时通信应用场景，因为它主要是针对低延时而设计的编解码器。
PS:VPx编解码器是古格收购ON2公司后开源的，VPx现在是WebM项目的一部分，而WebM项目是古格致力于推动的HTML5标准之一
b. Video Jitter Buffer
视频抖动缓冲器，可以降低由于视频抖动和视频信息包丢失带来的不良影响。
c. Image enhancements
图像质量增强模块
对网络摄像头采集到的图像进行处理，包括明暗度检测、颜色增强、降噪处理等功能，用来提升视频质量。
热心网友
时间：2022-05-12 06:11
说明：
1、画面1、2、3都是其他手机传过来的图像，局域网内有点点卡顿，同时软解3路数据你懂的。
2、声音比较清晰，服务端没有做混音处理。
实现原理：
1、服务端是小伙伴用C++配合实现的，主要作用就是信令控制与转发，所以原理没有太多好讲的。
2、因为有在WEBRTC里面注册自己的传输模块，所以在这个基础上实现多人就很容易了，主要就是让服务端转发的时候知道往哪里转发。
3、WEBRTC里面有channel机制，每个会话对应一个channel，如果要实现多个会话，就注册多个channel，关键代码如下：
总结：
1、通过上面这个demo可以做很多扩展，比如视频直播、在线教学、安防监控。
2、很多开源框架都是基于这种架构模式，如Licode，jitsi。
3、这种模式以后结合VP9,H265和SVC会有很好的发展空间，不过需要时间，所以我们会继续关注。
热心网友
时间：2022-05-12 07:45
热心网友
时间：2022-05-12 09:37
我个人感觉首先是我们先进的设备。让我们感觉有自豪感。
离不开我们大家的努力。谢谢。
热心网友
时间：2022-05-12 11:45
WebRTC（Web Real-Time Communication）项目的最终目的主要是让Web开发者能够基于浏览器（Chrome\FireFox\...）轻易快捷开发出丰富的实时多媒体应用，而无需下载安装任何插件，Web开发者也无需关注多媒体的数字信号处理过程，只需编写简单的Javascript程序即可实现，W3C等组织正在制定Javascript 标准API，目前是WebRTC 1.0版本，Draft状态；另外WebRTC还希望能够建立一个多互联网浏览器间健壮的实时通信的平台，形成开发者与浏览器厂商良好的生态环境。同时，古格也希望和致力于让WebRTC的技术成为HTML5标准之一，可见古格布局之深远。
WebRTC提供了视频会议的核心技术，包括音视频的采集、编解码、网络传输、显示等功能，并且还支持跨平台：windows，linux，mac，android。
以上为个人经验，仅供参考。
