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

最新推荐文章于 2022-11-01 10:15:47 发布

筱宇***

最新推荐文章于 2022-11-01 10:15:47 发布

阅读量593

点赞数

分类专栏： workerman websocket 各种遇到的问题文章标签： php websocket

本文链接：https://blog.csdn.net/qq_38231822/article/details/112843130

版权

各种遇到的问题同时被 3 个专栏收录

12 篇文章 0 订阅

订阅专栏

websocket

8 篇文章 1 订阅

订阅专栏

workerman

7 篇文章 8 订阅

订阅专栏

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

筱宇***

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用Workerman做一个简单的录像直播功能

1、准备好项目之前做过一个简单的聊天室，我是根据之前弄的聊天室改过来的。参考：https://blog.csdn.net/qq_38231822/article/details/1128004572、大致思路这些小东西都是自己没事捅咕玩的，随便写一写。3、...
复制链接

扫一扫

专栏目录