swoole 直播

admin

主要使用 webstocket
- j' D, s( H; V% `/ s: \. e上代码

前端

观看页面

1. <script type="text/javascript">
   
2. var ws = new WebSocket('ws://192.168.0.150:9502');
   * f3 c+ K4 k3 Z0 e" Q6 m" e7 x, @
3. 
   
4. ws.onopen = function() {
   
5.     console.log("连接成功");
   
6. };
   , {4 c6 }/ U- w  M7 U" t: P
7. ws.onmessage = function(e) {
   
8.    console.log(e);
   9 _6 V: r4 j2 h# {5 w, E* V6 B
9. 
   + G; f2 E5 D( G1 ?
10.    var data = e.data;
    , f# @6 c5 `( n: b$ A
11.    document.getElementById('player').src=data;
    1 q7 H2 ?! H4 n9 K1 q
12. };
    
13. ws.onerror = function() {
    
14.     console.log("关闭连接");
    
15. };
    ' M0 t; L) V" j* X6 Z
16. </script>

复制代码

录像页面

最好用火狐测试。

1. <canvas id="output" style="display:none"></canvas>
   
2. 
   ! D- }6 m  l2 z! d" }
3. 
   + u, @, P) Q3 ^1 h; Z2 h5 q
4. 
   
5. <script type="text/javascript" charset="utf-8">
   7 B$ A9 Q3 ~1 E3 `: V" ]
6. 
   
7. 
   
8.     var socket = new WebSocket('ws://192.168.0.150:9502');
   
9.     //socket.send("嗨我登陆了");
   
10. 
    
11.     var back = document.getElementById('output');
    / e5 O0 d9 u# j( D8 M
12.     var backcontext = back.getContext('2d');
    
13.     var video = document.getElementsByTagName('video')[0];
    , d, A# P- w0 l5 w* F- N, L
14.    
    9 Q; c' s7 L& \. Y& s
15.     var success = function(stream){
    
16.         video.src = window.URL.createObjectURL(stream);
    / G* y0 ?' c7 b, p9 z4 P# P
17.     }
    " }8 ~; A' E7 M8 D1 o' T  i# k8 G
18. 
    * b; b4 F# g( Y5 [& {
19.     socket.onopen = function(){
    / w7 {+ u$ |$ g- o! g5 n
20.         draw();
    
21.     }
    
22. 
    5 x/ B/ ]! Q4 N% {
23.     var draw = function(){
    
24.         try{
    
25.             backcontext.drawImage(video,0,0, back.width, back.height);
    
26.         }catch(e){
    
27.             if (e.name == "NS_ERROR_NOT_AVAILABLE") {
    1 w$ k7 N. k9 f* u- E! U6 R7 t
28.                 return setTimeout(draw, 100);
    1 \! _! q  H# A3 H
29.             } else {
    
30.                 throw e;
    7 g  i1 q2 C* k. y) F' e9 V
31.             }
    
32.         }
    ; s5 O1 I9 a" C) l
33.         if(video.src){
    
34.             socket.send(back.toDataURL("image/jpeg", 0.5));
    
35.         }
    : ?. }( N1 R+ K% Z) h- E
36.         setTimeout(draw, 100);
    
37.     }
    
38.     navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
    
39.     navigator.mozGetUserMedia || navigator.msGetUserMedia;
    5 r% _" H8 M: N8 A# X
40.     navigator.getUserMedia({video:true, audio:false}, success, console.log);
    ( z1 k' Y) K+ }/ t+ o+ L4 W. T* b
41. </script>

复制代码

1. php
   6 H: [1 L2 O: B$ E
2. 
   + J4 }+ o- @$ K* i4 T9 f
3. $server = new swoole_websocket_server("0.0.0.0", 9502);
   / w/ R9 Y% R/ D& B
4. 
   
5. $server->on('open', function (swoole_websocket_server $server, $request) {
   - I2 U. D- g* q! t0 {
6. 
   
7.     echo "新用户id:{$request->fd}加入了\n";
   
8.    // echo "server: handshake success with fd{$request->fd}\n";
   8 d- f. n4 L. J7 S
9. });
   
10. 
    5 Z: b& r" m! {* j. e$ ]
11. $server->on('message', function (swoole_websocket_server $server, $frame) {
    6 l1 ]8 w% ^+ |* s/ U9 S  c
12. 
    * y) X, T, b- m7 a
13.     //循环所有数据
    
14.     foreach($server->connections as $fd) {
    
15.         //返回数据
    
16.         $server->push($fd, $frame->data);
    . c+ M6 P  p2 N
17.     }
    0 F7 F3 K" b! [$ o
18. 
    $ f+ h8 g/ @4 s8 P. U2 @
19. });
    
20. 
    : j: ?( V7 ]3 L3 H) x5 x9 a
21. $server->on('close', function ($ser, $fd) {
    
22.     echo "用户id: {$fd} 退出\n";
    
23. });
    
24. 
    : W6 `' W  w( B9 M* u+ v
25. $server->start();

复制代码

( m4 D4 q+ Z: U9 X4 y- V

# Q' S" j9 e6 v; q$ P
( }/ Z) l$ L3 z. H% ^. i+ Q$ ^
7 n  z8 l. s9 l
9 m$ @% I3 w0 K. V. ^+ @
. g1 d) g- c1 ]
9 E* \% I% G6 h

' a; @5 V" O0 u  E" q
9 M2 h' y; D0 T. ]/ C4 O; b3 w