原文首发链接：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. HarmonyOS如何使用异步并发能力进行开发

      一.并发概述 并发是指在同一时间段内,能够处理多个任务的能力.为了提升应用的响应速度与帧率,以及防止耗时任务对主线程的干扰,HarmonyOS系统提供了异步并发和多线程并发两种处理策略. ● 异步 ...

  2. Centos调整分区存储大小

    将/home下900G转移到/目录下 1.查看分区大小:df -hl 2.备份home文件:tar cvf /run/home.tar /home 3.终止home文件进程(切换到非home路径下执行 ...

  3. navicat连接mysql8报错

    mysql8采用更安全的加密方式,navicat不支持,网上大多办法都是采用的更改数据库加密方式为外部加密 个人觉得这样它不太合适 so,终于找到一个办法: 把mysql8安装后的lib文件夹里的 l ...

  4. 搞定了 6 种分布式ID，分库分表哪个适合做主键？

    大家好,我是小富- 本文是<ShardingSphere5.x分库分表原理与实战>系列的第七篇,目前系列的前几篇制作成了PDF,需要的可以在文末获取下载方式,持续更新中.今天咱们继续一起来 ...

  5. python实现不同颜色气球隔开摆放，并且提示不能摆放的情况

    这个是一位隐秘人物让我做的一道题(如标题),我也分享出来了. 首先是成品展示(暂时没有做成可视化界面的样子): 我做的是把所有的气球录入进来,然后利用基础数据结构(字典,数据等)排序等,由于我是初学, ...

  6. 力扣453(java)-最小操作次数使数组元素相等（简单）

    题目: 给你一个长度为 n 的整数数组,每次操作将会使 n - 1 个元素增加 1 .返回让数组所有元素相等的最小操作次数. 示例 1: 输入:nums = [1,2,3]输出:3解释:只需要3次操作 ...

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

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

  8. 所有前端都要看的2D游戏化互动入门基础知识

    简介: 在非游戏环境中将游戏的思维和游戏的机制进行整合运用,以引导用户互动和使用 本文作者:淘系前端团队-Eva.js作者-明非 背景 现在越来越多的公司和 App 开始使用游戏化的方式去做产品了,所 ...

  9. MaxCompute非事务表如何更新数据

    简介: 本文主要讲解如何通过insert overwrite更新数据 背景 对于大数据中的大多数存储格式,支持随机更新非常复杂.它需要扫描大型文件,MaxCompute推出了最新的功能Transact ...

  10. [DOT] Polkadot-js 的官方资源

    官网:https://polkadot.js.org/ 浏览器扩展(即钱包, 等同以太坊的MetaMask):https://polkadot.js.org/extension/ 钱包的作用方便你管理 ...