workerman实现直播

最新推荐文章于 2026-07-02 17:00:08 发布

原创最新推荐文章于 2026-07-02 17:00:08 发布 · 2.9k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

php

本文介绍了如何利用Workerman在后台构建直播服务器，配合前端页面的直播按钮，实现实时直播功能。通过Canvas作为图形容器，点击开始直播，与Workerman后台交互，完成直播的启动。

首先是在前台页面
注：canvas是图形容器
假设给定一个直播按钮
 //开始直播
 $("#start_live").click(function () 
      {
        var live_ws = new WebSocket("ws://47.95.207.226:10010");
        //获取容器   （视屏是由一针一针的图片组成
        var canvas = document.getElementById("output");


        var context = canvas.getContext("2d");//返回一个用于在画布上绘图的环境  返回的是二维的  


        //视屏标签的对象
        var video =  document.getElementById("sourcevid");


        //设备开启成功回调函数   参数为数据流   也就是摄像头获取到的当前的图片
        var success = function(stream)
        {
            //把数据流以地址的方式放入到vedio标签中 
            video.src = window.URL.createObjectURL(stream);
        };




        //给服务端发送数据
        live_ws.onopen = function()
        {
          var message = '{"name":"'+name+'","type":"startLive","img":"'+img+'"}';


          ws.send(message);//发送给聊天室通知所有连接 某某正在直播
          onopen();
        };


        var onopen = function()
        {
            // 从vedio标签中取出以图片的形式存储到容器里 
            context.drawImage(video,0,0,canvas.width,canvas.height);
          
          if(video.src)
          {
            // alert(canvas.toDataURL("image/png"));
              //如果有视频，就把容器中的所有图片往workerman中发送(每一次都会发送一张  所以后续还要递归实现)
                 // todataurl  返回一个包含图片展示的data  URI
              live_ws.send(canvas.toDataURL("image/png"));
          }
           setTimeout(onopen, 100);//指定在0.1秒执行一次
        };




        /**开启设备*/
        //看media支持哪种浏览器  支持哪种用哪种
        navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||navigator.mozGetUserMedia || navigator.msGetUserMedia;
        //提醒用户需要使用的音频  视屏 相机  屏幕共享   麦克风  参数中 参1：指定请求使用的媒体类型 还有每个类型的需要的参数  ej:video:true  选择的是true开启    参2：seccess是成功回调的函数   参3：con..是失败回调 
        navigator.getUserMedia({video:true, audio:true}, success,console.log);
     });

workerman后台服务器

<?php
use Workerman\Worker;

// 注意：这里与上个例子不通，使用的是websocket协议
$live_worker = new Worker("websocket://0.0.0.0:10011");//主播

$live_worker->name = "Live";

$live_worker->onWorkerStart = function($live_worker)
{
	$people_worker = new Worker("websocket://0.0.0.0:10022");//子进程

	$people_worker->onMessage = function($connection,$data)
	{

	};

	$live_worker->p_worker = $people_worker;

	$people_worker->listen();
};

$live_worker->onMessage = function($connection,$data) use ($live_worker)
{
	echo "data:".$data."\n";

	foreach ($live_worker->p_worker->connections as $send_conn) 
	{
		$send_conn->send($data);
	}
};