swoole 直播

admin

主要使用 webstocket
, T9 e5 e2 w6 Z2 Q$ `' d上代码

前端

观看页面

1. <script type="text/javascript">
   2 N- t) z' U1 c+ j; n
2. var ws = new WebSocket('ws://192.168.0.150:9502');
   2 o5 s" h' i& V. ?: F) }
3. 
   $ j8 Y; ?7 R' P1 |
4. ws.onopen = function() {
   , T# y7 g  O7 e, `' e& Y# r6 r
5.     console.log("连接成功");
   
6. };
   
7. ws.onmessage = function(e) {
   
8.    console.log(e);
   
9. 
   , G1 N6 X0 o4 {1 C
10.    var data = e.data;
    ) ?) J. S0 b; N  O
11.    document.getElementById('player').src=data;
    4 W. s" I5 B4 Z  O' O9 Z3 |
12. };
    . H* x' S) f1 G3 Q4 q( t
13. ws.onerror = function() {
    
14.     console.log("关闭连接");
    
15. };
    1 z9 W5 j, `8 N
16. </script>

复制代码

录像页面

% }. H6 O. i/ f8 v

最好用火狐测试。

1. <canvas id="output" style="display:none"></canvas>
   : Q0 d9 j7 _  m. k( ~; q: }9 \5 o
2. 
   
3. 
   
4. 
   
5. <script type="text/javascript" charset="utf-8">
   ( D" F8 {" h" x: r; n% v( N+ S
6. 
   2 Q3 }. ^& _( ^2 G# c& W
7. 
   
8.     var socket = new WebSocket('ws://192.168.0.150:9502');
   ' V. a1 ~1 V- N
9.     //socket.send("嗨我登陆了");
   
10. 
    
11.     var back = document.getElementById('output');
    3 H7 O# Z# b* T# @, }# q
12.     var backcontext = back.getContext('2d');
    
13.     var video = document.getElementsByTagName('video')[0];
    & ?1 Y7 G9 \; [* a8 R
14.    
    
15.     var success = function(stream){
    
16.         video.src = window.URL.createObjectURL(stream);
    " _6 n7 B; T+ w
17.     }
    & g9 R. ]8 R% c
18. 
    
19.     socket.onopen = function(){
    & r. `, ?; v4 I5 ?' V! y& W! @
20.         draw();
    
21.     }
    % I1 g- I% A0 e+ F& H% H% c
22. 
      U2 L/ [1 s0 {' L, x6 }
23.     var draw = function(){
    & }9 a& g' U8 Z) ^9 L, r* b
24.         try{
    8 N& `$ ~! w3 C# C, i. A6 \
25.             backcontext.drawImage(video,0,0, back.width, back.height);
    
26.         }catch(e){
    
27.             if (e.name == "NS_ERROR_NOT_AVAILABLE") {
    $ L4 F( A+ W4 q6 a5 d
28.                 return setTimeout(draw, 100);
    
29.             } else {
    
30.                 throw e;
    
31.             }
    5 j8 b6 _% L! `9 G
32.         }
    
33.         if(video.src){
    
34.             socket.send(back.toDataURL("image/jpeg", 0.5));
    
35.         }
    
36.         setTimeout(draw, 100);
    
37.     }
    ! `7 U  a$ F0 C; M: Y) Z
38.     navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
    
39.     navigator.mozGetUserMedia || navigator.msGetUserMedia;
    6 }. W2 Q! |5 V) g9 ?  L
40.     navigator.getUserMedia({video:true, audio:false}, success, console.log);
    
41. </script>

复制代码

1. php
   ; s1 v) t4 W9 Q
2. 
   
3. $server = new swoole_websocket_server("0.0.0.0", 9502);
   
4. 
   : n$ t! _4 e8 n/ V5 D  K5 Q7 p
5. $server->on('open', function (swoole_websocket_server $server, $request) {
   1 L5 T6 V1 m" r; |9 R
6. 
   " m: |: \8 G0 j1 x
7.     echo "新用户id:{$request->fd}加入了\n";
   ) h" ]: I) {: L1 r2 n) r" k3 R
8.    // echo "server: handshake success with fd{$request->fd}\n";
   
9. });
   2 W) {! B3 \! J( S9 F- q7 T' S* s
10. 
    $ H" e$ h" C  h* H5 \5 E) Y
11. $server->on('message', function (swoole_websocket_server $server, $frame) {
    6 l& X+ z. H" ~' V5 c! |, p. ?
12. 
    , _2 C( e  }# t' `$ B. g
13.     //循环所有数据
    0 R  I3 P& w: V3 [
14.     foreach($server->connections as $fd) {
    
15.         //返回数据
    0 t/ n0 Z$ K. D1 v& n7 P
16.         $server->push($fd, $frame->data);
    
17.     }
    # E- z6 ?, w, z- G* }, J
18. 
    % {' W; f* V6 w/ e' u) S8 W
19. });
    
20. 
    ! r' |$ f5 S' [" h: n6 I
21. $server->on('close', function ($ser, $fd) {
    2 \0 Q, W9 \# X/ q. b4 z& y( p
22.     echo "用户id: {$fd} 退出\n";
    
23. });
    
24. 
    
25. $server->start();

复制代码

8 y+ L* s$ M7 A" p4 |/ _% b

  k; l' i+ F1 e5 M& J/ d



& i4 S; Q9 z9 z  K: O* O# q% u, C


, D" I: C5 @: g7 n3 I4 X# V

5 m3 S3 k4 B! L7 t) P: ]