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上不能直接监听两个。所以写的随意了些。
这个就是我最后的效果啦。