swoole 直播

admin

主要使用 webstocket
上代码

前端

观看页面

1. <script type="text/javascript">
     O0 t% h- c2 t2 v2 {% Y3 y3 J% ~
2. var ws = new WebSocket('ws://192.168.0.150:9502');
   
3. 
   
4. ws.onopen = function() {
   
5.     console.log("连接成功");
   
6. };
   
7. ws.onmessage = function(e) {
   
8.    console.log(e);
   $ q6 N. f# ?7 }1 Y; c: A4 r/ ]
9. 
   
10.    var data = e.data;
    
11.    document.getElementById('player').src=data;
    / x0 s" S! n5 V  v" V5 }7 l  p; \
12. };
    . c9 T( Y: l7 X' S" r4 ~
13. ws.onerror = function() {
    7 i9 W7 n: Y1 S" v9 ]6 k# k" r
14.     console.log("关闭连接");
    3 R8 c0 v" T' K. S! W$ p# G
15. };
    . I1 r2 H5 Y7 h+ \0 _" C
16. </script>

复制代码

录像页面

最好用火狐测试。

1. <canvas id="output" style="display:none"></canvas>
   ; e+ O2 ~2 k7 O
2. 
   8 y, x% s, I* H& t% a/ o1 h
3. 
   
4. 
   $ o$ q. o* P- W, F: w4 k
5. <script type="text/javascript" charset="utf-8">
   
6. 
   * o0 e! ^1 n7 s% u' a/ ~2 n% L1 r
7. 
   & @' N2 _% q% U  f4 Q0 t+ I
8.     var socket = new WebSocket('ws://192.168.0.150:9502');
   * n  k6 U! C1 }, ^+ V* h, G3 `
9.     //socket.send("嗨我登陆了");
   3 p0 A- U4 ^/ l
10. 
    ' F+ k3 u+ t8 O3 W6 x/ \
11.     var back = document.getElementById('output');
    ! [3 c! U2 p8 ]: J9 L# u
12.     var backcontext = back.getContext('2d');
    
13.     var video = document.getElementsByTagName('video')[0];
    
14.    
    0 [/ ]- [% M3 t1 O% a( K; z+ @5 s
15.     var success = function(stream){
    8 _2 I6 _3 w$ n( ?, p3 {/ l
16.         video.src = window.URL.createObjectURL(stream);
    / i1 x, J, z4 S4 w" z
17.     }
    7 N0 l2 {5 ?$ s/ F( q
18. 
    
19.     socket.onopen = function(){
    6 ~& }) q& x1 s0 l+ c
20.         draw();
    
21.     }
    
22. 
    
23.     var draw = function(){
    1 b/ f* c  o* I) u! @
24.         try{
    2 L/ y4 D1 K4 w! J$ a% k( ]
25.             backcontext.drawImage(video,0,0, back.width, back.height);
    6 D! ]' e& D& D8 X
26.         }catch(e){
    2 B4 B6 b  z* T+ p# T
27.             if (e.name == "NS_ERROR_NOT_AVAILABLE") {
    5 R. ?1 Q, u9 x' l( j
28.                 return setTimeout(draw, 100);
    # e* [" ]! Q2 Y; p0 h* @
29.             } else {
    - z5 T& H6 X, v
30.                 throw e;
    : |4 v9 b7 d- r
31.             }
    ) t/ Q2 c' @2 Y" n1 @) U$ A
32.         }
    
33.         if(video.src){
    7 `# v; D7 Z7 q% |8 \  W
34.             socket.send(back.toDataURL("image/jpeg", 0.5));
    ! R& W4 f- i2 B
35.         }
    
36.         setTimeout(draw, 100);
    
37.     }
    
38.     navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
    2 e' ?$ i, B- w! p* {
39.     navigator.mozGetUserMedia || navigator.msGetUserMedia;
    
40.     navigator.getUserMedia({video:true, audio:false}, success, console.log);
    1 l( k3 r) t* o( V% L% q
41. </script>

复制代码

1. php
   0 e1 h* k' l  y/ ]0 _2 Y7 I& R
2. 
   
3. $server = new swoole_websocket_server("0.0.0.0", 9502);
   / w0 s# ^! b+ R7 R
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. });
     Q% l( t" s; j* g. f! e2 P
10. 
    
11. $server->on('message', function (swoole_websocket_server $server, $frame) {
    
12. 
    
13.     //循环所有数据
    3 n4 ^2 J7 y/ |7 |
14.     foreach($server->connections as $fd) {
    
15.         //返回数据
    
16.         $server->push($fd, $frame->data);
    
17.     }
    
18. 
    
19. });
    
20. 
    2 e) d# x4 R  K
21. $server->on('close', function ($ser, $fd) {
    5 p  D+ m' d+ e6 [
22.     echo "用户id: {$fd} 退出\n";
    
23. });
    : A" t% C6 n8 V1 E$ |# L/ C
24. 
    6 b7 H# I- J+ w' R2 |
25. $server->start();

复制代码

# A9 F, e% R1 n6 V



( C. h/ \2 O6 _; w

; `! R% d8 ?4 Z7 z/ s