swoole 直播

admin

主要使用 webstocket
上代码

前端

观看页面

1. <script type="text/javascript">
   # w$ R# o4 @3 `3 y: i7 q
2. var ws = new WebSocket('ws://192.168.0.150:9502');
   9 r# S9 Y$ Y2 x; j0 E+ Y6 A! s7 U
3. 
   6 }$ a: D3 o* I& T
4. ws.onopen = function() {
   / Y1 r3 t/ T  g* f' h
5.     console.log("连接成功");
   3 V+ W4 k* J+ i9 q$ X+ v  ~
6. };
   9 Z% q3 O$ H- y5 u  s# e8 ^
7. ws.onmessage = function(e) {
   : h+ T( J* D2 y( Y0 g* s* c
8.    console.log(e);
   & I! i/ P. ~- n1 N  o
9. 
   
10.    var data = e.data;
    8 U) Q' J% t" w* a# {* U- N/ {
11.    document.getElementById('player').src=data;
    # [. ~4 A2 ^6 f5 ?6 M: o: g
12. };
    4 k9 M  Z/ o/ t( `
13. ws.onerror = function() {
    . E3 g- h  J, t4 Q) |, Z
14.     console.log("关闭连接");
    3 h- x9 [8 M; G: w$ |% n
15. };
    
16. </script>

复制代码

录像页面

最好用火狐测试。

1. <canvas id="output" style="display:none"></canvas>
   , F7 T* E# ]! o: C1 |" r
2. 
   : h8 k9 V) ]- t: W
3. 
   
4. 
   
5. <script type="text/javascript" charset="utf-8">
   
6. 
   
7. 
   1 F9 Y* d4 E. X* g+ Y
8.     var socket = new WebSocket('ws://192.168.0.150:9502');
   
9.     //socket.send("嗨我登陆了");
   
10. 
    
11.     var back = document.getElementById('output');
    
12.     var backcontext = back.getContext('2d');
    ' P9 q8 E& U8 O8 y) B" l
13.     var video = document.getElementsByTagName('video')[0];
    ; ?0 W( L2 |& Z) N  T+ w2 f$ X
14.    
    
15.     var success = function(stream){
    4 H/ c2 e6 @% o$ X, t5 ]. c
16.         video.src = window.URL.createObjectURL(stream);
    
17.     }
    
18. 
    
19.     socket.onopen = function(){
    
20.         draw();
    4 q8 d2 Z. l. O# i+ M
21.     }
    
22. 
    : M2 x1 e5 B- u2 t8 Z, D
23.     var draw = function(){
    & G7 l9 C/ G4 v# \4 Z  C
24.         try{
    
25.             backcontext.drawImage(video,0,0, back.width, back.height);
    . o: C5 g  A* a7 y6 e
26.         }catch(e){
    # `+ X" B3 o8 O0 q, p
27.             if (e.name == "NS_ERROR_NOT_AVAILABLE") {
    
28.                 return setTimeout(draw, 100);
    
29.             } else {
    
30.                 throw e;
    6 r9 _+ |6 b7 l/ K2 |) p2 G5 d( x
31.             }
    ' v! B% v$ I8 E/ F. [/ `! D  c" C
32.         }
    
33.         if(video.src){
    8 h1 p- T# [& F
34.             socket.send(back.toDataURL("image/jpeg", 0.5));
    , r2 N! v1 @5 e* ^6 e
35.         }
    : }) M3 d. L+ v3 P- [& E
36.         setTimeout(draw, 100);
    
37.     }
    4 j+ O4 a/ T6 ^! G/ _# {2 ?
38.     navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
    
39.     navigator.mozGetUserMedia || navigator.msGetUserMedia;
    5 }7 P; [2 E* ^' J
40.     navigator.getUserMedia({video:true, audio:false}, success, console.log);
    
41. </script>

复制代码

1. php
   " I+ x( X# N+ q/ M8 k9 D( q
2. 
   , ?7 k9 P' }# G* Z% j
3. $server = new swoole_websocket_server("0.0.0.0", 9502);
   . ?: ^* p8 _1 N1 s& v
4. 
   
5. $server->on('open', function (swoole_websocket_server $server, $request) {
   8 b  D" ~, H( A" Y1 Y5 L; ^
6. 
   
7.     echo "新用户id:{$request->fd}加入了\n";
   
8.    // echo "server: handshake success with fd{$request->fd}\n";
   
9. });
   1 u- u' W6 D8 a7 Q$ Z/ W/ I
10. 
    
11. $server->on('message', function (swoole_websocket_server $server, $frame) {
    $ z. [" Z& Y* Q0 i
12. 
    
13.     //循环所有数据
    
14.     foreach($server->connections as $fd) {
    
15.         //返回数据
    
16.         $server->push($fd, $frame->data);
    
17.     }
    4 A! u2 H6 Q  R% k/ h
18. 
    
19. });
    2 W2 g$ Q. R4 H6 W. ~- E& u
20. 
    
21. $server->on('close', function ($ser, $fd) {
    
22.     echo "用户id: {$fd} 退出\n";
    8 P0 t1 y  s8 d1 r4 I0 t% m% _
23. });
    , [$ h3 w" a0 n/ ^% ^3 V) l9 e
24. 
    
25. $server->start();

复制代码

. K& I7 Y& [/ G7 J. n* p$ c! T


  }! K8 s$ {' d+ e$ m+ [( Q1 F


) H% c( n9 [! M! p5 r# ~5 c
* @) ?2 z- f2 v. Z$ {( E

( Z4 t% q& [$ h5 P. g: X0 b
9 R4 J$ _6 D4 M2 _( c! V7 s. z7 g