WebRTC项目一对一视频

开发步骤


1.客户端显示界面
2.打开摄像头并显示到页面
3.websocket连接
4.join、new-peer、resp-join信令实现
5.leave、peer-leave信令实现
6.offer、answer、candidate信令实现
7.综合调试和完善

1.客户端显示界面

步骤:创建html页面
主要是input、button、video控件的布局。
 


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>webrtc-demo</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            margin: 0;
            padding: 20px;
            text-align: center;
        }
        h1 {
            color: #333;
        }
        #buttons {
            margin-bottom: 20px;
        }
        input[type="text"] {
            padding: 10px;
            width: 250px;
            border: 1px solid #ccc;
            border-radius: 5px;
            margin-right: 10px;
        }
        button {
            padding: 10px 15px;
            border: none;
            border-radius: 5px;
            background-color: #4CAF50;
            color: white;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        button:hover {
            background-color: #45a049;
        }
        #videos {
            display: flex;
            justify-content: center;
            margin-top: 20px;
        }
        video {
            border: 2px solid #ccc;
            border-radius: 5px;
            margin: 0 10px;
            width: 600px; /* 增加视频宽度 */
            height: 400px; /* 设置视频高度 */
        }
    </style>
</head>
<body>
    <h1>webrtc</h1>
    <div id="buttons">
        <input id="roomid" type="text" placeholder="请输入房间id" maxlength="50"/>
        <button id="joinBtn" type="button">加入房间</button>
        <button id="leaveBtn" type="button">离开房间</button>
    </div>

    <div id="videos">
        <video id="localVideo" autoplay playsinline muted controls>本地视频窗口</video>
        <video id="remoteVideo" autoplay playsinline muted controls>远程视频窗口</video>
    </div>

    <script type="module" src="js/main.js"></script>
    <script type="module" src="js/adapter-latest.js"></script>
</body>
</html>

2.打开摄像头并显示到页面

function openLocalStream() {
    //初始化本地码流
    navigator.mediaDevices
    .getUserMedia({ //初始化本地码流信息
        audio: true,
        video: { width: 640, height: 480 }
    })
    .then(function (stream) { // 打开本地码流
        console.log('Open local stream');
        localVideo.srcObject = stream;
        localStream = stream;
    })
    .catch(function (e) { //错误cb
        alert("getUserMedia() error: " + e.name);
    });
}
document.getElementById('joinBtn').onclick = function () {
    console.log("加入按钮被点击");
    openLocalStream();
};


function closeLocalStream() {
    if (localStream) {
        localStream.getTracks().forEach(track => {
            track.stop();
        });
        localStream = null;
        localVideo.srcObject = null;
    }
}
document.getElementById('leaveBtn').onclick = function () {
    console.log("离开按钮被点击");
    closeLocalStream();
};

3.websocket连接

 封装websocket 

class RTCEngine {
    constructor(wsUrl) {
        this.wsUrl = wsUrl;
        this.signaling = null;
        this.createWebSocket();
    }

    createWebSocket() {
        this.signaling = new WebSocket(this.wsUrl);
        this.signaling.onopen = () => this.onOpen();
        this.signaling.onmessage = (ev) => this.onMessage(ev);
        this.signaling.onerror = (ev) => this.onError(ev);
        this.signaling.onclose = (ev) => this.onClose(ev);
    }

    onOpen() {
        console.log("WebSocket opened.");
        //开启心跳包
        this.timerId = setInterval(() => {
            var jsonMsg = {
              'cmd': SIGNAL_TYPE_HEARTBEAT,
              'type': 'active'
            };
            this.sendMessage(JSON.stringify(jsonMsg));
          }, HEARTBEAT_INTERVAL);

    }

    onError(event) {
        console.log("onError: " + event.data);
    }

    onClose(event) {
        console.log("onClose -> code: " + event.code + ", reason: " + event.reason);
        //关闭心跳包
        clearInterval(conn.timerId);
    }

    sendMessage(message) {
        this.signaling.send(message);
    }
    hanleSendHeartBeat(message) {
        var jsonMsg = {
            'cmd': SIGNAL_TYPE_HEARTBEAT,
            'type':'ok'
        };
        this.sendMessage(JSON.stringify(jsonMsg));
    }
    onMessage(event) {
        console.log("onMessage: " + event.data);
        let jsonMsg;
        try {
            jsonMsg = JSON.parse(event.data);
        } catch (e) {
            console.warn("onMessage parse JSON failed: " + e);
            return;
        }

        // 处理从服务器接收到的消息
        switch (jsonMsg.cmd) {
            case SIGNAL_TYPE_NEW_PEER:
                handleRemoteNewPeer(jsonMsg); //doOffer
                break;
            case SIGNAL_TYPE_RESP_JOIN:
                handleResponseJoin(jsonMsg);
                break;
            case SIGNAL_TYPE_PEER_LEAVE:
                handleRemotePeerLeave(jsonMsg);
                break;
            case SIGNAL_TYPE_OFFER:
                handleRemoteOffer(jsonMsg); //doAnswer
                break;
            case SIGNAL_TYPE_ANSWER:
                handleRemoteAnswer(jsonMsg);
                break;
            case SIGNAL_TYPE_CANDIDATE:
                handleRemoteCandidate(jsonMsg);
                break
            case SIGNAL_TYPE_OVERLOAD:
                alert("房间号人数已满,请稍后再试");
                break;
            case SIGNAL_TYPE_HEARTBEAT:
                if(jsonMsg.type == 'active')
                    this.hanleSendHeartBeat(jsonMsg);
                //console.log("收到心跳包:"+jsonMsg.type);
                break;
            default:
                console.warn("unknown cmd: " + jsonMsg.cmd);
                break;
        }
    }
}

// 实例化 RTCEngine
const rtcEngine = new RTCEngine(SERVERADDR);

4.join、new-peer、resp-join overload信令设计

信令设计:
RTCEngineWS.js  websocket封装类负责接收,发送消息以及连接状态管理。
signal.js   信令的设计集合
main.js 主逻辑
思路:(1)点击加入开妞;(2)响应加入按钮事件;(3)将join发送给服务器;(4)服务器 根据当前房间的人数
做处理,如果房间已经有人则通知房间里面的人有新人加入(newpeer),并通知自己房间里面是什么人(resp-join)。如果房间存在2个 则返回房间号人数已满


var jsonMsg = {
    'cmd': 'join',
    'roomId': roomId,
    'uid': localUserId,
};
var jsonMsg = {
    'cmd': 'resp‐join',
    'remoteUid': remoteUid
};
var jsonMsg = {
   'cmd': 'new‐peer',
   'remoteUid': uid
};
var jsonMsg = {
    'cmd': 'overload',
};

5.leave、peer-leave 信令实现

思路:(1)点击离开按钮;(2)响应离开按钮事件;(3)将leave发送给服务器;(4)服
务器处理leave,将发送者删除并通知房间(peer leave)的其他人;(5)房间的其他人在客户
端响应peer leave事件。

var jsonMsg = {
    'cmd': 'leave',
    'roomId': roomId,
    'uid': localUserId,
};
var jsonMsg = {
    'cmd': 'peer‐leave',
    'remoteUid': uid
};
var jsonMsg = {
    'cmd': 'peer‐leave',
    'remoteUid': uid
}; 

 6.offer、answer、candidate信令实现

 思路:
(1C)收到newpeer (handleRemoteNewPeer处理),作为发起者创建RTCPeerConnection,绑定事件响应函数,加入本地流;
(2C)创建offer sdp,设置本地sdp,并将offer sdp发送到服务器;
(3SSS)服务器收到offer sdp 转发给指定的remoteClient;
(4C)接收者收到offer,也创建RTCPeerConnection,绑定事件响应函数,加入本地流;
(5C)接收者设置远程sdp,并创建answer sdp,然后设置本地sdp并将answer sdp发送到服务器;
(6SSS)服务器收到answer sdp 转发给指定的remoteClient;
(7C)发起者收到answer sdp,则设置远程sdp;
(8C)发起者和接收者都收到ontrack回调事件,获取到对方码流的对象句柄;

(9)发起者和接收者都开始请求打洞,通过onIceCandidate获取到打洞信息(candidate)并发送给对方
(10)如果P2P能成功则进行P2P通话,如果P2P不成功则进行中继转发通话。

offer、answer、candidate分别如下
var jsonMsg = {
    'cmd': SIGNAL_TYPE_OFFER,
    'roomId': roomId,
    'uid': localUserId,
    'remoteUid': remoteUserId,
    'msg': JSON.stringify(session)
};
var jsonMsg = {
    'cmd': SIGNAL_TYPE_ANSWER,
    'roomId': roomId,
    'uid': localUserId,
    'remoteUid': remoteUserId,
    'msg': JSON.stringify(session)
};
var jsonMsg = {
    'cmd': SIGNAL_TYPE_CANDIDATE,
    'roomId': roomId,
    'uid': localUserId,
    'remoteUid': remoteUserId,
    'msg': JSON.stringify(event.candidate)
};

 

7.综合调试和完善

正常退出和关闭工作

思路:

(1)点击离开时,要将本地摄像头和麦克风关闭; 要将RTCPeerConnection关闭(close);

(2)检测到客户端退出时,服务器再次检测该客户端是否已经退出房间。

总结

信令服务器设计,主要是转发客户端发来的消息到对端,根据类型进行转发。


 

项目链接

jbj62/webrtc-demo - 码云 - 开源中国

学习资料分享

0voice · GitHub

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/915397.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

GIS基础知识:WKT格式、WKB格式

什么是WKT格式&#xff1f; WKT&#xff08;Well-Known Text&#xff09;是一种用于描述地理空间几何对象的文本格式。 这种格式是由Open Geospatial Consortium&#xff08;OGC&#xff09;定义并维护的一种开放标准&#xff0c;主要用于在不同的GIS系统和数据库之间交换空间…

力扣(LeetCode)611. 有效三角形的个数(Java)

White graces&#xff1a;个人主页 &#x1f649;专栏推荐:Java入门知识&#x1f649; &#x1f439;今日诗词:雾失楼台&#xff0c;月迷津渡&#x1f439; ⛳️点赞 ☀️收藏⭐️关注&#x1f4ac;卑微小博主&#x1f64f; ⛳️点赞 ☀️收藏⭐️关注&#x1f4ac;卑微小博主…

Mac Nginx 前端打包部署

安装homebrew /bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)" 安装Nginx brew install nginx nginx相关命令 nginx启动命令&#xff1a;nginx nginx -s reload #重新加载配置 nginx -s reopen #重启 nginx -s stop #…

利用VMware workstation pro 17安装 Centos7虚拟机以及修改网卡名称

通过百度网盘分享的文件&#xff1a;安装虚拟机必备软件 链接&#xff1a;https://pan.baidu.com/s/1rbYhDh8x1hTzlSNihm49EA?pwdomxy 提取码&#xff1a;omxy 123网盘 https://www.123865.com/s/eXPrVv-UsKch 提取码:eNcy 先自行安装好VMware workstation pro 17 设置虚拟机…

《实时流计算系统设计与实现》-Part 2-笔记

做不到实时 做不到实时的原因 实时计算很难。通过增量计算的方式来间接获得问题的&#xff08;伪&#xff09;实时结果&#xff0c;即使这些结果带有迟滞性和近似性&#xff0c;但只要能够带来尽可能最新的信息&#xff0c;那也是有价值的。 原因可分成3个方面&#xff1a; …

《C陷阱与缺陷》

文章目录 1、【词法陷阱】1.1 符号与组成符号间的关系1.1 与 1.3 y x/*p 与 y x/(*p)&#xff0c;a-1 与 a - 1 与 a -1, 老版本编译器的处理是不同的&#xff0c;严格的ANSI C则会报错1.4 十进制的 076&#xff0c;会被处理为八进制&#xff0c;ANSI C禁止这种用法&#x…

初阶C++之C++入门基础

大家好&#xff01;欢迎来到C篇学习&#xff0c;这篇文章的内容不会很难&#xff0c;为c的引入&#xff0c;c的重点内容将在第二篇的文章中讲解&#xff0c;届时难度会陡然上升&#xff0c;请做好准备&#xff01; 我们先看网络上的一个梗&#xff1a;21天内⾃学精通C 好了&am…

Maven 构建项目

Maven 是一个项目管理和构建工具&#xff0c;主要用于 Java 项目。它简化了项目的构建、依赖管理、报告生成、发布等一系列工作。 构建自动化&#xff1a;Maven 提供了一套标准化的构建生命周期&#xff0c;包括编译、测试、打包、部署等步骤&#xff0c;通过简单的命令就可以执…

Android中桌面小部件的开发流程及常见问题和解决方案

在Android中&#xff0c;桌面小部件&#xff08;App Widget&#xff09;是应用程序可以在主屏幕或其他地方显示的一个可视化组件&#xff0c;提供简化信息和交互功能。Android桌面小部件的framework为开发者提供了接口&#xff0c;使得可以创建和更新小部件的内容。以下是Andro…

opencv(c++)----图像的读取以及显示

opencv(c)----图像的读取以及显示 imread: 作用&#xff1a;读取图像文件并将其加载到 Mat 对象中。参数&#xff1a; 第一个参数是文件路径&#xff0c;可以是相对路径或绝对路径。第二个参数是读取标志&#xff0c;比如 IMREAD_COLOR 表示以彩色模式读取图像。 返回值&#x…

马斯克万卡集群AI数据中心引发的科技涟漪:智算数据中心挑战与机遇的全景洞察

一、AI 爆发重塑数据中心格局 随着AI 技术的迅猛发展&#xff0c;尤其是大模型的崛起&#xff0c;其对数据中心产生了极为深远的影响。大模型以其数以亿计甚至更多的参数和对海量数据的处理需求&#xff0c;成为了 AI 发展的核心驱动力之一&#xff0c;同时也为数据中心带来了…

搭建Python2和Python3虚拟环境

搭建Python3虚拟环境 1. 更新pip2. 搭建Python3虚拟环境第一步&#xff1a;安装python虚拟化工具第二步&#xff1a; 创建虚拟环境 3. 搭建Python2虚拟环境第一步&#xff1a;安装虚拟环境模块第二步&#xff1a;创建虚拟环境 4. workon命令管理虚拟机第一步&#xff1a;安装扩…

C语言的内存函数(文章后附gitee链接,模拟实现函数)

之前我们已经讲解过了字符型数据的一类字符串函数&#xff0c; 现在我们来讨论字符型以外的数据处理。 1&#xff1a;memcpy 的使用和模拟实现 void * memcpy ( void * destination, const void * source, size_t num )&#xff1b; 注意&#xff1a; 1&#xff1a;函数memcp…

FPGA/Verilog,Quartus环境下if-else语句和case语句RT视图对比/学习记录

基本概念 RTL&#xff08;Register - Transfer - Level&#xff09;视图&#xff1a;是一种硬件描述语言的抽象层次&#xff0c;用于描述数字电路中寄存器之间的数据传输和操作。在这个层次上&#xff0c;可以看到电路的基本结构&#xff0c;如寄存器、组合逻辑、多路复用器等…

react的创建与书写

一&#xff1a;创建项目 超全面详细一条龙教程&#xff01;从零搭建React项目全家桶&#xff08;上篇&#xff09; - 知乎 1.创建一个文件夹&#xff0c;shift鼠标右键选择在此处打开powershell 2.为了加速npm下载速度&#xff0c;先把npm设置为淘宝镜像地址。 npm config s…

【动态规划】两个数组的 dp 问题

1. 最长公共子序列 1143. 最长公共子序列 状态表示&#xff1a; dp[i][j] 表示 s1 的 0 ~ i 区间和 s2 的 0 ~ j 区间内所有子序列中&#xff0c;最长公共子序列的长度 状态转移方程&#xff1a; 当 s1[i] 和 s2[j] 相等时&#xff0c;那么最长公共子序列一定是以这两个位置…

【计算机网络】【传输层】【习题】

计算机网络-传输层-习题 文章目录 10. 图 5-29 给出了 TCP 连接建立的三次握手与连接释放的四次握手过程。根据 TCP 协议的工作原理&#xff0c;请填写图 5-29 中 ①~⑧ 位置的序号值。答案技巧 注&#xff1a;本文基于《计算机网络》&#xff08;第5版&#xff09;吴功宜、吴英…

nacos集群部署与配置

Nacos集群模式 1. 预备环境准备 请确保是在环境中安装使用: 64 bit OS Linux/Unix/Mac&#xff0c;推荐使用Linux系统。64 bit JDK 1.8&#xff1b;下载. 配置。Maven 3.2.x&#xff1b;下载. 配置。3个或3个以上Nacos节点才能构成集群 ubuntu中假如没安装jdk&#xff0c;则…

Python学习从0到1 day26 第三阶段 Spark ③ 数据计算 Ⅱ

目录 一、Filter方法 功能 语法 代码 总结 filter算子 二、distinct方法 功能 语法 代码 总结 distinct算子 三、SortBy方法 功能 语法 代码 总结 sortBy算子 四、数据计算练习 需求&#xff1a; 解答 总结 去重函数&#xff1a; 过滤函数&#xff1a; 转换函数&#xff1a; 排…

Jmeter基础篇(23)TPS和QPS的异同

前言 这是一篇性能测试指标的科普文章哦&#xff01; TPS和QPS是同一个概念吗&#xff1f; TPS&#xff08;Transactions Per Second&#xff09;和QPS&#xff08;Queries Per Second&#xff09;虽然都是衡量系统性能的指标&#xff0c;但是它们并不是同一个概念。这两个各…