swoole 直播

admin

主要使用 webstocket
上代码

前端

观看页面

1. <script type="text/javascript">
   
2. var ws = new WebSocket('ws://192.168.0.150:9502');
   6 j) J: Y3 I, m7 {7 `6 E+ Z
3. 
   ! u2 g2 [1 `/ L3 w
4. ws.onopen = function() {
   " _+ [  J8 J! @
5.     console.log("连接成功");
   $ m) z% `1 W. ]0 j* t, g+ z8 {8 ?
6. };
   / R$ u% P4 V  W1 }4 i' \' y& H3 T  k
7. ws.onmessage = function(e) {
   
8.    console.log(e);
   4 Y  A% w6 s3 I7 @7 q# T
9. 
   $ Y5 l! L: G5 _, S4 O0 {
10.    var data = e.data;
    5 S$ @' Y# M* _$ J# Q/ Z4 R& r% L3 d  v
11.    document.getElementById('player').src=data;
    ! Q# _0 I" o4 l8 y- Z7 `, f
12. };
    
13. ws.onerror = function() {
    
14.     console.log("关闭连接");
    9 t# y0 [& `" H4 ?, n. B* M% ?
15. };
    
16. </script>

复制代码

录像页面

) ~* M! f7 K0 j  D; u

最好用火狐测试。

1. <canvas id="output" style="display:none"></canvas>
   
2. 
     T# \, C+ r8 U) K- j, k# b
3. 
   , V9 q5 M9 F3 i7 @/ }3 z- {
4. 
   , J+ o9 O% ?& ]9 b: X8 F
5. <script type="text/javascript" charset="utf-8">
     F, S3 c) d" @8 J0 f* M' O
6. 
   # q4 p. O) y' P- p; _& c
7. 
   
8.     var socket = new WebSocket('ws://192.168.0.150:9502');
   
9.     //socket.send("嗨我登陆了");
   
10. 
    
11.     var back = document.getElementById('output');
    6 ~6 t, X6 X% t- M0 w3 T
12.     var backcontext = back.getContext('2d');
    
13.     var video = document.getElementsByTagName('video')[0];
    3 ]5 M8 q( ^5 |0 J" p* ~& T7 T
14.    
    
15.     var success = function(stream){
    
16.         video.src = window.URL.createObjectURL(stream);
    
17.     }
    / O2 w) B. \4 ?6 F: b' @& h' v
18. 
    
19.     socket.onopen = function(){
    6 `5 L4 K- o, N2 r9 N: |7 e
20.         draw();
    4 m1 Q! e; h$ \6 f5 ]
21.     }
    ( F' c$ v3 m0 E* r. G( q7 c
22. 
    6 ]  ~: a- f5 L* h. M
23.     var draw = function(){
    
24.         try{
    
25.             backcontext.drawImage(video,0,0, back.width, back.height);
    " V/ @. b7 G9 b) H0 D: f& p( ?
26.         }catch(e){
    
27.             if (e.name == "NS_ERROR_NOT_AVAILABLE") {
    
28.                 return setTimeout(draw, 100);
    4 |; E; E- U. x; q7 k
29.             } else {
    , F1 U. o- u" t- v; e( \
30.                 throw e;
    6 S& N' P8 f) D" _) r
31.             }
    
32.         }
    
33.         if(video.src){
    
34.             socket.send(back.toDataURL("image/jpeg", 0.5));
    
35.         }
    
36.         setTimeout(draw, 100);
    
37.     }
    ) }1 [5 u5 P' V- R/ e
38.     navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
    ; L2 B( n# i; M: G1 ~
39.     navigator.mozGetUserMedia || navigator.msGetUserMedia;
      a6 l; W, C, ]
40.     navigator.getUserMedia({video:true, audio:false}, success, console.log);
    
41. </script>

复制代码

1. php
   6 ^% I! o2 H+ q
2. 
   
3. $server = new swoole_websocket_server("0.0.0.0", 9502);
   $ O( ]% f" D6 h1 S5 ?5 s
4. 
   
5. $server->on('open', function (swoole_websocket_server $server, $request) {
   
6. 
   
7.     echo "新用户id:{$request->fd}加入了\n";
   
8.    // echo "server: handshake success with fd{$request->fd}\n";
   
9. });
   
10. 
    
11. $server->on('message', function (swoole_websocket_server $server, $frame) {
      h! ?# Z# c3 v$ w8 l  a: h
12. 
    " s4 q+ m' T5 c8 ?. r
13.     //循环所有数据
    
14.     foreach($server->connections as $fd) {
    " ^& H5 |7 s- |4 `* l- r5 E
15.         //返回数据
    3 l5 M" J8 N4 k; |+ [
16.         $server->push($fd, $frame->data);
    1 n7 U. B2 S# ]* H4 W1 S7 B
17.     }
    
18. 
    9 p$ D" \5 X2 O3 d: o: L9 a- Z* n2 q
19. });
    : d+ ]1 U! b3 h
20. 
    
21. $server->on('close', function ($ser, $fd) {
    * ~8 n+ r: q" Q2 H$ Q
22.     echo "用户id: {$fd} 退出\n";
    
23. });
    
24. 
    / b3 l# m8 G) D! y+ G# j! b
25. $server->start();

复制代码

0 o; [" W9 g# ]: q' q

' i) N7 T0 z6 T5 \


+ ?4 ?: G, s0 C
  @8 l: O/ v! b7 r& _7 s, Y
. j: B- }% e$ y9 @: r" y
1 o# r+ X. l: ~0 x6 ~6 |. l


- {) {/ @9 F2 ?/ ?" R; ~9 y