使用Workerman做一个简单的录像直播功能

1、准备好项目

之前做过一个简单的聊天室，我是根据之前弄的聊天室改过来的。
参考：https://blog.csdn.net/qq_38231822/article/details/112800457

2、大致思路

	这些小东西都是自己没事捅咕玩的，随便写一写。概括来说的话就是将录像定时的转成图片的数据流发送到workerman，再通过workerman发送给客户端

3、来吧开始上东西

这个是workerman的处理的代码

<?php
use Workerman\Worker;
require_once "Workerman/Autoloader.php";
//简易聊天室
$global_uids = 0;
//一共有多少用户//用户连接事件
function conn($connection)
{global $worker,$global_uids;$connection->uid = ++$global_uids;
}//接收用户发送消息事件  然后发送给所有用户
function msg($connection,$data)
{global $worker;foreach ($worker->connections as $conn) {$conn->send("用户{$connection->uid}说:{$data}");}
}//用户退出事件
function close($connection)
{global $worker;foreach ($worker->connections as $conn) {$conn->send("用户{$connection->uid}离开");}
}	$worker = new Worker('websocket://0.0.0.0:2222');
$worker->count = 1;
$worker->onConnect = 'conn';
$worker->onMessage = 'msg';
$worker->onClose   = 'close';Worker::runAll();

这个是之前的1.html，就是读取视频的页面

<!DOCTYPE html>
<html>
<head><title></title><script type="text/javascript" src="jquery.3.5.0.min.js"></script><style type="text/css">*{padding:20px;}#box{width: 500px;height: auto;border:1px lightgray solid;}</style>
</head>
<body>
<div id="box"><img src="img/logo.jpg" id="img" style="width: 300px;">
</div>
<input type="text" placeholder="输入要发送的内容" id="message">
<input type="button" name="" value="发送" id="sub">
<script type="text/javascript">
ws = new WebSocket("ws://127.0.0.1:2222");
ws.onopen = function() {$("#box").append("连接成功<br />");};
ws.onmessage = function(e) {if (e.data.length > 1000) {src = e.data.substring(5,e.data.length);try{imageUrl = src;}catch(error){imageUrl = window.URL.createObjectURL(src); }$("#img").attr("src",imageUrl);} else {$("#box").append(e.data + "<br />");}
};
$("#sub").click(function(){let content = $("#message").val();ws.send(content);
});
</script>
</body>
</html>

又加了个页面，是放视频的。

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>capture screen</title>
</head>
<body>
<div id="box"></div>
<video id="video" controls="controls" style="width: 300px;"><source src="vedio/1.mp4" type="video/mp4">
</video>
<div id="output"></div>
<script type="text/javascript" src="jquery.3.5.0.min.js"></script>
<script type="text/javascript">(function(){ws = new WebSocket("ws://127.0.0.1:2222");ws.onopen = function() {$("#box").append("连接成功<br />");};ws.onmessage = function(e) {if (e.data.length > 1000) {return;}$("#box").append(e.data + "<br />");};var tmp_canvas;var video, output;var scale = 0.3;var initialize = function() {output = document.getElementById("output");video = document.getElementById("video");video.addEventListener('click',captureImage);};var captureImage = function() {var canvas = document.createElement("canvas");canvas.width = video.videoWidth * scale;canvas.height = video.videoHeight * scale;canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);// var img = document.createElement("img");// img.src = canvas.toDataURL("image/jpeg");tmp_canvas = canvas;// output.appendChild(tmp_canvas);};initialize();setInterval(function(){$("#video").trigger("click");ws.send(tmp_canvas.toDataURL("image/jpg", 0.8));},16);})();
</script>
</body>
</html>

在这里插入图片描述

这张图片就是最后的目录的结构。改一下视频的路径啊，图片的路径，基本就可以了。大致的操作方法和之前的一样，dos窗口运行chat.php的文件，然后先打开test.html，再打开其他的页面，大致就可以啦。Linux上的话可以通过监听不同的端口来实现直播和客户的分开，我是windows上随便写写玩的，windows上不能直接监听两个。所以写的随意了些。
在这里插入图片描述
这个就是我最后的效果啦。