swoole 直播

admin

主要使用 webstocket
6 y/ N- ^2 F9 V0 o上代码

前端

观看页面

1. <script type="text/javascript">
   
2. var ws = new WebSocket('ws://192.168.0.150:9502');
   5 k2 w; \' B0 E
3. 
   , @, d0 e; |0 C' A) U, |2 }
4. ws.onopen = function() {
   
5.     console.log("连接成功");
   ) |: d* R+ g7 R6 U0 B0 G- ~! ]
6. };
   
7. ws.onmessage = function(e) {
   - m' c% D" X. Y
8.    console.log(e);
   
9. 
   2 e8 r, d) E0 }$ Y# l2 F& P
10.    var data = e.data;
    0 U+ g1 Q  {' n; J8 m; J, [1 @
11.    document.getElementById('player').src=data;
    9 J2 G( f, L  V- }( ?- y9 j) U
12. };
    1 ]+ y/ [  e# S( x! o, B) c
13. ws.onerror = function() {
    0 d2 A5 h5 S+ b* v- V0 A
14.     console.log("关闭连接");
    ! o' V# y" m: \! R- C- L0 T# @
15. };
    
16. </script>

复制代码

录像页面

最好用火狐测试。

1. <canvas id="output" style="display:none"></canvas>
   
2. 
   2 R- {, L1 ~0 D8 ]! t; N& Z
3. 
   
4. 
   
5. <script type="text/javascript" charset="utf-8">
   % h& Q9 U3 y; ^- K" G: _
6. 
   
7. 
   ' q7 p0 B0 Z7 A( Y4 h: Q1 E
8.     var socket = new WebSocket('ws://192.168.0.150:9502');
   
9.     //socket.send("嗨我登陆了");
   
10. 
    9 ]- U5 T" ?# k: ^3 j1 j7 p) H
11.     var back = document.getElementById('output');
    9 b7 g" k' |+ |9 ~
12.     var backcontext = back.getContext('2d');
    
13.     var video = document.getElementsByTagName('video')[0];
    
14.    
    
15.     var success = function(stream){
    " s& L% H+ j2 i$ V) K/ v( c4 p8 U) W
16.         video.src = window.URL.createObjectURL(stream);
    
17.     }
    ; Y5 h/ t" V/ m/ V# o
18. 
    ' J4 ^; J0 q; _5 s5 G
19.     socket.onopen = function(){
    
20.         draw();
    2 F( S9 v: u- ?4 x
21.     }
    
22. 
    
23.     var draw = function(){
    , J; G1 V0 D5 h% y7 I7 D$ j
24.         try{
    
25.             backcontext.drawImage(video,0,0, back.width, back.height);
    $ [' N  L% w) u+ N
26.         }catch(e){
    
27.             if (e.name == "NS_ERROR_NOT_AVAILABLE") {
    
28.                 return setTimeout(draw, 100);
      F6 o( d8 V. @. {
29.             } else {
    - q. T% [' `* H; V3 P' F
30.                 throw e;
    
31.             }
    ; e0 {' N* h" g
32.         }
      ~' ^  X4 f4 P- N* }
33.         if(video.src){
    0 R' h6 q: ?+ p" ?
34.             socket.send(back.toDataURL("image/jpeg", 0.5));
    8 ~# }9 {4 s/ F* [9 u/ c: E5 r6 T
35.         }
    
36.         setTimeout(draw, 100);
    7 G0 I0 K4 Z# Y- N' v; B/ N
37.     }
    9 V' M) G, D- `3 y9 ]9 w! ?
38.     navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
    + P) l, D: l3 X& ~& \  ?
39.     navigator.mozGetUserMedia || navigator.msGetUserMedia;
    0 t% \+ q  E; v, R
40.     navigator.getUserMedia({video:true, audio:false}, success, console.log);
    , Q: k' }) R0 ^1 a* N+ a4 t
41. </script>

复制代码

1. php
   
2. 
   
3. $server = new swoole_websocket_server("0.0.0.0", 9502);
   3 P; T, Y8 t$ _% w( f
4. 
   - q4 H' v- `, e( s# n% ]( r7 s
5. $server->on('open', function (swoole_websocket_server $server, $request) {
   7 \0 y  h: Q5 c/ R, n
6. 
   
7.     echo "新用户id:{$request->fd}加入了\n";
   , c5 C; |4 }3 k  t
8.    // echo "server: handshake success with fd{$request->fd}\n";
   
9. });
   ( [. a: L& t2 h( l
10. 
    8 x! _; U. l" P3 r3 W
11. $server->on('message', function (swoole_websocket_server $server, $frame) {
    
12. 
    ' u" {4 t# c. B1 M# h
13.     //循环所有数据
    
14.     foreach($server->connections as $fd) {
    
15.         //返回数据
    / n; p$ p8 S. ~& A
16.         $server->push($fd, $frame->data);
    ) C9 }- r: H0 L! L
17.     }
    6 p# _" ]& I! j6 ?/ D4 ~% \
18. 
    + l. k& d+ r/ j* t2 o
19. });
    
20. 
    
21. $server->on('close', function ($ser, $fd) {
    
22.     echo "用户id: {$fd} 退出\n";
    
23. });
    % u1 p8 b1 J" \; w
24. 
    7 v/ Z1 t5 o+ [( N( @4 W
25. $server->start();

复制代码

* A1 b; E/ R; P2 v: W" V4 M1 {

- Q0 H, q& O2 ]% s( S. Z6 Y5 [

5 ?; n. i8 m" X4 J

! w! V6 m! U( ]1 o" I
1 X: X  |! B2 U$ {1 o& f

( U+ W( Y/ ]% W% K& H
5 A) |+ |% D$ J( u& }5 C% C
+ m( y0 U- Y! O* h+ j/ k, n0 M