swoole 直播

admin

主要使用 webstocket
上代码

前端

观看页面

1. <script type="text/javascript">
   
2. var ws = new WebSocket('ws://192.168.0.150:9502');
   
3. 
   6 h% w5 w, v1 D9 X
4. ws.onopen = function() {
   0 H" _% K) ]6 u- h/ k
5.     console.log("连接成功");
   : ^7 x8 M/ b0 O8 ^' v
6. };
   - G6 |; O  s4 n+ u- a" Y. l" s: l9 s
7. ws.onmessage = function(e) {
   
8.    console.log(e);
   
9. 
   
10.    var data = e.data;
    
11.    document.getElementById('player').src=data;
    8 Q% R+ T& {" @5 a( A4 e+ q6 C+ \
12. };
    
13. ws.onerror = function() {
    
14.     console.log("关闭连接");
    9 Y% @. U* ^8 U
15. };
    , h! c8 z5 m- H
16. </script>

复制代码

录像页面

" v" j! b- a# G; u# Z8 o% I, m

最好用火狐测试。

1. <canvas id="output" style="display:none"></canvas>
   
2. 
   
3. 
   # Q+ l' ]3 J' \1 _
4. 
   , V8 U1 J! F0 J& Y/ f9 q8 Q
5. <script type="text/javascript" charset="utf-8">
   
6. 
   
7. 
   
8.     var socket = new WebSocket('ws://192.168.0.150:9502');
   
9.     //socket.send("嗨我登陆了");
   , `' E3 V2 S% |
10. 
    
11.     var back = document.getElementById('output');
    
12.     var backcontext = back.getContext('2d');
    5 J% F( V/ G9 C8 R) _- B
13.     var video = document.getElementsByTagName('video')[0];
    4 S1 x* [7 T/ c# l3 C9 D# L
14.    
    $ f; p1 C* c! K9 e8 v' d4 ?/ f8 J
15.     var success = function(stream){
    3 j- W& I5 C! b
16.         video.src = window.URL.createObjectURL(stream);
    
17.     }
    9 p' _9 A& B2 l& x2 A( F
18. 
    6 H/ N4 w8 z) b0 m' c% l
19.     socket.onopen = function(){
    " W! n4 ]* b4 s' P
20.         draw();
    
21.     }
    7 ?* F6 _2 e% [' c' S
22. 
    
23.     var draw = function(){
    ' j0 {' P/ R( j" i6 S) j
24.         try{
    5 {( p$ G( L& t/ h  n
25.             backcontext.drawImage(video,0,0, back.width, back.height);
    
26.         }catch(e){
    
27.             if (e.name == "NS_ERROR_NOT_AVAILABLE") {
    3 C4 H) ~4 }6 j3 M4 N2 Q
28.                 return setTimeout(draw, 100);
    
29.             } else {
    ) \- ^7 ?- [5 W: |. e/ k# }
30.                 throw e;
    
31.             }
    * e3 b8 v8 S' g  ~! r" d( t
32.         }
    7 O' u* }; u% w  C3 x. T& Y
33.         if(video.src){
    4 O  c5 H6 ^! O0 F
34.             socket.send(back.toDataURL("image/jpeg", 0.5));
    7 B4 X4 W% p8 p/ n5 i
35.         }
    
36.         setTimeout(draw, 100);
    " n) O0 N# R4 C$ O5 H
37.     }
    0 k1 ^" g; e* I0 D
38.     navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
    
39.     navigator.mozGetUserMedia || navigator.msGetUserMedia;
    
40.     navigator.getUserMedia({video:true, audio:false}, success, console.log);
    
41. </script>

复制代码

1. php
   
2. 
   ; x' T# V. K0 ]. o) [. u8 c
3. $server = new swoole_websocket_server("0.0.0.0", 9502);
   & L, j1 d% C% n2 n0 t6 u' e" K
4. 
   ' Z7 w6 m- o; n2 U! Q. l
5. $server->on('open', function (swoole_websocket_server $server, $request) {
   
6. 
   6 k; k. F3 U, w; e! u) O
7.     echo "新用户id:{$request->fd}加入了\n";
   
8.    // echo "server: handshake success with fd{$request->fd}\n";
   . _4 p/ k* z( W
9. });
   $ I# M' Q. g9 n% x  q3 `
10. 
    + f, C0 ^4 W; [& ]' \% h( `
11. $server->on('message', function (swoole_websocket_server $server, $frame) {
    
12. 
    
13.     //循环所有数据
    
14.     foreach($server->connections as $fd) {
    
15.         //返回数据
    0 [: r; Z$ M: h
16.         $server->push($fd, $frame->data);
    
17.     }
    
18. 
    
19. });
    ( C2 Z. t, d- i, U8 L
20. 
    0 h4 v( b# w( t+ x1 S
21. $server->on('close', function ($ser, $fd) {
    : k4 j' ~  q& c9 V- S' l; g
22.     echo "用户id: {$fd} 退出\n";
    
23. });
    
24. 
    + ]) D( D9 L, p4 r0 `6 c2 r
25. $server->start();

复制代码

/ a3 Z4 B- @6 E# M) d; g

. K  ^4 c# C, a3 O6 L) D
. J" R0 }1 U  |, V( f- n' x3 K

" J. S" ]6 M0 C( K* f/ _


6 o9 ?! w0 s: E
* K5 C6 }' o& A, o
' S; v3 V6 O- \  S
( g1 n1 ?- y/ y