webrtc终极版（一）采用RTCMultiConnection官方demo，5分钟搭建起来webrtc

爱自律小程序官方账号

已于 2024-02-04 09:53:14 修改

阅读量1.6k

点赞数 18

分类专栏： webrtc终极版文章标签： webrtc 实时音视频 p2p

于 2024-02-02 16:47:03 首次发布

本文链接：https://blog.csdn.net/wangjincai123/article/details/135993646

版权

webrtc终极版专栏收录该内容

4 篇文章 5 订阅

订阅专栏

webrtc终极版（一），支持https，在线部署【不是本地demo】，采用RTCMultiConnection官方demo，5分钟即可搭建成功

webrtc终极版【一】目录

webrtc终极版（一），支持https，在线部署【不是本地demo】，采用RTCMultiConnection官方demo，5分钟即可搭建成功
前言
一、webrtc是什么？
二、搭建demo步骤
- 1.代码内容
- 2.运行效果
总结

前言

webrtc现在简直是太火了，几乎涵盖了我们行业的方方面面，他的诱人之处在于，他是p2p通信，几乎不怎么耗费服务器流量
本文是webrtc系列的第一篇，您没看错，就是5分钟即可搭建成功，多一分钟算我输，如果您的要求比较低，甚至可以将这个直接使用起来，但是我强烈建议您不要这样做
能研究到webrtc的，一般不会是刚入门的小菜鸟，起码是技术骨干级别，所以我强烈建议您完成整个系列文章的阅读，再这个系列文章里我们将会学到以下内容

第一篇：采用RTCMultiConnection官方demo，5分钟搭建起来webrtc

第二篇：搭建自己的iceserver服务器，并用到RTCMultiConnection的demo中

第三篇：将官方RTCMultiConnection的demo部署到自己的服务器中

第四篇：如果不用第三方RTCMultiConnection，裸写一个怎么样

我们做事情，比方说webrtc这样的事情，领导可能再催着我们，再等着看效果，所以，如果我们上来就慢慢研究原理，可能两三天过去了，也没有搞定，这样我们心里就会发慌，工作内容总不能一直写研究webrtc吧，所以上来先完成一个demo，并能正常运行，就显得非常重要了。

一、webrtc是什么？

能看到这篇文章的，相信几乎没有不知道什么是webrtc的了，但是作为文章的重要组成部分，还是需要介绍下什么是webrtc。

它（WebRTC）允许网络应用或者站点，在不借助中间媒介的情况下，建立浏览器之间点对点（Peer-to-Peer）的连接，实现视频流和（或）音频流或者其他任意数据的传输

这是 MDN 上对 WebRTC 的描述，初次接触时无法理解 WebRTC 为什么要和 WebSocket 搭配，明明说的很清楚不借助中间媒介，那 WebSocket 充当的是什么角色？整个 WebRTC 通话建立的流程又是怎样的？

上面的问题是个大的话题，原理介绍我准备放到第四篇章进行,本篇文章，我们就只有一个目的，那就是5分钟搭建一个webrtc，enjoy it！

二、搭建demo步骤

1.代码内容

啥都不说了，直接上代码：

<!DOCTYPETYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Video Conference</title>
</head>
<body>
<button id="btn-open-room">Open Room</button>
<button id="btn-join-room">Join Room</button>
  <!-- Include RTCMultiConnectionClient.js -->
<script src="https://muazkhan.com:9001/dist/RTCMultiConnection.min.js"></script>
<script src="https://muazkhan.com:9001/socket.io/socket.io.js"></script>
<script>
var connection = new RTCMultiConnection();

// this line is VERY_important
connection.socketURL = 'https://muazkhan.com:9001/';

// all below lines are optional; however recommended.

connection.session = {
    audio: true,
    video: true
};

connection.sdpConstraints.mandatory = {
    OfferToReceiveAudio: true,
    OfferToReceiveVideo: true
};

connection.onstream = function(event) {
    debugger;
    document.body.appendChild( event.mediaElement );
};


var predefinedRoomId = 'testroom';

// first step, ignore default STUN+TURN servers
connection.iceServers = [];
connection.iceServers.push({
    urls: 'stun:muazkhan.com:3478',
    credential: 'muazkh',
    username: 'hkzaum'
});
connection.iceServers.push({
    urls: 'turns:muazkhan.com:5349',
    credential: 'muazkh',
    username: 'hkzaum'
});
connection.iceServers.push({
    urls: 'turn:muazkhan.com:3478',
    credential: 'muazkh',
    username: 'hkzaum'
});

document.getElementById('btn-open-room').onclick = function() {
    this.disabled = true;
    connection.open( predefinedRoomId );
};

document.getElementById('btn-join-room').onclick = function() {
    this.disabled = true;
    connection.join( predefinedRoomId );
};
</script>
</body>
</html>