原文首发链接：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 可以实现点对点的音视频通信。

Swoole 实践篇之结合 WebRTC 实现音视频实时通信方案的更多相关文章

  1. JMeter扩展Java请求实现WebRTC本地音视频推流压测脚本

    WebRTC是Web Real-Time Communication缩写,指网页即时通讯,是一个支持Web浏览器进行实时语音或视频对话的API,实现了基于网页的视频会议,比如声网的Agora Web ...

  2. Vue + WebRTC 实现音视频直播（附自定义播放器样式）

    1. 什么是WebRTC 1.1 WebRTC简介 WebRTC,名称源自网页即时通信(英语:Web Real-Time Communication)的缩写,是一个支持网页浏览器进行实时语音对话或视频 ...

  3. libstagefright 音视频同步方案

    1:音视频数据都有一个list,用于存放解码后的数据:    List mFilledBuffers; 2:解码后的音视频数据不断的往list中存放,不做音视频同步方面的时间上控制    mFille ...

  4. Android IOS WebRTC 音视频开发总结（二十）-- 自由职业

    咋看标题感觉与WebRTC和音视频无关,其实有着很大的关联,文章来自博客园RTC.Blacker,转载请说明出处. 背景: 一方面因为对开发人员比较了解,不喜欢约束,喜欢自由自在,所以我们向往自由职业 ...

  5. WebRTC 音视频开发

    WebRTC 音视频开发 webrtc   Android IOS WebRTC 音视频开发总结(七八)-- 为什么WebRTC端到端监控很关键? 摘要: 本文主要介绍WebRTC端到端监控(我们翻译 ...

  6. 实时音视频互动系列（下）：基于 WebRTC 技术的实战解析

    在 WebRTC 项目中,又拍云团队做到了覆盖系统全局,保证项目进程流畅.这牵涉到主要三大块技术点: 网络端.服务端的开发和传输算法 WebRTC 协议中牵扯到服务端的应用协议和信令服务 客户端iOS ...

  7. 腾讯技术分享：微信小程序音视频与WebRTC互通的技术思路和实践

    1.概述 本文来自腾讯视频云终端技术总监rexchang(常青)技术分享,内容分别介绍了微信小程序视音视频和WebRTC的技术特征.差异等,并针对两者的技术差异分享和总结了微信小程序视音视频和WebR ...

  8. 了不起的WebRTC：生态日趋完善，或将实时音视频技术白菜化

    本文原文由声网WebRTC技术专家毛玉杰分享. 1.前言 有人说 2017 年是 WebRTC 的转折之年,2018 年将是 WebRTC 的爆发之年,这并非没有根据.就在去年(2017年),WebR ...

  9. 转：Android IOS WebRTC 音视频开发总结 （系列文章集合）

    随笔分类 - webrtc   Android IOS WebRTC 音视频开发总结(七八)-- 为什么WebRTC端到端监控很关键? 摘要: 本文主要介绍WebRTC端到端监控(我们翻译和整理的,译 ...

  10. iOS - WebRTC 自编译（音视频即时通讯开源库）

    什么是WebRTC? WebRTC,名称源自网页实时通信(Web Real-Time Communication)的缩写,简而言之它是一个支持网页浏览器进行实时语音对话或视频对话的技术.是谷歌2010 ...

随机推荐

  1. MFC程序隐藏托盘+右键关闭菜单

    背景介绍: 我的程序是启动后,默认就隐藏到托盘中,等待http请求后,显示界面.所以最小化到托盘的代码,我是写在初始化里面.     正文: 一.自定义消息 WM_SHOWTASK #define W ...

  2. windows创建bat文件进行截图

    1.创建 bat 文件 2.编辑文件内容 start snippingtool

  3. MogDB/openGauss学习笔记-获取对象DDL

    MogDB/openGauss 学习笔记-获取对象 DDL 本文出处:https://www.modb.pro/db/399230 内置函数 omm2=# \df *def List of funct ...

  4. PostgreSQL 14.4的安装以及使用以及一些安装的异常

    PostgreSQL 14的安装以及使用 因为公司的一些要求,可能要换数据库,虽然之前装过,但是版本感觉还是新一点比较好,所以重新装一下 首先下载文件,直接去官网下载就行 https://www.en ...

  5. 力扣196(MySQL)-删除重复的电子邮箱（简单）

    题目: 表: Person 编写一个 SQL 删除语句来 删除 所有重复的电子邮件,只保留一个id最小的唯一电子邮件. 以 任意顺序 返回结果表. (注意: 仅需要写删除语句,将自动对剩余结果进行查询 ...

  6. 力扣23(java)-合并k个升序链表（困难）

    题目: 给你一个链表数组,每个链表都已经按升序排列. 请你将所有链表合并到一个升序链表中,返回合并后的链表. 示例 1: 输入:lists = [[1,4,5],[1,3,4],[2,6]]输出:[1 ...

  7. 使用Databricks+Mlflow进行机器学习模型的训练和部署【Databricks 数据洞察公开课】

    简介: 介绍如何使用Databricks和MLflow搭建机器学习生命周期管理平台,实现从数据准备.模型训练.参数和性能指标追踪.以及模型部署的全流程. 作者:李锦桂   阿里云开源大数据平台开发工程 ...

  8. Spring Boot Serverless 实战系列 | 性能调优

    ​简介:Spring Boot Serverless 实战系列第四篇来啦,本文将向大家介绍如何对 Serverless 应用进行性能调优. SpringBoot 是基于 Java Spring 框架的 ...

  9. 使用MaxCompute LOAD命令批量导入OSS数据最佳实践—STS方式LOAD开启KMS加密OSS数据

    简介: MaxCompute使用load overwrite或load into命令将外部存储的数据(如:oss)导入到MaxCompute前的授权操作. MaxCompute使用load overw ...

  10. [FAQ] puppeteer 清空输入框的值 并 重新输入

    一种方式是,清空输入框可以通过如下注入代码实现,但是可能存在 和页面本身的操作 存在优先级问题. await page.evaluate( () => document.getElementBy ...