swoole 直播

admin

主要使用 webstocket
! ^1 m* t: p. s" u% v上代码

前端

观看页面

1. <script type="text/javascript">
   
2. var ws = new WebSocket('ws://192.168.0.150:9502');
   
3. 
     @% @9 O9 y& s
4. ws.onopen = function() {
   
5.     console.log("连接成功");
   
6. };
   
7. ws.onmessage = function(e) {
   2 t& x7 \) v+ L5 b8 N7 D
8.    console.log(e);
   + E  Q# i0 k& ~4 Z& W. k% Z
9. 
   ! m' \6 O/ b, G
10.    var data = e.data;
    . f9 \8 x' w3 o
11.    document.getElementById('player').src=data;
    
12. };
    
13. ws.onerror = function() {
    : U4 g3 H7 g. Y( p) @2 U1 t
14.     console.log("关闭连接");
    
15. };
    * V0 Z9 b( i& M8 O" _
16. </script>

复制代码

录像页面

最好用火狐测试。

1. <canvas id="output" style="display:none"></canvas>
   2 Y3 L) ]' |- Y9 m" n
2. 
   
3. 
   
4. 
   . H  K+ ?! W  H& F  w5 V
5. <script type="text/javascript" charset="utf-8">
   
6. 
   
7. 
   9 g; ]* d$ G! q. P$ J# J; O
8.     var socket = new WebSocket('ws://192.168.0.150:9502');
   0 T+ {; ^9 L! u3 Z
9.     //socket.send("嗨我登陆了");
   & f  |% l3 K4 Y# R
10. 
    
11.     var back = document.getElementById('output');
    + {* [6 B5 H  R: X) n
12.     var backcontext = back.getContext('2d');
    - j2 A4 j  M; h" M) j
13.     var video = document.getElementsByTagName('video')[0];
    
14.    
    
15.     var success = function(stream){
    : }7 _, `1 j& w' i7 i
16.         video.src = window.URL.createObjectURL(stream);
    ; ?* A9 O% C7 d, ]* h2 O( E' S
17.     }
    - [+ M8 ~, |+ l
18. 
    $ Y' G1 n1 x- K% z% H. @3 P
19.     socket.onopen = function(){
    & p- Q( X! I* S8 `$ V. S- b  l
20.         draw();
    
21.     }
    4 \! W( |+ R& }" Y1 X
22. 
    
23.     var draw = function(){
    6 ^# j0 h( M. _
24.         try{
    5 M( b- a: X" b! p
25.             backcontext.drawImage(video,0,0, back.width, back.height);
    
26.         }catch(e){
    
27.             if (e.name == "NS_ERROR_NOT_AVAILABLE") {
    
28.                 return setTimeout(draw, 100);
    : j5 W0 d# t+ ~3 q7 A6 t. r
29.             } else {
    0 \% O( y- a7 H5 s
30.                 throw e;
    % `5 z1 r* z! f) `/ H( W
31.             }
    
32.         }
    6 `/ t7 s+ G& H* K: e
33.         if(video.src){
    * M+ ^# K9 D" x3 i( K' Q8 m
34.             socket.send(back.toDataURL("image/jpeg", 0.5));
    
35.         }
    8 z. R' p0 t9 j" w
36.         setTimeout(draw, 100);
    
37.     }
    
38.     navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
    
39.     navigator.mozGetUserMedia || navigator.msGetUserMedia;
    7 z% y2 [  y0 ^1 ?5 P
40.     navigator.getUserMedia({video:true, audio:false}, success, console.log);
    8 f( R6 O  {/ \& u  k) u5 h! h
41. </script>

复制代码

1. php
   
2. 
   
3. $server = new swoole_websocket_server("0.0.0.0", 9502);
   - D# t. j' w+ _& @# k5 s- C. C
4. 
   
5. $server->on('open', function (swoole_websocket_server $server, $request) {
   / j( |9 u2 s3 K6 W! n
6. 
   
7.     echo "新用户id:{$request->fd}加入了\n";
   7 b1 p5 K$ V8 s, m1 r' @. j
8.    // echo "server: handshake success with fd{$request->fd}\n";
     Y2 V# B1 ^3 {3 g  e6 ?' {
9. });
   1 `9 a+ W% O/ U! u, X+ F, p
10. 
    . e3 u2 g7 ?* O' L  i5 g( J6 e3 h; y
11. $server->on('message', function (swoole_websocket_server $server, $frame) {
    
12. 
    " w. H4 t, Z+ A/ Z/ W1 d) k  L7 ~
13.     //循环所有数据
    
14.     foreach($server->connections as $fd) {
    
15.         //返回数据
    ! Z2 u8 y# F7 S) [0 F$ Y
16.         $server->push($fd, $frame->data);
    ) q& q- X( j9 [+ X! {9 B( A
17.     }
    
18. 
    
19. });
    
20. 
      ]3 z" u+ c5 J3 C9 a
21. $server->on('close', function ($ser, $fd) {
    % `8 a* v' d+ u
22.     echo "用户id: {$fd} 退出\n";
    
23. });
    
24. 
    , W: j0 b, b: y8 \& H
25. $server->start();

复制代码

! P' j" U0 L4 `# ?* k: ]


1 `; P1 M1 V# U, I/ R& L- q

! q& W6 B% k' e7 w: G
( ~6 \$ Q2 j$ H* J) z& }


! a- G" D/ u. F" V