swoole 直播

admin

主要使用 webstocket
+ J* [, {3 y4 t- j3 b上代码

前端

观看页面

1. <script type="text/javascript">
   / }" X' f) E2 X. B- P9 ~  ~
2. var ws = new WebSocket('ws://192.168.0.150:9502');
     N1 e' [! Q" U$ Z# [% K3 b
3. 
   
4. ws.onopen = function() {
   
5.     console.log("连接成功");
   7 d! u4 ~, _4 _2 n7 w
6. };
   
7. ws.onmessage = function(e) {
   
8.    console.log(e);
     g. H8 Y6 s) l* ]4 q5 n8 q
9. 
   ! p# I" q3 O# f# }) Z
10.    var data = e.data;
    9 \0 n$ c: t$ p4 v3 R& X/ T) A% G
11.    document.getElementById('player').src=data;
    
12. };
    * S2 J; x2 W, d' l2 M  y4 n; S
13. ws.onerror = function() {
    ) Y% o7 q/ a! D4 P4 V+ ]' L$ I. d3 z# v4 t
14.     console.log("关闭连接");
    
15. };
    1 h/ p; J1 F: d5 K- Z+ t' |
16. </script>

复制代码

录像页面

8 a0 H+ q2 B, s' a" l

最好用火狐测试。

1. <canvas id="output" style="display:none"></canvas>
   
2. 
   ) k: r3 f* [5 I: c: R3 X# f
3. 
   . R3 r) }3 J" Z+ B, z$ l9 g$ d
4. 
   
5. <script type="text/javascript" charset="utf-8">
   + f% r  w( i. ^& b* E/ n9 k, I
6. 
   + n( @9 }$ a, N4 W, O$ j
7. 
   ( [2 I; E/ E3 E5 J. g! }
8.     var socket = new WebSocket('ws://192.168.0.150:9502');
   7 R: M: ~2 N! ^/ Q: s0 w5 F( H1 j
9.     //socket.send("嗨我登陆了");
   ; x$ m" \) R2 `+ t% X
10. 
    $ w% c0 j" K& r; [
11.     var back = document.getElementById('output');
    7 h2 {3 R0 J5 R7 @
12.     var backcontext = back.getContext('2d');
    4 }) `$ z- L4 u! l& O& M3 k. k) u
13.     var video = document.getElementsByTagName('video')[0];
    : a, t9 V2 n; t4 r, c
14.    
    
15.     var success = function(stream){
    
16.         video.src = window.URL.createObjectURL(stream);
    ( [$ Y/ r& x4 Y
17.     }
    
18. 
    
19.     socket.onopen = function(){
    
20.         draw();
    
21.     }
    8 z: O) L; V" g( h* `4 L
22. 
    & t3 X& h' @/ l! S* G$ U% S
23.     var draw = function(){
    
24.         try{
    % D2 z: ?/ C% k7 }( U) w) I
25.             backcontext.drawImage(video,0,0, back.width, back.height);
    6 p+ L& l9 t+ D
26.         }catch(e){
    * q1 H# p# @4 P: z" {
27.             if (e.name == "NS_ERROR_NOT_AVAILABLE") {
    / c6 v5 ?) F6 O: ~* \- s# j
28.                 return setTimeout(draw, 100);
    
29.             } else {
    : T/ R1 F) D# ?9 k' c3 s9 q+ Z9 W
30.                 throw e;
    & h1 w) E+ Z! K0 ~$ E
31.             }
    9 X- H* l% Y4 m/ [' z- f5 B
32.         }
    " c% S! Q2 ?6 C9 L  ?+ _+ c  ?9 b& m3 v
33.         if(video.src){
    2 h0 k  R  [5 b- c' X5 i
34.             socket.send(back.toDataURL("image/jpeg", 0.5));
    
35.         }
    0 t$ |5 @' s. P  |# _% _1 h( A4 q. r
36.         setTimeout(draw, 100);
    
37.     }
    ( R3 n2 {; h9 i4 U) S' F
38.     navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
    1 y* ^. d3 F9 C- d& Q
39.     navigator.mozGetUserMedia || navigator.msGetUserMedia;
    
40.     navigator.getUserMedia({video:true, audio:false}, success, console.log);
    8 u; @3 b+ J7 S4 [! i' A& u9 r& f
41. </script>

复制代码

1. php
   
2. 
   
3. $server = new swoole_websocket_server("0.0.0.0", 9502);
   3 _  P1 D; E* P4 i6 @$ M
4. 
   " S: X/ N7 F1 j. n" a
5. $server->on('open', function (swoole_websocket_server $server, $request) {
   & q' t) h) q' U
6. 
   
7.     echo "新用户id:{$request->fd}加入了\n";
   
8.    // echo "server: handshake success with fd{$request->fd}\n";
   : \& o, R) R4 x
9. });
   
10. 
    9 a& d* f( u, g- O, f1 l& ?
11. $server->on('message', function (swoole_websocket_server $server, $frame) {
    
12. 
    
13.     //循环所有数据
      e  T8 l6 ^( z
14.     foreach($server->connections as $fd) {
    - I/ _# r0 L  L1 T' I0 h8 Y
15.         //返回数据
    
16.         $server->push($fd, $frame->data);
    
17.     }
    
18. 
    
19. });
    : m+ h, h8 g7 ?
20. 
    
21. $server->on('close', function ($ser, $fd) {
    ) y! v* l6 y" V4 p; \/ |+ n
22.     echo "用户id: {$fd} 退出\n";
    
23. });
    6 x; g, I6 M. J3 e) @. A9 A
24. 
    
25. $server->start();

复制代码

* d  u! @) \( p5 L# f) |

! A2 V2 D! X9 j  ^
; r0 Z  B, N7 b8 z8 T) V

5 m. C6 m0 O9 \/ g; Y7 n




" ^* a8 [8 r* J+ c4 N% x& m