首先編寫一個後耑server.php，代碼如下
<?php
// 設置路徑
define('_ROOT_', dirname(__FILE__));
require_once _ROOT_.'/tongji.php';
// swoole服務器
$server = new swoole_websocket_server("0.0.0.0", 9001);
$server->on('open', function (swoole_websocket_server $server, $request) {
if(!file_exists(_ROOT_.'/client/'.$request->fd.'.client')){
@file_put_contents(_ROOT_.'/client/'.$request->fd.'.client',$request->fd);
}
});
// 服務耑接收信息事件
$server->on('message', function (swoole_websocket_server $server, $frame) {
foreach(notice(_ROOT_.'/client/') as $v){
$server->push($v,$frame->data);
}
});
// 服務耑接收關閉事件
$server->on('close', function ($ser, $fd) {
@unlink(_ROOT_.'/client/'.$fd.'.client');
});
$server->start();後耑統計模塊 tongji.php
<?php
// 統計在線人數用
function clearDir($dir)
{
$n = 0;
if ($dh = opendir($dir))
{
while (($file = readdir($dh)) !== false)
{
if ($file == '.' or $file == '..')
{
continue;
}
if (is_file($dir . $file)) {
$n++;
}
}
}
closedir($dh);
return $n;
}
// 通知在線的人
function notice($dir){
if ($dh = opendir($dir)) {
while (($file = readdir($dh)) !== false)
{
if ($file == '.' or $file == '..')
{
continue;
}
if (is_file($dir . $file)) {
$array[]=file_get_contents($dir.$file);
}
}
}
closedir($dh);
return $array;
}
前耑index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>直播頁</title>
</head>
<body>
<img id="receiver" style='width:640px;height:480px'/>
<script type="text/javascript" charset="utf-8>
var ws = new WebSocket("ws://127.0.0.1:9001");
var image = document.getElementById('receiver');
ws.onopen = function() {}
ws.onmessage = function(data) {
image.src = data.data;
}
</script>
</body>
</html>直播錄制頁 recorder.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>主播錄制</title>
</head>
<body>
<video id="video" autoplay="" style='width:640px;height:480px'></video>
<canvas id="output" style="display:none"></canvas>
<script type="text/javascript" charset="utf-8">
var ws = new WebSocket("ws://127.0.0.1:9001");
var back = document.getElementById('output');
var backcontext = back.getContext('2d');
var video = document.getElementById("video");
var success = function(stream){
video.src = window.URL.createObjectURL(stream);
}
ws.onopen = function() {
draw();
}
var draw = function() {
try {
backcontext.drawImage(video,0,0, back.width, back.height);
} catch(e) {
if ("NS_ERROR_NOT_AVAILABLE" === e.name) {
return setTimeout(draw, 100);
} else {
throw e;
}
}
if (video.src) {
ws.send(back.toDataURL("image/jpeg", 0.5));
}
setTimeout(draw, 100);
}
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia || navigator.msGetUserMedia;
navigator.getUserMedia({video:true, audio:false}, success, console.log);
</script>
</body>
</html>前耑聊天室 chat.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>前耑聊天室</title>
</head>
<body>
<div id="msg"></div>
<input type="text" id="text">
<input type="submit" value="發送數據" onclick="sendMsg()">
</body>
<script>
var msg = document.getElementById("msg");
var wsServer = 'ws://127.0.0.1:9001';
// 調用websocket對象建立連接：
// 參數：ws/wss(加密)：// ip:port （字符串）
var websocket = new WebSocket(wsServer);
// onopen監聽連接打開
websocket.onopen = function (evt) {
// websocket.readyState 屬性：
/**
CONNECTING 0 尚未開始連接
OPEN 1 連接成功準備通訊
CLOSING 2 連接準備關閉
CLOSED 3 連接已關閉不能重開
*/
msg.innerHTML = websocket.readyState;
};
function sendMsg(){
var text = document.getElementById('text').value;
document.getElementById('text').value = '';
//向服務器發送數據
websocket.send(text);
}
//監聽連接關閉
// websocket.onclose = function (evt) {
// console.log("Disconnected");
// };
// onmessage 監聽服務器數據推送
websocket.onmessage = function (evt) {
msg.innerHTML += evt.data +'<br>';
// console.log('Retrieved data from server: ' + evt.data);
};
// 監聽連接錯誤信息
// websocket.onerror = function (evt, e) {
// console.log('Error occured: ' + evt.data);
// };
</script>
</html>首先確定你當前php環境裡是否正確安裝了swoole
php --ri swoole
如果檢查沒有，需要安裝swoole先
如果安裝了，用以下命令來運行直播間
php ./server.php
完結撒花
