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

一、开发环境搭建

1.1 安装vscode

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

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

1.1.1 前端代码测试

下面是一个简单的前端代码，使用了html和JavaScript

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

为了方便我们启动node和npm命令，我们可以将安装好的可执行文件的路径，软链接到系统路径/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