swoole 直播

admin

主要使用 webstocket
上代码

前端

观看页面

1. <script type="text/javascript">
   & r  M# J: o4 v3 s; q5 q: g  V' O
2. var ws = new WebSocket('ws://192.168.0.150:9502');
   
3. 
   . r0 l1 m) R$ V8 a
4. ws.onopen = function() {
   
5.     console.log("连接成功");
   
6. };
   
7. ws.onmessage = function(e) {
   
8.    console.log(e);
   3 `" L$ x  o9 K, G
9. 
   + T& G1 N8 l6 I1 g) L0 x9 O
10.    var data = e.data;
    + g% J4 f9 O) |
11.    document.getElementById('player').src=data;
    
12. };
    ) k$ W- i7 i# _5 ~
13. ws.onerror = function() {
    $ F( ~2 S' E# m1 T4 g
14.     console.log("关闭连接");
    
15. };
    
16. </script>

复制代码

录像页面

! U* o$ m" ]- t6 z( C9 k

最好用火狐测试。

1. <canvas id="output" style="display:none"></canvas>
   + E/ q3 H: ], Q2 n5 O6 |
2. 
   5 m# Z0 ]/ V4 \# U# ]* G
3. 
   
4. 
   
5. <script type="text/javascript" charset="utf-8">
   2 X* o6 L* r% i5 U
6. 
   
7. 
   0 c' v. _$ q5 \9 w: h( z, }
8.     var socket = new WebSocket('ws://192.168.0.150:9502');
   
9.     //socket.send("嗨我登陆了");
   
10. 
    
11.     var back = document.getElementById('output');
    $ Q% @2 A$ @! X3 r5 z$ b7 L
12.     var backcontext = back.getContext('2d');
    4 I% b! y) S6 s% E# y: P
13.     var video = document.getElementsByTagName('video')[0];
    
14.    
    
15.     var success = function(stream){
    
16.         video.src = window.URL.createObjectURL(stream);
    6 B; c+ {2 E1 M9 ]3 s" i  o2 P
17.     }
    
18. 
    
19.     socket.onopen = function(){
    ; |1 U  S' q5 x. g8 T1 E9 z1 [$ ]7 O
20.         draw();
    
21.     }
    
22. 
      X  ^. W1 H- k9 W# L3 f* a
23.     var draw = function(){
    
24.         try{
    
25.             backcontext.drawImage(video,0,0, back.width, back.height);
    
26.         }catch(e){
    
27.             if (e.name == "NS_ERROR_NOT_AVAILABLE") {
    4 `" I( B0 ^! J1 G4 Q
28.                 return setTimeout(draw, 100);
    
29.             } else {
    ; R; y' H" J1 A7 |% Q
30.                 throw e;
    6 z$ }& i9 b! r
31.             }
    
32.         }
    $ {* x: y: C: p! L
33.         if(video.src){
    
34.             socket.send(back.toDataURL("image/jpeg", 0.5));
    
35.         }
    
36.         setTimeout(draw, 100);
    ! Z! I6 R' b  e. p0 v
37.     }
    
38.     navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
    
39.     navigator.mozGetUserMedia || navigator.msGetUserMedia;
    
40.     navigator.getUserMedia({video:true, audio:false}, success, console.log);
    9 D5 H% W) N! Z1 b6 f
41. </script>

复制代码

1. php
   
2. 
   
3. $server = new swoole_websocket_server("0.0.0.0", 9502);
   
4. 
   
5. $server->on('open', function (swoole_websocket_server $server, $request) {
   , ^2 ?+ O, s% V0 T; z
6. 
   % _0 Q- h8 u5 Y9 b
7.     echo "新用户id:{$request->fd}加入了\n";
   
8.    // echo "server: handshake success with fd{$request->fd}\n";
   
9. });
   ( g8 l* V2 L- K8 T8 p6 k; @
10. 
    ; y% w/ {5 O* u7 D/ ~, M% K
11. $server->on('message', function (swoole_websocket_server $server, $frame) {
    8 Q: _% V$ t' U9 ]0 S( G( T
12. 
    
13.     //循环所有数据
    3 l3 y* Q, v, G7 u2 D" w
14.     foreach($server->connections as $fd) {
    
15.         //返回数据
    6 h3 l! @8 Z+ E; ?
16.         $server->push($fd, $frame->data);
    & M, j- c* o- c3 v
17.     }
    * U# X) A7 {5 }: f; d
18. 
    
19. });
    % `" s2 N. r2 i( {
20. 
    
21. $server->on('close', function ($ser, $fd) {
    
22.     echo "用户id: {$fd} 退出\n";
    
23. });
    6 P, I9 S5 u6 T: h$ e
24. 
    
25. $server->start();

复制代码

% G7 C- W4 i5 O
" V# T- }7 t3 G; q$ G
3 y7 e: ^( j5 c& a5 _9 y5 c8 ?' M. H$ h

5 Z) X: \  [: Y9 z% E9 ^# j8 a
; K% J7 L6 w, O3 w2 L  l; `% k' Q
0 U0 l+ r+ ?! ~- o) k7 R# `

2 k1 I' o4 O- q" ?% Z: ?) g& b+ ^" O
9 A* F7 b8 s% w1 H; K+ E
; b- Y# U3 }2 }
" @, y  W4 N5 l1 m6 J0 Q" |' t