swoole 直播

admin

主要使用 webstocket
& `+ q; g% T3 e7 X' f上代码

前端

观看页面

1. <script type="text/javascript">
   9 J' W# ~8 w- y: V( C! j
2. var ws = new WebSocket('ws://192.168.0.150:9502');
   
3. 
   5 }* W- x" P  |* O
4. ws.onopen = function() {
   
5.     console.log("连接成功");
   
6. };
   $ J, K# l( o9 g3 c* c
7. ws.onmessage = function(e) {
   ( [5 i1 a# M; B2 B$ U4 L% z
8.    console.log(e);
   
9. 
   ! W& y0 f2 d6 R4 j: L; c/ S
10.    var data = e.data;
    + f& j! R- W6 U
11.    document.getElementById('player').src=data;
    
12. };
    3 }, y0 y1 a4 f! X: m" U  c
13. ws.onerror = function() {
    / D9 J7 C" J7 a/ |- b9 z: c
14.     console.log("关闭连接");
    8 S$ J% C5 G9 S" r+ g8 B6 j+ q
15. };
    0 `9 V/ E, ^' s( J( X: p: N
16. </script>

复制代码

录像页面

$ L' \% O8 H0 j, s* J/ r

最好用火狐测试。

1. <canvas id="output" style="display:none"></canvas>
   
2. 
   / ~; [  n7 ~/ i
3. 
   
4. 
   ' G/ h5 b& u0 Z) _
5. <script type="text/javascript" charset="utf-8">
   
6. 
   
7. 
   , X( H7 p1 ~. L' r
8.     var socket = new WebSocket('ws://192.168.0.150:9502');
   ) C; i- s6 U% m; p: O, w. B1 ], G: D
9.     //socket.send("嗨我登陆了");
   
10. 
    # B. V/ L; W) |5 W2 S3 E1 B% I
11.     var back = document.getElementById('output');
    : T6 t6 e9 J8 o! _7 S* N
12.     var backcontext = back.getContext('2d');
    ) t6 X) G" ~( D0 A( {
13.     var video = document.getElementsByTagName('video')[0];
    
14.    
    
15.     var success = function(stream){
    
16.         video.src = window.URL.createObjectURL(stream);
    / q6 O  G, A1 n# m3 n4 M# O( s
17.     }
      p/ r, Z' Z6 |4 R
18. 
    
19.     socket.onopen = function(){
    ( d0 h+ h8 B2 P. p) K$ _4 `8 o
20.         draw();
    % ?) N8 G" C% B. c/ f
21.     }
    
22. 
    5 f4 L% D7 [) e0 I$ X7 [; _
23.     var draw = function(){
      l" c# e5 }, C7 ~9 G
24.         try{
    
25.             backcontext.drawImage(video,0,0, back.width, back.height);
    0 C! {  U: V+ {, P- Z
26.         }catch(e){
    
27.             if (e.name == "NS_ERROR_NOT_AVAILABLE") {
    
28.                 return setTimeout(draw, 100);
    $ o7 e3 ]: R1 R4 o0 ~5 \
29.             } else {
    7 ~. V9 ~$ G( F  w$ u$ H, k/ P, x
30.                 throw e;
    2 v! P/ a* E* y+ e9 k  a2 U# J
31.             }
    2 Q2 i. Z& E& _3 V) d2 k) J1 W
32.         }
    . h: M6 D" {, n
33.         if(video.src){
    ; S9 K; j8 R6 x$ i( C: T
34.             socket.send(back.toDataURL("image/jpeg", 0.5));
    
35.         }
    
36.         setTimeout(draw, 100);
    4 N% L3 I/ t- u$ h/ k+ H% `: W# z
37.     }
    
38.     navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
    
39.     navigator.mozGetUserMedia || navigator.msGetUserMedia;
    1 ?; B* b; O* B% c2 k3 Y8 R- w
40.     navigator.getUserMedia({video:true, audio:false}, success, console.log);
    ' q  V2 j; d: `+ X5 G) P7 r
41. </script>

复制代码

1. php
   0 T/ Y" m2 P$ ~! O
2. 
   
3. $server = new swoole_websocket_server("0.0.0.0", 9502);
   
4. 
     l4 q  j" c8 o1 R7 I! c1 k0 o
5. $server->on('open', function (swoole_websocket_server $server, $request) {
   
6. 
   . n# @* i2 ~$ [" l: Q4 y6 x
7.     echo "新用户id:{$request->fd}加入了\n";
   " }7 z8 P" U$ ~# W2 {
8.    // echo "server: handshake success with fd{$request->fd}\n";
   $ N( N. h0 k' M& q& U' g/ s
9. });
   ; a$ t( Y4 Y' s$ V) t
10. 
    
11. $server->on('message', function (swoole_websocket_server $server, $frame) {
    
12. 
    
13.     //循环所有数据
    
14.     foreach($server->connections as $fd) {
    
15.         //返回数据
    7 p1 p, F* v- V2 ~$ n$ w9 |
16.         $server->push($fd, $frame->data);
    
17.     }
    % x- @1 z; }* @8 a( y' J
18. 
    ) }8 V! S1 @0 T, o
19. });
    
20. 
    9 G  [( L! `) o) l, y) e8 P
21. $server->on('close', function ($ser, $fd) {
    . z% k* Y6 w; v  Y4 ~% g, R
22.     echo "用户id: {$fd} 退出\n";
    
23. });
    
24. 
    2 P2 g( O) ?, c, F% W
25. $server->start();

复制代码

% \& ^+ \& L! S/ ?


; j1 `. l' _3 q% R4 ]/ `
- K7 K; _/ t6 p. `6 c. G
* t8 E1 C# k+ _% o4 |; v
- h* J6 l+ `/ h# Z" b


, ]2 K* A  @* H* y. ]
- r4 T% c1 Q6 h' y# V# u% D8 u