在Ubuntu上搭建一个基于webrtc的多人视频聊天服务实例代码详解
46 浏览量
2020-09-14
20:23:18
上传
评论
收藏 110KB PDF 举报
在在Ubuntu上搭建一个基于上搭建一个基于webrtc的多人视频聊天服务实例代的多人视频聊天服务实例代
码详解码详解
主要介绍了在Ubuntu上搭建一个基于webrtc的多人视频聊天服务,本文通过实例代码给大家介绍的非常详细，具
有一定的参考借鉴价值，需要的朋友可以参考下
WebRTC，即Web Real-Time Communication，web实时通信技术。简单地说就是在web浏览器里面引入实时通信，包括音视
频通话等。
在疫情期间哪里也去不了，在家没事就研究webrtc视频直播技术，网上找了些教程最终都不太能顺利跑起来的，可能是文章写
的比较老，使用的一些开源组件已经更新了，有些配置已经不太一样了，所以按照以前的步骤会有问题。折腾了一阵终于跑起
来了，记录一下。
一个简单的聊天室一个简单的聊天室html页面页面
这个页面使用simple-webrtc来实现webrtc的通讯，simple-webrtc是对几个webrtc核心对象的封装，所以使用这个会比较简
单。
<!DOCTYPE html>
<html>
<head>
<title>webrtc chat room </title>
<style>
video {
height: 200px;
width: 200px;
border: 1px solid cornflowerblue;
border-radius: 3px;
margin: 10px;
}
</style>
</head>
<body>
<div>
roomid: <input id="roomid" type="text" value=""/> <input type="button" id="btnStart" value="join room">
</div>
<div>
nick name: <input id ="nickname" readonly="readonly" type = "text" value="">
</div>
<h3>
self:
</h3>
<video id="localVideo"></video>
<div id="remoteVideos">
<h3>
remote clients:
</h3>
</div>
<script src="https://cdn.bootcss.com/jquery/3.3.0/jquery.min.js"></script>
<script src="js/simplewebrtc-with-adapter.bundle.js"></script>
<script lang="javascript">
$("#nickname").val(new Date().getTime());
var qs = function (key) {
return (document.location.search.match(new RegExp("(?:^\?|&)" + key + "=(.*?)(?=&|$)")) || ['', null])[1];
};
var roomid = qs("roomid");
if (roomid) {
$('#roomid').val(roomid);
}
else {
$('#roomid').val('99999');
}
// $('#roomid').val(roomid);
var smUrl = 'https://webrtc.xxx.com:8800';
var webrtc = new SimpleWebRTC({
// the id/element dom element that will hold "our" video
localVideoEl: 'localVideo',
// the id/element dom element that will hold remote videos
remoteVideosEl: 'remoteVideos',
// immediately ask for camera access
autoRequestMedia: true,
url: smUrl,
nick: $('#nickname').val(),
});
资源评论
