swoole 直播

admin

主要使用 webstocket
' R' d7 f) N  f  Q7 \上代码

前端

观看页面

1. <script type="text/javascript">
   0 r* k* U3 ^, I% y; i4 Y
2. var ws = new WebSocket('ws://192.168.0.150:9502');
   
3. 
   
4. ws.onopen = function() {
   ) z. n  B: q. l1 e0 ^/ J
5.     console.log("连接成功");
   
6. };
   
7. ws.onmessage = function(e) {
   * Q% m, ?7 ^7 B# u5 }% e, f
8.    console.log(e);
   
9. 
   
10.    var data = e.data;
    2 W4 l! L4 J/ p) |# |. q7 m  Z7 j( Z
11.    document.getElementById('player').src=data;
    
12. };
    
13. ws.onerror = function() {
    ' j: l# k* @, T- t" n2 \/ o
14.     console.log("关闭连接");
    
15. };
    0 W# b$ Q. A; f; `
16. </script>

复制代码

录像页面

  D: z0 U3 q) T! n) a$ [/ E

最好用火狐测试。

1. <canvas id="output" style="display:none"></canvas>
   
2. 
   ! H3 O1 t. {9 J1 S) L% k4 L# a
3. 
   9 L$ I  \$ i. }: ~. \4 [# z: b5 ]
4. 
   ; j- u) A# X$ k4 s2 m
5. <script type="text/javascript" charset="utf-8">
   : t4 Z" a8 ^) j* d2 @
6. 
   
7. 
   
8.     var socket = new WebSocket('ws://192.168.0.150:9502');
   / j# m  s  w  ]4 x
9.     //socket.send("嗨我登陆了");
   ' x- y, T8 d4 M, P4 d$ t
10. 
    
11.     var back = document.getElementById('output');
    
12.     var backcontext = back.getContext('2d');
    8 h+ H* T7 `8 m7 _9 d
13.     var video = document.getElementsByTagName('video')[0];
    8 a, C& Y8 M# U6 D) Z+ [3 S
14.    
    
15.     var success = function(stream){
    : Y9 X& }2 L" A; X
16.         video.src = window.URL.createObjectURL(stream);
    
17.     }
    # E& j$ h6 [- Q  F6 `
18. 
    
19.     socket.onopen = function(){
    
20.         draw();
    
21.     }
    
22. 
    - @7 V; m, X& U; u# |
23.     var draw = function(){
    1 i3 Z) b; K, F/ {: E/ \! y0 z
24.         try{
    % N6 m# Y) S) I- i) C- v0 ^
25.             backcontext.drawImage(video,0,0, back.width, back.height);
    
26.         }catch(e){
    + v! P& \% k+ l1 L- n8 Q
27.             if (e.name == "NS_ERROR_NOT_AVAILABLE") {
    % R/ r9 _5 [9 g  Q# a# W/ Q1 V; U
28.                 return setTimeout(draw, 100);
    , g( \$ O8 g2 X# h" t' Z
29.             } else {
    : \: C1 d% z* j) K2 q
30.                 throw e;
    
31.             }
    0 `/ g7 ~2 `: v0 G% Z
32.         }
    
33.         if(video.src){
    / u% L8 d5 o: u( o- _
34.             socket.send(back.toDataURL("image/jpeg", 0.5));
    
35.         }
    % ]# k+ D: r+ l: Q" z/ }& ^
36.         setTimeout(draw, 100);
    
37.     }
    5 w. n6 I& w7 i- {( j
38.     navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
    
39.     navigator.mozGetUserMedia || navigator.msGetUserMedia;
    
40.     navigator.getUserMedia({video:true, audio:false}, success, console.log);
    
41. </script>

复制代码

1. php
   
2. 
     E. p0 a7 z. G, W0 R1 J
3. $server = new swoole_websocket_server("0.0.0.0", 9502);
   ! J# ?) D% B2 j0 |3 L. s% S
4. 
   / X& ^" ~2 M" p* f
5. $server->on('open', function (swoole_websocket_server $server, $request) {
   & m1 m' \' K- e+ u9 n( ?
6. 
   
7.     echo "新用户id:{$request->fd}加入了\n";
   
8.    // echo "server: handshake success with fd{$request->fd}\n";
   4 i$ Z% W: c/ ]+ H$ V
9. });
   
10. 
    
11. $server->on('message', function (swoole_websocket_server $server, $frame) {
    
12. 
    9 Z6 I+ r* O0 \& w/ c! u! `
13.     //循环所有数据
    ( H8 W1 m8 V# i1 X1 h
14.     foreach($server->connections as $fd) {
    
15.         //返回数据
    
16.         $server->push($fd, $frame->data);
    4 ], c# P) w6 D1 H: [( z8 M
17.     }
    : I' _" d$ F" b! J0 z
18. 
    4 I& F! I7 w7 b7 J
19. });
    : k) h* D$ J8 B2 K, w) h
20. 
    ; o% `. \  ^( Q: b& m" ]
21. $server->on('close', function ($ser, $fd) {
    9 T& B4 @& A" I* k$ Z
22.     echo "用户id: {$fd} 退出\n";
    
23. });
    2 M3 s4 c! u( w/ A/ S" G  N' r# P" Y  p
24. 
    * u: }7 e* A& q! q6 `2 ~
25. $server->start();

复制代码

' F2 x0 I  @( @8 B! f$ ^, k' T
( o. A* n; J8 w4 L; K! I

% _3 C* K# q6 I" e" r& X

# D# K  K% y* s( n+ w

; K$ ?, P9 w8 m" c% v5 H


8 u% \& b- q# y  k8 y3 W7 n
% j3 h$ E6 Z5 P5 R, c9 ~% X- Z; r