swoole 直播

admin

主要使用 webstocket
上代码

前端

观看页面

1. <script type="text/javascript">
   5 b; Z& \; ~8 V
2. var ws = new WebSocket('ws://192.168.0.150:9502');
   
3. 
   & F3 F# Q' Y0 ~
4. ws.onopen = function() {
   
5.     console.log("连接成功");
   
6. };
   
7. ws.onmessage = function(e) {
   
8.    console.log(e);
   
9. 
   ! h4 W" _9 t+ k7 U# d' z( y( ^1 H
10.    var data = e.data;
    * d- Q2 u7 s+ h& R. c
11.    document.getElementById('player').src=data;
    ( ?  u3 |- k9 K3 t$ T7 k
12. };
    - B0 w8 n4 s; `
13. ws.onerror = function() {
    
14.     console.log("关闭连接");
    . T$ r/ b6 s( k" z  }
15. };
    
16. </script>

复制代码

录像页面

5 F/ l: v6 y, A5 [- k

最好用火狐测试。

1. <canvas id="output" style="display:none"></canvas>
   ( c6 ?, _3 I! Q- Y3 }
2. 
   0 u" z1 H: G0 E2 J( s! k$ U
3. 
   $ Q* v5 R6 z1 B- Y$ o5 v) |
4. 
   
5. <script type="text/javascript" charset="utf-8">
   # R7 [( J9 G% T7 E
6. 
   
7. 
   
8.     var socket = new WebSocket('ws://192.168.0.150:9502');
   
9.     //socket.send("嗨我登陆了");
   ' [( d  G: a2 q
10. 
    2 L  C8 i5 a) o6 Q, g& S
11.     var back = document.getElementById('output');
    & C8 ?1 J' ~) f) F+ a
12.     var backcontext = back.getContext('2d');
    # }& O) e6 I9 F' [0 C" C" G, I
13.     var video = document.getElementsByTagName('video')[0];
    
14.    
    
15.     var success = function(stream){
    
16.         video.src = window.URL.createObjectURL(stream);
    : Z2 b+ |+ m1 q/ `# E5 b0 `
17.     }
    
18. 
    3 y8 t$ F0 r7 X* D7 R: N1 s9 \
19.     socket.onopen = function(){
    
20.         draw();
    ' K8 P* `9 u* z: V7 e% B4 D# Q: o
21.     }
    9 @5 F( b4 N0 b4 X! V' N; y- L
22. 
    . s/ r4 R1 f) R. @
23.     var draw = function(){
    
24.         try{
    
25.             backcontext.drawImage(video,0,0, back.width, back.height);
    5 D, ~2 _) o" ^. o. R; n/ d
26.         }catch(e){
    
27.             if (e.name == "NS_ERROR_NOT_AVAILABLE") {
    
28.                 return setTimeout(draw, 100);
    
29.             } else {
    ( y7 d/ R# Z+ l: O' G$ x
30.                 throw e;
    9 G6 A9 p. S! Q  ^/ }) |( X9 X
31.             }
    # i# i7 c  i$ @1 W0 m' D& C- @4 L
32.         }
    6 d$ u4 T" c6 E9 ]$ g7 N
33.         if(video.src){
    
34.             socket.send(back.toDataURL("image/jpeg", 0.5));
    2 k, L/ V9 w! B+ z' _
35.         }
    ! X& {" J$ s. Y" S/ I7 F# `
36.         setTimeout(draw, 100);
    
37.     }
    6 |( }5 T) t' y+ Z' a8 D+ |6 V
38.     navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
    
39.     navigator.mozGetUserMedia || navigator.msGetUserMedia;
    / w  A+ V/ Y/ y# S" d0 {
40.     navigator.getUserMedia({video:true, audio:false}, success, console.log);
    
41. </script>

复制代码

1. php
   " g: Y1 f5 f) O- O5 r" k
2. 
   
3. $server = new swoole_websocket_server("0.0.0.0", 9502);
   0 c3 s) u% U4 j" e- @6 L
4. 
   7 l; @& d- t  s+ C# O- F; L# G4 w
5. $server->on('open', function (swoole_websocket_server $server, $request) {
   
6. 
   2 N% u7 k; ^$ d% _& [
7.     echo "新用户id:{$request->fd}加入了\n";
   & a$ ]( }. y: x8 K3 M. F* H+ `
8.    // echo "server: handshake success with fd{$request->fd}\n";
     F0 X+ c& `: ~) j: A. H
9. });
   
10. 
    
11. $server->on('message', function (swoole_websocket_server $server, $frame) {
    
12. 
    2 u& ^4 ]) [" U; Z9 {; R9 o" O* L
13.     //循环所有数据
    
14.     foreach($server->connections as $fd) {
    
15.         //返回数据
    6 ?. A$ H) W6 X
16.         $server->push($fd, $frame->data);
    
17.     }
    + k4 O6 o) A; Q% j7 ~
18. 
    
19. });
    * _% `" K0 f2 f1 V, y! a! f: @
20. 
    
21. $server->on('close', function ($ser, $fd) {
    & `9 V4 ?5 S" Y' d
22.     echo "用户id: {$fd} 退出\n";
    
23. });
    
24. 
    
25. $server->start();

复制代码

$ J+ [2 u2 I: Y" n$ C6 V

  }* L5 |+ c4 k




" p" d& z/ U% _( S
0 c3 }' \0 k# |) L0 k( y& v$ s; d4 y
/ K8 r' ?1 P2 F; }& Y( s