Swoole 实践篇之结合 WebRTC 实现音视频实时通信方案

🕗 发布于 2024-04-20 12:51 swoole webrtc 音视频

原文首发链接：Swoole 实践篇之结合 WebRTC 实现音视频实时通信方案
大家好，我是码农先森。

引言

这次实现音视频实时通信的方案是基于 WebRTC 技术的，它是一种点对点的通信技术，通过浏览器之间建立对等连接，实现音频和视频流数据的传输。

在 WebRTC 技术中通常使用 WebSocket 服务来协调浏览器之间的通信，建立 WebRTC 通信的信道，传输通信所需的元数据信息，如：SDP、ICE 候选项等。

WebRTC 技术在实时通信领域中得到了广泛应用，包括在线会议、视频聊天、远程协作等，例如：腾讯在线会议就是基于此技术实现的。

技术实现

index.html 作为首页，这里提供了发起方、接收方的操作入口。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>p2p webrtc</title>
<style>
.container {
width: 250px;
margin: 100px auto;
padding: 10px 30px;
border-radius: 4px;
    border: 1px solid #ebeef5;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
    color: #303133;
}
</style>
</head>
<body>
<div class="container">
<p>流程：</p>
<ul>
<li>打开<a href="/p2p?type=answer" target="_blank">接收方页面</a>；</li>
<li>打开<a href="/p2p?type=offer" target="_blank">发起方页面</a>；</li>
<li>确认双方都已建立 WebSocket 连接；</li>
<li>发起方点击 开始 按钮。</li>
</ul>
</div>
</body>
</html>

p2p.html 作为视频展示页面，且实现了调取摄像头及音频权限的功能，再将连接数据推送到 WebSocket 服务端，最后渲染远程端的音视频数据到本地。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container {
width: 100%;
display: flex;
display: -webkit-flex;
justify-content: space-around;
padding-top: 20px;
}
.video-box {
position: relative;
width: 330px;
height: 550px;
}
#remote-video {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
border: 1px solid #eee;
background-color: #F2F6FC;
}
#local-video {
position: absolute;
right: 0;
bottom: 0;
width: 140px;
height: 200px;
object-fit: cover;
border: 1px solid #eee;
background-color: #EBEEF5;
}
.start-button {
position: absolute;
left: 50%;
top: 50%;
width: 100px;
display: none;
line-height: 40px;
outline: none;
color: #fff;
background-color: #409eff;
border: none;
border-radius: 4px;
cursor: pointer;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="container">
<div class="video-box">
<video id="remote-video"></video>
<video id="local-video" muted></video>
<button class="start-button" onclick="startLive()">开始</button>
</div>
</div>
<script>
const target = location.search.slice(6);
const localVideo = document.querySelector('#local-video');
const remoteVideo = document.querySelector('#remote-video');
const button = document.querySelector('.start-button');

localVideo.onloadeddata = () => {
console.log('播放本地视频');
localVideo.play();
}
remoteVideo.onloadeddata = () => {
console.log('播放对方视频');
remoteVideo.play();
}

document.title = target === 'offer' ? '发起方' : '接收方';

console.log('信令通道（WebSocket）创建中......');
const socket = new WebSocket('ws://127.0.0.1:9502');
socket.onopen = () => {
console.log('信令通道创建成功！');
target === 'offer' && (button.style.display = 'block');
}
socket.onerror = () => console.error('信令通道创建失败！');
socket.onmessage = e => {
const { type, sdp, iceCandidate } = JSON.parse(e.data)
if (type === 'answer') {
peer.setRemoteDescription(new RTCSessionDescription({ type, sdp }));
} else if (type === 'answer_ice') {
peer.addIceCandidate(iceCandidate);
} else if (type === 'offer') {
startLive(new RTCSessionDescription({ type, sdp }));
} else if (type === 'offer_ice') {
peer.addIceCandidate(iceCandidate);
}
};

const PeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection;
!PeerConnection && console.error('浏览器不支持WebRTC！');
const peer = new PeerConnection();

peer.ontrack = e => {
if (e && e.streams) {
console.log('收到对方音频/视频流数据...');
remoteVideo.srcObject = e.streams[0];
}
};

peer.onicecandidate = e => {
if (e.candidate) {
console.log('搜集并发送候选人');
socket.send(JSON.stringify({
type: `${target}_ice`,
iceCandidate: e.candidate
}));
} else {
console.log('候选人收集完成！');
}
};

async function startLive (offerSdp) {
target === 'offer' && (button.style.display = 'none');
let stream;
try {
console.log('尝试调取本地摄像头/麦克风');
stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
console.log('摄像头/麦克风获取成功！');
localVideo.srcObject = stream;
} catch {
console.error('摄像头/麦克风获取失败！');
return;
}

console.log(`------ WebRTC ${target === 'offer' ? '发起方' : '接收方'}流程开始 ------`);
console.log('将媒体轨道添加到轨道集');
stream.getTracks().forEach(track => {
peer.addTrack(track, stream);
});

if (!offerSdp) {
console.log('创建本地SDP');
const offer = await peer.createOffer();
await peer.setLocalDescription(offer);

console.log(`传输发起方本地SDP`);
socket.send(JSON.stringify(offer));
} else {
console.log('接收到发送方SDP');
await peer.setRemoteDescription(offerSdp);

console.log('创建接收方（应答）SDP');
const answer = await peer.createAnswer();
console.log(`传输接收方（应答）SDP`);
socket.send(JSON.stringify(answer));
await peer.setLocalDescription(answer);
}
}
</script>
</body>
</html>

在 http_server.php 文件中实现了一个 Web 服务，并根据不同的路由返回对应的 HTML 页面服务，主要是用于提供视频页面的展示。

<?php

// 创建一个 HTTP 服务
$http = new Swoole\Http\Server("0.0.0.0", 9501);

// 监听客户端请求
$http->on('request', function ($request, $response) {
    $path = $request->server['request_uri'];
    switch ($path) {
        case '/':
            $html = file_get_contents("index.html");
            $response->header("Content-Type", "text/html");
            $response->end($html);
            break;

        case '/p2p':
            $html = file_get_contents("p2p.html");
            $response->header("Content-Type", "text/html");
            $response->end($html);
            break;
        default:
            $response->status(404);
            $response->end("Page Not Found");
            break;
    }
});

// 启动 HTTP 服务
$http->start();

在 websocket_server.php 文件中实现了一个 WebSocket 服务，并设置了 onOpen、onMessage 和 onClose 回调函数。在 onMessage 回调函数中，遍历所有连接，将消息发送给除当前连接外的其他连接。

<?php

// 创建 WebSocket 服务
$server = new Swoole\WebSocket\Server("0.0.0.0", 9502);

// 监听 WebSocket 连接事件
$server->on('open', function (Swoole\WebSocket\Server $server, $request) {
    echo "新的客户端连接: {$request->fd}\n";
});

// 监听 WebSocket 消息事件
$server->on('message', function (Swoole\WebSocket\Server $server, $frame) {
    echo "收到消息来自 {$frame->fd}: {$frame->data}, 广播给其他的客户端\n";
    
    // 广播给其他的客户端
    foreach ($server->connections as $fd) {
        if ($fd != $frame->fd) {
            $server->push($fd, $frame->data);
        }
    }
});

// 监听 WebSocket 关闭事件
$server->on('close', function ($ser, $fd) {
    echo "客户端 {$fd} 关闭连接\n";
});

// 启 WebSocket 服务
$server->start();

总结

音视频通信技术方案是基于 WebRTC 实现的，Swoole 在其中的作用是提供了页面的 Web 服务及协调浏览器之间通信的 WebSocket 服务。
WebRTC 是一项重要的技术，它使得实时音视频通信变得简单而高效。通过基于浏览器的 API，WebRTC 可以实现点对点的音视频通信。

原文地址：https://blog.csdn.net/yxhbk/article/details/137843189

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：CSS3 立体 3D 变换
下一篇：WPS二次开发专题：WPS SDK事件回调

linux线程cp模型，posix信号量，线程池，线程封装，单例模型，懒汉饿汉实现方式，自旋锁，读者写者模型
前面的同步，我们并没有一个很好的场景来模拟同步，只是简单的将有序的现象输出出来；现在我们来讲解一个比较合理且常见的模型——生产者消费者模型；
阅读更多2024-09-07
Qt/C++开源项目 TCP服务器调试助手（源码分享+发布链接下载）
该TCP服务器调试助手是用于测试和监控基于TCP协议的网络通信工具，能够帮助开发者便捷地进行网络通信调试。通过简洁的界面设计，用户可以轻松配置、管理TCP端口的连接，收发消息并进行数据监控分析。123
阅读更多2024-09-07
vue3整合antv x6实现图编辑器快速入门
例如：在上面节点基础上，我们有一个新的需求：给节点加上右键菜单。X6 支持使用 SVG、HTML 来渲染节点内容，在此基础上，我们还可以使用 React、Vue 组件来渲染节点，这样在开发过程中会非常
阅读更多2024-09-07
linux使用samba共享目录，其他虚拟机和windows都可以访问
linux使用samba共享目录，其他虚拟机和windows都可以访问
阅读更多2024-09-07
Linux系统编程实现ls -l | wc -l指令
由于该指令是通过管道的形式实现的，所以我们要使用系统函数pipe。ls -l |wc -l的作用就是统计当前目录有多少文件。由于父子间通过管道实现，所以存在读写阻塞问题，不用担心僵尸进程的产生，所以可
阅读更多2024-09-07
MySQL表操作及约束
MySQL表操作及约束
阅读更多2024-09-07
1.2CubeMAX创建FREERTOS入门示例
内核参数设置，用户根据自己的实际应用来裁剪定制。：相关宏的定义，可以自建一些常量在工程中使用。User Constants（用户常量）：定时器和信号量的创建。：用于查看堆使用情况。：任务与队列
阅读更多2024-09-07
YOLOv9改进策略【注意力机制篇】| PSA极化自我关注：实现高质量像素回归
本文记录的是基于PSA注意力模块的YOLOv9目标检测方法研究。PSA模块。本文将其应用到YOLOv9的检测任务中，使模型能够更好地捕捉图像中的细节信息，以实现目标检测任务中准确识别和定位。
阅读更多2024-09-07
爆改YOLOv8|利用yolov10的SCDown改进yolov8-下采样
yolov8改进，yolov10, 下采样SCDown, 即插即用
阅读更多2024-09-07
PDF样本图册转换为一个链接，随时打开无需印刷
想象一下，您手中有一本厚重的样本图册，里面包含了丰富多样的内容，如产品介绍、项目方案、学术论文等。在过去，您需要逐一翻阅、筛选，甚至为了便于查看，不得不将其印刷出来。如今，借助先进的数字化技术，还能实
阅读更多2024-09-07

Swoole 实践篇之结合 WebRTC 实现音视频实时通信方案

引言

技术实现

总结

相关文章