webRTC-音视频通话

发表于 2022-04-05 分类于 JS 阅读次数：

上一节讲了 webRTC 的原理，今天我们就来实践一下。

我们知道，webRTC 是点对点的连接，它不需要服务器的参与，但是需要一个信令服务器来传递信令，这样才能使双方建立起连接。

这里我们用 node.js 来充当信令服务器，通过 websocket（socket.io）来传递信令。

新建目录 demo，在 demo 下新建 index.js 文件（信令服务器）和文件夹 public（存放静态文件）。在 public 下新建 index.html 和 main.js 文件。

安装

1
2
3

npm install express
npm install fs
npm install socket.io

编写信令服务器

index.js

var express = require("express");
const { createServer } = require("https");
const { Server } = require("socket.io");
const fs = require('fs'); 

let options = {
    key: fs.readFileSync('./privatekey.key'), // 证书文件的存放目录
    cert: fs.readFileSync('./certificate.crt')
}

var app = express();
app.use('/', express.static("public"));

var httpsServer = createServer(options, app)

var io = new Server(httpServer)


io.on("connection", socket => {
    socket.on("add_room", () => {
        socket.join("room");
        socket.emit("conn");
    });

    // 接收 Offer 信令并发送给其他连接
    socket.on('signalOffer', function (message) {
        socket.to('room').emit('signalOffer', message);
    });

    // 接收 Answer 信令
    socket.on('signalAnswer', function (message) {
        socket.to('room').emit('signalAnswer', message);
    });

    // 接收 iceOffer
    socket.on('iceOffer', function (message) {
        socket.to('room').emit('iceOffer', message);
    });

    // 接收 iceAnswer
    socket.on('iceAnswer', function (message) {
        socket.to('room').emit('iceAnswer', message);
    });
});


httpsServer.listen(3000, () => {
    console.log("服务开启");
})

这里用 https 协议是因为摄像头和麦克风只能在 https 环境下才能被正常调用。

静态文件

index.html

<html>
    <head>
        <title>videoCall</title>
    </head>

    <div class="container">
        <h1>音视频通话</h1>
        <hr>
        <div class="video_container" align="center">
            <!-- 本地视频流 -->
            <video id="local_video" controls autoplay muted webkit-playsinline></video>
            <!-- 远端视频流 -->
            <video id="remote_video" controls autoplay muted webkit-playsinline></video>
        </div>
        <hr>
        <button id="startButton">加入房间</button>
        <button id="hangupButton">挂断</button>
        <!-- socket.io 客户端 -->
        <script src="https://cdn.jsdelivr.net/npm/socket.io-client@4.4.1/dist/socket.io.min.js"></script>
        <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
        <script src="main.js"></script>
    </div>
</html>

main.js

// 本地视频 Video
var localVideo = document.getElementById('local_video'); 
// 远端视频 Video
var remoteVideo = document.getElementById('remote_video'); 

// 加入房间按钮
var startButton = document.getElementById('startButton'); 
// 挂断按钮
var hangupButton = document.getElementById('hangupButton'); 

var pc; // RTCPeerConnection 实例（WebRTC 连接实例）
var localStream; // 本地视频流

var socket = io.connect(); // 创建 socket 连接


// offer 配置
const offerOptions = {
    offerToReceiveVideo: 1,
    offerToReceiveAudio: 1
};

hangupButton.disabled = true;

startButton.addEventListener('click', startAction);
hangupButton.addEventListener('click', hangupAction);

// 点击加入房间
function startAction () {
    // 浏览器兼容性处理
    if (navigator.mediaDevices === undefined) {
        navigator.mediaDevices = {};
    }
    if (navigator.mediaDevices.getUserMedia === undefined) {
        navigator.mediaDevices.getUserMedia = function (constraints) {
            var getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;
        
            if (!getUserMedia) {
                return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
            }
    
            return new Promise(function (resolve, reject) {
                getUserMedia.call(navigator, constraints, resolve, reject);
            });
        }
    }

    // 调用设备媒体
    navigator.mediaDevices.getUserMedia({ video: true, audio: true }).then(function (mediastream) {
        localStream = mediastream; // 本地视频流
        localVideo.srcObject = mediastream; // 播放本地视频流
        startButton.disabled = true;
        socket.emit('add_room'); // 连接 socket
    }).catch(function (e) {
        alert(e);
    });
}

// socket 连接成功
socket.on('conn', function () {
    hangupButton.disabled = false;
    pc = new RTCPeerConnection(); // 创建 RTC 连接
    
    localStream.getTracks().forEach(track => pc.addTrack(track, localStream)); // 添加本地视频流 track
    // 创建 Offer 请求
    pc.createOffer(offerOptions).then(function (offer) {
        pc.setLocalDescription(offer); // 设置本地 Offer 描述，（设置描述之后会触发ice事件）
        socket.emit('signalOffer', offer); // 发送 Offer 请求信令
    });
    // 监听 ice
    pc.addEventListener('icecandidate', function (event) {
        var iceCandidate = event.candidate;
        if (iceCandidate) {
            // 发送 iceOffer 请求
            socket.emit('iceOffer', iceCandidate);
        }
    });
});

// 接收 Offer 请求信令
socket.on('signalOffer', function (message) {
    pc.setRemoteDescription(new RTCSessionDescription(message)); // 设置远端描述
    // 创建 Answer 请求
    pc.createAnswer().then(function (answer) {
        pc.setLocalDescription(answer); // 设置本地 Answer 描述
        socket.emit('signalAnswer', answer); // 发送 Answer 请求信令
    })

    // 监听远端视频流
    pc.addEventListener('track', function (event) {
        event.streams.forEach(stream => {
            remoteVideo.srcObject = stream;
        });
    });
});

// 接收 Answer 请求信令
socket.on('signalAnswer', function (message) {
    pc.setRemoteDescription(new RTCSessionDescription(message)); // 设置远端描述
    console.log('remote answer');

    // 监听远端视频流
    pc.addEventListener('track', function (event) {
        event.streams.forEach(stream => {
            remoteVideo.srcObject = stream;
        });
    });
});

// 接收 iceOffer
socket.on('iceOffer', function (message) {
    addIceCandidates(message)
});

// 接收 iceAnswer
socket.on('iceAnswer', function (message) {
    addIceCandidates(message)
});

// 添加 IceCandidate
function addIceCandidates (message) {
    if (pc !== 'undefined') {
        pc.addIceCandidate(new RTCIceCandidate(message));
    }
}

// 挂断
function hangupAction () {
    localStream.getTracks().forEach(track => track.stop());
    pc.close();
    pc = null;
    hangupButton.disabled = true;
    startButton.disabled = false;
}

开启服务

执行

1	node index.js

然后在浏览器输入 https://localhost:3000 即可访问。

注意：通信双方需要在同一局域网下。