실시간 오디오 및 비디오 통신을 위해 PHP 및 WebRTC 프로토콜을 사용하는 방법
- PHPz원래의
- 2023-08-01 15:21:381286검색
실시간 오디오 및 비디오 통신을 위해 PHP 및 WebRTC 프로토콜을 사용하는 방법
오늘날 인터넷 시대에 실시간 오디오 및 비디오 통신은 사람들의 일상 생활에서 없어서는 안될 부분이 되었습니다. 개방형 실시간 통신 표준인 WebRTC(웹 실시간 통신) 기술은 웹 애플리케이션에 실시간 오디오 및 비디오 통신을 내장하기 위한 강력한 지원을 제공합니다. 이 기사에서는 실시간 오디오 및 비디오 통신을 위해 PHP 및 WebRTC 프로토콜을 사용하는 방법을 소개하고 해당 코드 예제를 제공합니다.
- WebRTC 소개
WebRTC는 Google이 개발하고 홍보하는 실시간 통신 표준으로 웹 브라우저에서 오디오, 비디오 및 데이터의 실시간 전송을 실현할 수 있습니다. 표준 네트워크 프로토콜(예: HTTP, WebSocket)과 JavaScript API를 기반으로 하므로 추가 플러그인이나 확장 없이 P2P 기술을 통해 실시간 데이터 전송이 가능합니다. - 준비
WebRTC와의 실시간 오디오 및 비디오 통신을 위해 PHP를 사용하기 전에 몇 가지 준비를 해야 합니다. 먼저 최신 버전의 PHP와 웹 서버(예: Apache 또는 Nginx)가 설치되어 있는지 확인하세요. 그런 다음 Google Chrome 또는 Mozilla Firefox와 같이 WebRTC를 지원하는 브라우저도 필요합니다. - 서버 설정
실시간 오디오 및 비디오 통신을 위해서는 두 당사자 간의 신호를 조정하고 전송할 신호 서버를 구축해야 합니다. PHP에서는 WebSocket 기술을 사용하여 신호 서버를 구현할 수 있습니다.
다음은 Ratchet WebSocket 라이브러리를 사용하여 구현한 간단한 시그널링 서버의 예입니다.
<?php
use RatchetMessageComponentInterface;
use RatchetConnectionInterface;
require 'vendor/autoload.php';
class SignalingServer implements MessageComponentInterface
{
protected $clients;
public function __construct()
{
$this->clients = new SplObjectStorage;
}
public function onOpen(ConnectionInterface $conn)
{
$this->clients->attach($conn);
}
public function onMessage(ConnectionInterface $from, $msg)
{
foreach ($this->clients as $client) {
if ($client !== $from) {
$client->send($msg);
}
}
}
public function onClose(ConnectionInterface $conn)
{
$this->clients->detach($conn);
}
public function onError(ConnectionInterface $conn, Exception $e)
{
$conn->close();
}
}
$server = RatchetServerIoServer::factory(
new RatchetHttpHttpServer(
new RatchetWebSocketWsServer(
new SignalingServer()
)
),
8080
);
$server->run();위 코드에서는 WebSocket 서버를 구현하기 위해 Ratchet WebSocket 라이브러리를 사용했습니다. Composer를 사용하여 라이브러리를 설치할 수 있습니다.
- WebRTC 애플리케이션 만들기
클라이언트 측에서는 WebRTC 기술을 사용하여 실시간 오디오 및 비디오 통신 애플리케이션을 만듭니다. HTML5와 JavaScript를 통해 달성할 수 있습니다.
다음은 간단한 WebRTC 애플리케이션의 코드 예입니다.
<!DOCTYPE html>
<html>
<head>
<title>WebRTC Video Chat</title>
</head>
<body>
<video id="localVideo" autoplay></video>
<video id="remoteVideo" autoplay></video>
<button id="startButton">Start Call</button>
<button id="hangupButton">Hang Up</button>
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
<script>
const startButton = document.getElementById('startButton');
const hangupButton = document.getElementById('hangupButton');
const localVideo = document.getElementById('localVideo');
const remoteVideo = document.getElementById('remoteVideo');
let localStream;
let peerConnection;
startButton.addEventListener('click', startCall);
hangupButton.addEventListener('click', hangup);
async function startCall() {
localStream = await navigator.mediaDevices.getUserMedia({audio: true, video: true});
localVideo.srcObject = localStream;
const configuration = {iceServers: [{urls: 'stun:stun.l.google.com:19302'}]};
peerConnection = new RTCPeerConnection(configuration);
peerConnection.addEventListener('icecandidate', handleIceCandidate);
peerConnection.addEventListener('track', handleRemoteStreamAdded);
localStream.getTracks().forEach(track => {
peerConnection.addTrack(track, localStream);
});
const offer = await peerConnection.createOffer();
await peerConnection.setLocalDescription(offer);
// 将信令通过WebSocket发送给信令服务器
sendSignaling(JSON.stringify(offer));
}
async function handleIceCandidate(event) {
if (event.candidate) {
sendSignaling(JSON.stringify({ice: event.candidate}));
}
}
async function handleRemoteStreamAdded(event) {
remoteVideo.srcObject = event.streams[0];
}
async function hangup() {
localStream.getTracks().forEach(track => {
track.stop();
});
peerConnection.close();
// 发送挂断信令给信令服务器
sendSignaling(JSON.stringify({hangup: true}));
}
function sendSignaling(message) {
const ws = new WebSocket('ws://localhost:8080');
ws.addEventListener('open', () => {
ws.send(message);
ws.close();
});
}
</script>
</body>
</html>위 코드에서는 먼저 getUserMedia API를 통해 로컬 오디오 및 비디오 스트림을 가져와 페이지에 표시합니다. 그런 다음 RTCPeerConnection 객체를 생성하고 icecandidate를 수신하고 이에 대한 이벤트를 추적했습니다. createOffer 메소드를 통해 디바이스 간 교환을 위한 SDP(Session Description Protocol)를 생성하고, setLocalDescription 메소드를 통해 로컬 설명을 설정합니다. 마지막으로 이 SDP 신호를 신호 서버로 보냅니다.
- 오디오 및 비디오 통신 구현
두 장치 간의 오디오 및 비디오 통신을 구현하려면 신호 서버 및 WebRTC 애플리케이션에 몇 가지 추가 코드를 추가해야 합니다. 다음은 간단한 구현 예입니다.
시그널링 서버:
<?php
// ...
public function onMessage(ConnectionInterface $from, $msg)
{
$data = json_decode($msg);
if (isset($data->sdp)) {
// 处理SDP信令（包括offer和answer）
foreach ($this->clients as $client) {
if ($client !== $from) {
$client->send($msg);
}
}
} elseif (isset($data->ice)) {
// 处理ICE候选信令
foreach ($this->clients as $client) {
if ($client !== $from) {
$client->send($msg);
}
}
} elseif (isset($data->hangup)) {
// 处理挂断信令
foreach ($this->clients as $client) {
if ($client !== $from) {
$client->send($msg);
$this->onClose($client);
}
}
}
}
// ...WebRTC 애플리케이션:
// ...
async function handleSignalingMessage(message) {
const data = JSON.parse(message);
if (data.sdp) {
await peerConnection.setRemoteDescription(new RTCSessionDescription(data.sdp));
if (data.sdp.type === 'offer') {
const answer = await peerConnection.createAnswer();
await peerConnection.setLocalDescription(answer);
// 发送回答信令给信令服务器
sendSignaling(JSON.stringify(answer));
}
} else if (data.ice) {
await peerConnection.addIceCandidate(new RTCIceCandidate(data.ice));
} else if (data.hangup) {
// 处理挂断信令
hangup();
}
}
// ...기기 A가 시그널링 서버를 통해 기기 B에 대한 호출을 시작하면 기기 B는 제안 시그널링 정보가 포함된 WebSocket을 수신합니다. 장치 B는 원격 설명을 설정하여 통화 요청을 수락하고 자체 응답 신호를 생성한 다음 장치 A로 다시 보냅니다.
기기 A가 기기 B로부터 응답 신호를 받으면 원격 설명을 설정하고 기기 B와의 연결 설정을 시작합니다. ICE 후보 시그널링을 교환함으로써 장치 A와 장치 B는 최적의 통신 경로를 찾습니다.
기기 A 또는 기기 B가 통화를 종료하면 신호 서버에 끊기 신호를 보내고 상대방과의 연결을 종료합니다.
요약
PHP와 WebRTC 프로토콜을 사용하면 실시간 오디오 및 비디오 통신을 쉽게 구현할 수 있습니다. 이번 글에서는 WebRTC의 기본 원리와 사용법을 알아보고, 해당 코드 예제를 제공했습니다. 이 기사의 소개가 독자들이 실시간 오디오 및 비디오 통신을 위해 PHP 및 WebRTC 프로토콜을 사용하는 방법을 이해하는 데 도움이 되기를 바랍니다.
위 내용은 실시간 오디오 및 비디오 통신을 위해 PHP 및 WebRTC 프로토콜을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!