webRTC-简易视频通讯服务器

最新推荐文章于 2024-08-18 17:13:03 发布
最新推荐文章于 2024-08-18 17:13:03 发布
阅读量137 收藏 1
点赞数
文章标签： webrtc 音视频 服务器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yinshipin007/article/details/133930749
版权

webRTC-简易视频通讯服务器 目录

[TOC]

前言

  • 本文基于webSocket建立了一个网络视频通讯

推荐阅读

  • 《Learning WebRTC》

涵盖内容

  • 从客户端获取到服务器的连接
  • 识别各个连接端的用户
  • 两个远程用户发起通话
  • 结束通话

展示效果

展示效果

连接

  • 包含两个页面：输入用户名，呼叫其他用户

创建页面

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body{
        background-color: #3D6DF2;
        margin-top: 15px;
        font-family: sans-serif;
        color: white;
    }

    video {
        background: black;
        border: 1px solid gray;
    }

    .page {
        position: relative;
        display: block;
        margin: 0 auto;
        width: 500px;
        height: 500px;
    }

    #yours{
        width: 150px;
        height: 150px;
        position: absolute;
        top: 15px;
        right: 15px;
    }

    #theirs {
        width: 500px;
        height: 500px;
    }
</style>
<body>
    <div id="login-page" class="page">
        <h2>Login As</h2>
        <input type="text" id="username">
        <button id="login">Login</button>
    </div>

    <div id="call-page" class="page">
        <video id="yours" autoplay></video>
        <video id="theirs" autoplay></video>

        <input type="text" id="their-username">
        <button id="call">Call</button>
        <button id="hang-up">Hang Up</button>
    </div>
</body>
<script src="client.js"></script>
</html>

获取一个连接

  • 与信令服务器创建连接
let name,
    connectedUser;

let connection = new WebSocket('ws://localhost:8888');

connection.onopen = function() {
    console.log("Connected");
};

connection.onmessage = function(message){
    console.log("Got message", message.data);

    let data = JSON.parse(message.data);

    switch(data.type){
        case "login":
            onLogin(data.success);
            break;
        case "offer":
            onOffer(data.offer, data.name);
            break;
        case "answer":
            onAnswer(data.answer);
            break;
        case "candidate":
            onCandidate(data.candidate);
            break;
        case "leave":
            onLeave();
            break;
        default:
            break;
    }
};

connection.onerror = function(err) {
    console.log(err);
}

function send(message) {
    if(connectedUser) {
        message.name = connectedUser;
    }

    connection.send(JSON.stringify(message));
}

相关学习资料推荐，点击下方链接免费报名，先码住不迷路~】

音视频免费学习地址：https://xxetb.xet.tech/s/2cGd0

登录

let loginPage = document.querySelector('#login-page'),
    usernameInput = document.querySelector('#username'),
    loginButton = document.querySelector('#login'),
    callPage = document.querySelector('#call-page'),
    theirUsernameInput = document.querySelector('#theirusername'),
    callButton = document.querySelector('#call'),
    hangUpButton = document.querySelector('#hang-up');

callPage.style.display = 'none';

loginButton.addEventListener('click', event=>{
    name = usernameInput.value;

    if(name.length > 0){
        send({
            type: "login",
            name: name
        });
    }
});

function onLogin(success) {
    if(success === false){
        alert("Login unsuccessfully, please try a different name.");
    }else {
        loginPage.style.display = 'none';
        callPage.style.display = 'block';
    }

    // 准备好通话的通道
    startConnection();

}

开始对等连接

  1. 从相机中获取视频流
  2. 验证用户的浏览器是否支持WebRTC
  3. 创建RTCPeerConnection对象
let yourVideo = document.querySelector('#yours'),
    theirVideo = document.querySelector('#theirs'),
    yourConnection,
    connectedUser,
    stream;

function startConnection() {
    if(hasUserMedia()){
        navigator.getUserMedia({
            video: true,
            audio: true
        },
        myStream => {
            stream = myStream;
            
            try{
                yourVideo.src = window.URL.createObjectURL(stream);
            }catch(e){
                yourVideo.srcObject = stream;
            }

            if(hasRTCPeerConnection()){
                setupPeerConnection(stream);
            }else{
                alert("不支持webRTC");
            }
        },
        error => {
            console.log(error);
        }
        );
    }else{
        alert("不支持webRTC");
    }
}

function setupPeerConnection(stream) {
    let configuration = {
        "iceServers":[
            {"url":"stun:localhost:8888"}
        ]
    };

    yourConnection = new RTCPeerConnection(configuration);

    // 设置流量监听
    yourConnection.addStream(stream);
    yourConnection.onaddstream = function(e) {
        try{
            theirVideo.src = window.URL.createObjectURL(e.stream);
        }catch(e){
            theirVideo.srcObject = stream;
        }
    };

    yourConnection.onicecandidate = function(event) {
        if(event.candidate){
            send({
                type: "candidate",
                candidate: event.candidate
            });
        }
    };
}

function hasUserMedia() {
    navigator.getUserMedia = navigator.getUserMedia
                        || navigator.webkitGetUserMedia
                        || navigator.mozGetUserMedia
                        || navigator.msGetUserMedia;
    return !!navigator.getUserMedia;
}

function hasRTCPeerConnection() {
    window.RTCPeerConnection = window.RTCPeerConnection
                            || window.webkitRTCPeerConnection
                            || window.mozRTCPeerConnection;

    window.RTCSessionDescription = window.RTCSessionDescription
                            || window.webkitRTCSessionDescription
                            || window.mozRTCSessionDescription;
    
    window.RTCIceCandidate = window.RTCIceCandidate
                            || window.webkitRTCIceCandidate
                            || window.mozeRTCIceCandidate;

    return !!window.RTCPeerConnection;
}

发起通话

  • setLocalDescription()：更改与连接关联的本地描述。此说明指定连接的本地端的属性，包括媒体格式。
  • setRemoteDescription()：将指定的会话描述设置为远程对等方的当前提供或应答。描述指定连接远端的属性，包括媒体格式。
  • addIceCandidate()：通过信令信道从远程对等方接收新的ICE候选，它通过调用将新接收的候选发送到浏览器的ICE代理

callButton.addEventListener('click', function(){
    let theirUsername = theirUsernameInput.value;

    if(theirUsername.length > 0){
        startPeerConnection(theirUsername);
    }
});

function startPeerConnection(user) {
    connectedUser = user;

    // offer
    yourConnection.createOffer(offer=>{
        send({
            type: "offer",
            offer: offer
        });
        yourConnection.setLocalDescription(offer);
    },
    err => {
        alert("An error has occurred");
    });
}

function onOffer(offer, name) {
    connectedUser = name;
    yourConnection.setRemoteDescription(new RTCSessionDescription(offer));

    yourConnection.createAnswer(function(answer){
        yourConnection.setLocalDescription(answer);

        send({
            type: "answer",
            answer: answer
        });
    },
    err =>{
        alert("An error");
    }
    );
}

function onAnswer(answer){
    yourConnection.setRemoteDescription(new RTCSessionDescription(answer));
}

function onCandidate(candidate){
    yourConnection.addIceCandidate(new RTCIceCandidate(candidate));
}

检测通信

  • 调试实时应用困难在：许多事件发生在同一时刻，要完整描述某一时刻发生了什么很难
  • Chrome中View->Developer->Developer Tools可以看到webSocket得通信状态

挂断电话

  • 通知其他用户关闭通话
  • 销毁本地连接，允许进行新的通话

过程

  1. 通知服务器，断开连接
  2. 通知RTCPeerConnection关闭，停止发送数据流给其他用户
  3. 再次设置，连接实例设置为打开状态，以接受新的通话
hangUpButton.addEventListener("click", ()=>{
    send({
        type: "leave"
    });

    onLeave();
});

function onLeave() {
    connectedUser = null;
    theirVideo.srcObject = null;
    yourConnection.close();
    yourConnection.onicecandidate = null;
    yourConnection.onaddstream = null;
    setupPeerConnection(stream);
}

webRTC全部代码总结

  • 全部代码整合
// 变量声明
let name,
    connectedUser;

let connection = new WebSocket('ws://localhost:8888');

let yourVideo = document.querySelector('#yours'),
    theirVideo = document.querySelector('#theirs'),
    yourConnection,
    stream;

let loginPage = document.querySelector('#login-page'),
    usernameInput = document.querySelector('#username'),
    loginButton = document.querySelector('#login'),
    callPage = document.querySelector('#call-page'),
    theirUsernameInput = document.querySelector('#their-username'),
    callButton = document.querySelector('#call'),
    hangUpButton = document.querySelector('#hang-up');

callPage.style.display = 'none';

// 点击按钮登录
loginButton.addEventListener('click', event=>{
    name = usernameInput.value;

    if(name.length > 0){
        send({
            type: "login",
            name: name
        });
    }
});

// websocket 连接
connection.onopen = function() {
    console.log("Connected");
};

// 监听websocket信息
connection.onmessage = function(message){
    console.log("Got message", message.data);

    let data = JSON.parse(message.data);

    switch(data.type){
        case "login":
            onLogin(data.success);
            break;
        case "offer":
            onOffer(data.offer, data.name);
            break;
        case "answer":
            onAnswer(data.answer);
            break;
        case "candidate":
            onCandidate(data.candidate);
            break;
        case "leave":
            onLeave();
            break;
        default:
            break;
    }
};

// websocket报错信息
connection.onerror = function(err) {
    console.log(err);
}

// Alia 以JSON格式发送信息
function send(message) {
    if(connectedUser) {
        message.name = connectedUser;
    }

    connection.send(JSON.stringify(message));
}

function onLogin(success) {
    if(success === false){
        alert("Login unsuccessfully, please try a different name.");
    }else {
        loginPage.style.display = 'none';
        callPage.style.display = 'block';
    }

    // 准备好通话的通道
    startConnection();
}

// call呼叫
callButton.addEventListener('click', function(){
    let theirUsername = theirUsernameInput.value;

    if(theirUsername.length > 0){
        startPeerConnection(theirUsername);
    }
});

// 挂断
hangUpButton.addEventListener("click", ()=>{
    send({
        type: "leave"
    });

    onLeave();
});

function onOffer(offer, name) {
    connectedUser = name;
    yourConnection.setRemoteDescription(new RTCSessionDescription(offer));

    yourConnection.createAnswer(function(answer){
        yourConnection.setLocalDescription(answer);

        send({
            type: "answer",
            answer: answer
        });
    },
    err =>{
        alert("An error");
    }
    );
}

function onAnswer(answer){
    yourConnection.setRemoteDescription(new RTCSessionDescription(answer));
}

function onCandidate(candidate){
    yourConnection.addIceCandidate(new RTCIceCandidate(candidate));
}


function onLeave() {
    connectedUser = null;
    theirVideo.srcObject = null;
    yourConnection.close();
    yourConnection.onicecandidate = null;
    yourConnection.onaddstream = null;
    setupPeerConnection(stream);
}


// 函数的polyfill
function hasUserMedia() {
    navigator.getUserMedia = navigator.getUserMedia
                        || navigator.webkitGetUserMedia
                        || navigator.mozGetUserMedia
                        || navigator.msGetUserMedia;
    return !!navigator.getUserMedia;
}

function hasRTCPeerConnection() {
    window.RTCPeerConnection = window.RTCPeerConnection
                            || window.webkitRTCPeerConnection
                            || window.mozRTCPeerConnection;

    window.RTCSessionDescription = window.RTCSessionDescription
                            || window.webkitRTCSessionDescription
                            || window.mozRTCSessionDescription;
    
    window.RTCIceCandidate = window.RTCIceCandidate
                            || window.webkitRTCIceCandidate
                            || window.mozeRTCIceCandidate;

    return !!window.RTCPeerConnection;
}

// 开始连接
function startConnection() {
    if(hasUserMedia()){
        navigator.getUserMedia({
            video: true,
            audio: false
        },
        myStream => {
            stream = myStream;
            
            try{
                yourVideo.src = window.URL.createObjectURL(stream);
            }catch(e){
                yourVideo.srcObject = stream;
            }

            if(hasRTCPeerConnection()){
                setupPeerConnection(stream);
            }else{
                alert("不支持webRTC");
            }
        },
        error => {
            console.log(error);
        }
        );
    }else{
        alert("不支持webRTC");
    }
}

// 
function setupPeerConnection(stream) {
    let configuration = {
        "iceServers":[
            {"url":"stun:localhost:8888"}
        ]
    };

    yourConnection = new RTCPeerConnection(configuration);

    // 设置流量监听
    yourConnection.addStream(stream);
    yourConnection.onaddstream = function(e) {
        try{
            theirVideo.src = window.URL.createObjectURL(e.stream);
        }catch(e){
            theirVideo.srcObject = stream;
        }
    };
    // 设置ICE处理事件
    yourConnection.onicecandidate = function(event) {
        if(event.candidate){
            send({
                type: "candidate",
                candidate: event.candidate
            });
        }
    };
}

// 开始创建offer
function startPeerConnection(user) {
    connectedUser = user;

    // offer
    yourConnection.createOffer(offer=>{
        send({
            type: "offer",
            offer: offer
        });
        yourConnection.setLocalDescription(offer);
    },
    err => {
        alert("An error has occurred");
    });
}

完整的信令服务器

const WebSocketServer = require('ws').Server,
    wss = new WebSocketServer({port: 8888}),
    users = {};

wss.on("connection", connection => {
    console.log("User connected");

    connection.on("message", message => {
        // console.log("Got message:", message);
        let data, conn;

        try{
            data = JSON.parse(message);
        }catch(e) {
            console.log(e);
            data = {};
        }


        switch(data.type) {
            case "login":
                console.log("User logged in as", data.name);
                if(users[data.name]) {
                    sendTo(connection, {
                        type: "login",
                        success: false
                    });
                }else {
                    users[data.name] = connection;
                    connection.name = data.name;
                    sendTo(connection, {
                        type: "login",
                        success: true
                    });
                }
                break;
            
            case "offer":
                console.log("sending offer to:", data.name);
                conn = users[data.name];

                if(conn != null){
                    connection.otherName = data.name;
                    sendTo(conn, {
                        type: "offer",
                        offer: data.offer,
                        name: connection.name
                    });
                }
                break;

            case "answer":
                console.log("sending answer to:", data.name);
                conn = users[data.name];

                if(conn != null){
                    connection.otherName = data.name;
                    sendTo(conn, {
                        type: "answer",
                        answer: data.answer
                    })
                }
                break;

            case "candidate":
                console.log("sending to", data.name);
                conn = users[data.name];

                if(conn != null){
                    sendTo(conn, {
                        type: "candidate",
                        candidate: data.candidate
                    });
                }
                break;
            
            case "leave":
                console.log("Disconnected user from ", data.name);
                conn = users[data.name];
                conn.otherName = null;

                if(conn != null){
                    sendTo(conn, {
                        type: "leave"
                    });
                }
                break;
                
            default:
                sendTo(connection, {
                    type: "error",
                    message: "Unrecognized command: " + data.type
                });

                break;
        }
    });

});

wss.on("close", function(){
    if(connection.name){
        delete users[connection.name];

        if(connection.otherName) {
            console.log("Disconnected,",connection.otherName);
            let conn = users[connection.otherName];
            conn.otherName = null;

            if(conn != null){
                sendTo(conn,{
                    type: "leave"
                });
            }
        }
    }
});

wss.on("listening", () => {
    console.log("Server started...");
});

function sendTo(conn, message) {
    conn.send(JSON.stringify(message));
}

原文 webRTC-简易视频通讯服务器 - 掘金

★文末名片可以免费领取音视频开发学习资料，内容包括（FFmpeg ，webRTC ，rtmp ，hls ，rtsp ，ffplay ，srs）以及音视频学习路线图等等。

见下方!↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

 

音视频开发老马
关注
WebRTC 服务器搭建篇
yinshipin007的博客
11-24 2985
grunt build //执行结果最后显示 Done, without errors. 就没问题 还是先改src再去build，或者直接修改out里面的配置，都是可以的一个直接改一个是改src。备注：这里我遇到一个坑，就是我用公网的ip启动都提示无法绑定对应的ip，只有用0.0.0.0 启动不报错，所以局域网的时候可以打通，外网的时候coturn打洞都不成功。2.第二步：我们先从房间服务器搭建开始入手，看上面的图，就知道，这个家伙是要用时node.js编译的，那必须安装各种node.js编译相关的插件。
WebRTC服务端架构
uianster的博客
07-19 1745
众所周知webrtc原生的网络连接方式是P2P通信模型，即通信双方是对等的。
简易双端视频通信实现
最新发布
suuijbd的博客
08-18 1085
客户端首先建立用户界面，使用Webcam-capture获取摄像头，使用线程将每一帧图片显示在用户界面上实现视频效果，同时使用BufferedImage获取图片数据，使用Socket与服务端连接，并使用DataOutputStream像服务端发送图片数据。服务端首先建立用户界面，使用ServerSocket、Socket与客户端连接，在线程中使用InputStream和DataInputStream不断读取客户端发来的图片数据，并用画笔Graphics画在用户界面上。//启动摄像头，获取视频数据。
一文看懂WebRTC媒体服务器
Lucky_wu24的博客
04-27 692
WebRTC媒体服务器是 WebRTC 应用中一个可选的组件。也就是说，在大多数常见的使用情况下，你将需要一个。有不同类型的 WebRTC 服务器。其中之一就是 WebRTC 媒体服务器。你什么时候会需要一个，它到底有什么作用？继续阅读。
WebRTC之服务器搭建
qq_52703909的博客
01-24 1057
前言在前面的WebRTC介绍中我们已经介绍了WebRTC的编译以及成功地把WebRTC在Android Studio中运行了起来，详情请猛击在后面的学习过程中，我们将进一步使用WebRTC实现Android端的实时通信对话。为了方便后续的开发和测试，今天我们来搭建WebRTC的服务器环境。安装环境笔者使用的云服务器是Ubuntu 16.04。需要在云服务器后台开放(出入规则)端口: 3478、8080、8089、80、4431、安装JDK2、安装node.js。
WebRTC音视频-环境搭建
xiaoshuaijinniu的博客
07-19 1675
Coturn（简称为 TURN Server）是一个开源的实现了 TURN（Traversal Using Relays around NAT）协议的服务器软件，主要用于解决网络中存在的NAT（Network Address Translation）问题，以及实现实时通信中的穿透和转发功能。如果你的虚拟机环境中新装的，没有安装过编译器，在configure时后，会提示你没有安装必要的编译器，这是正常的，缺什么就安装什么就行了。至此 WebRTC的环境的配置完成了，接下来进行 服务器代码依赖的环境搭建。
webrtc基于webrtc-streamer推流实现直播
02-02
5. **连接WebRTC-Streamer**：将本地RTCPeerConnection的流发送到WebRTC-Streamer服务器。服务器会处理这个流，并将其转换成可以被其他服务消费的格式。 6. **接收端处理**：WebRTC-Streamer服务器将接收到的流转发...
webrtc-streamer
05-22
总的来说，WebRTC-streamer是一个强大的工具，结合WebRTC技术，可以帮助开发者快速构建实时音视频应用，尤其是在Windows环境下，它提供了便捷的集成方案。理解WebRTC的基本原理和相关协议，以及如何配置和使用WebRTC...
webrtc-streamer-v0.8.1
11-16
【标题】"webrtc-streamer-v0.8.1" 是一个特定版本的 WebRTC 流媒体服务器软件。WebRTC（Web Real-Time Communication）是一种开放的API框架，它允许网页浏览器进行实时通信，无需插件或者第三方软件。这个版本 v...
互动直播之WebRTC服务开源技术选型【转】
zzhongcy的专栏
06-12 1908
P2P(peer to peer)对等通信。即在p2p的网络中，所有网络节点都是同等地位，没有服务端和客户端之分，一个节点即是服务端也是客户端。客户端之间可以进行直接的通信，不需要在经过服务端的中转，从而提高网络传输速度和减小服务器压力，这是非常有用的。客户端通信之前，必须知晓接受端的公网IP和端口客户端的p2p通信数据包必须能够穿透NAT(network address translate) 网络地址翻译。
Webrtc官方Demo公网服务器搭建
DevilLee的专栏
06-30 2124
webrtc 公网部署全流程
多人实时互动之各WebRTC流媒体服务器比较
yinshipin007的博客
11-03 913
随着网络基础设施的提高，音视频实时通信越来越成为人们日常生活和工作中必不可少的需求。2011年 WebRTC的出现，则更加速了这种需求变为现实的可能性。熟悉 WebRTC 的同学应该都知道，WebRTC规范只定义了实时通信中客户端的行为，而没有规范服务端（包括哪些信令、数据如何流转）的行为。所以，你可以使用WebRTC库方便的实现 1:1 实时通信，但对于多人实时互动，光依靠 WebRTC库显然就无法完成要求了。那我们该如何实现多人实时互动通信呢？
一对一WebRTC视频通话系列（六）——部署到公网
君莫笑lucky的博客
05-11 1384
本系列博客主要记录WebRtc实现过程中的一些重点，代码全部进行了注释，便于理解WebRTC整体实现。一对一WebRTC视频通话系列。
WebRTC简介及使用
热门推荐
明天你好的博客
11-12 2万+
WebRTC 只是一个媒体引擎，上面有一个 JavaScript API，所以每个人都知道如何使用它（尽管浏览器实现仍然各不相同），本文对 WebRTC（网页实时通信）的相关内容进行简要介绍。WebRTC，名称源自网页实时通信（Web Real-Time Communication）的缩写，是一个支持网页浏览器进行实时语音通话或视频聊天的技术，是谷歌 2010 年以 6820 万美元收购 Global IP Solutions 公司而获得的一项技术。WebRTC 提供了实时音视频的核心技术。
webrtc服务器开发--搭建环境
hugang的博客
04-08 653
【代码】webrtc核心架构--搭建环境。
WebRTC[19]-WebRTC服务器架构
liuzhen007的专栏
07-06 4031
Webrtc在构建浏览器视频通讯会话的时候，对于支持多个参与者（会议，远程学习，联络中心）的更复杂的应用程序，主要有三个WebRTC的网络结构：Mesh（P2P）：每一个P2P连接有独立的传输策略控制，通讯质量有一定的保障。但是，这种架构对于客户端系统是一种浪费，一方面需要分配更多的端口，消耗更多的系统资源；另一方面，由于要向其它三个客户端发送本地音视频数据，增加了...
手把手教你10分钟快速搭建webrtc
kidoo1012的博客
12-20 1万+
先上地址 安卓端： GitHub - logan39522361/webrtc_android: A webrtc android demo. pc端与信令服务器： GitHub - logan39522361/webrtc_signaling_server: A webrtc demo,signaling funcion. 【觉得好的记得star+fork，关注量够的会继续更新多人视频】 webrtc是啥 webrtc的前世今生 大白话就是两大点： 1、webrtc：是由谷歌主导且开源的
WebRTC原理与web端实战开发
m0_73443478的博客
12-28 1268
WebRTC原理与web端实战开发
webrtc-streamer实现低延迟视频流传输
资源摘要信息:"webrtc-streamer是一个开源项目，其主要功能是通过WebRTC技术实现视频捕获设备和RTSP（Real Time Streaming Protocol）源的流式传输。该项目的设计目的是提供一种简单有效的方式来搭建实时视频通信...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值