【音视频】WebRTC 开发环境搭建-Web端

一、开发环境搭建

1.1 安装vscode

下载VSCode:https://code.visualstudio.com/,下载后主要用于开发Web前端页面,编写前端代码

安装完成后下载Live Server插件,用于本地开发,实时加载前端页面

1.1.1 前端代码测试

下面是一个简单的前端代码,使用了htmlJavaScript

js 复制代码
<!DOCTYPE html>
<html>
  <body>
    <h2>Body 中的 JavaScript</h2>

    <p id="demo">一个段落。</p>
    <button type="button" onclick="myFunction()">试一试</button>

    <script>
      function myFunction() {
        document.getElementById("demo").innerHTML = "段落已被更改。";
      }
    </script>
  </body>
</html>

在这个页面右键选择Open witn Live Server,即可在浏览器查看本地页面

效果如下:

1.3 安装node.js

在Ubuntu下,使用wget命令下载node.js的安装包

shell 复制代码
wget https://nodejs.org/dist/v0.10.16/node-v0.10.16-linux-x64.tar.gz

下载后解压

shell 复制代码
tar -xvf node-v0.10.16-linux-x64.tar.gz 

为了方便我们启动nodenpm命令,我们可以将安装好的可执行文件的路径,软链接到系统路径/usr/local/bin目录下,这样在任意位置都可以启动这个,类似环境变量的感觉

shell 复制代码
sudo ln -s /home/liuhang/webrtc/node-v0.10.16-linux-x64/bin/npm /usr/local/bin
sudo ln -s /home/liuhang/webrtc/node-v0.10.16-linux-x64/bin/node /usr/local/bin

配置完成后,测试一下是否可以执行对应的可执行文件

shell 复制代码
node -v
npm -v

1.4 下载coturn

coturn 是一款开源的 STUN/TURN 服务器实现 ,全称为 "Core TURN Server",由 RFC 5766(TURN 协议)和 RFC 5389(STUN 协议)的主要作者之一开发,是目前 WebRTC 实时通信场景中最常用的 STUN/TURN 服务器解决方案。

克隆github的仓库,下载coturn源码

shell 复制代码
git clone https://github.com/coturn/coturn

下载完成后,进入到coturn文件夹下

shell 复制代码
cd coturn

监检测前环境、生成Makefile,然后就可以执行编译、安装指令了

shell 复制代码
./confuture
sudo make -j8 && sudo make install

1.4.1 测试coturn服务器

按照下述指令,启动我们的服务器,添加&表示后台启动

shell 复制代码
sudo nohup turnserver ‐L 0.0.0.0 ‐a ‐u liuhang:123456 ‐v ‐f ‐r nort.gov &

然后使用lsof -i命令查看出3478端口被占用的情况,如果出现LISTEN字段,说明服务器启动起来的

shell 复制代码
sudo lsof -i:3478

如果搭建在公网的话,还可以使用下述官方网址进行测试,由于我这里是搭建在虚拟机,所以就不测试了

测试网址:https://webrtc.github.io/samples/src/content/peerconnection/trickle-ice/

更多资料:https://github.com/0voice

相关推荐
阳树阳树几秒前
小程序蓝牙API能力探索 1——蓝牙协议发展历史
前端
阿华的代码王国2 分钟前
【Android】PopupWindow实现长按菜单
android·xml·java·前端·后端
ygming11 分钟前
Q51- code295- 数据流的中位数 + Q52- code767- 重构字符串
前端
袋鱼不重13 分钟前
手把手搭建Vue轮子从0到1:4. Reactivity 模块的实现
前端·vue.js·源码
!win !14 分钟前
免费的个人网站托管-GitHub Pages篇
前端·开发工具
xw515 分钟前
免费的个人网站托管-GitHub Pages篇
前端·github
阿星AI工作室16 分钟前
扣子可以发布到小米搞钱了!手把手教程来了丨coze开发者瓜分亿级流量池指南
前端·人工智能·后端
小华同学ai17 分钟前
GitHub 开源爆款工具|MediaCrawler:程序员零门槛采集抖音/小红书/B站等社交评论,30K star 背后的场景实战揭秘!
前端·后端·github
盏灯17 分钟前
🔥🔥🔥websocket 前后端通信,接受命令,并执行
前端·后端·websocket
闲坐含香咀翠19 分钟前
B端项目版本同步方案:基于Vite插件的自动化实践
前端·vite·rollup.js