swoole 直播

admin

主要使用 webstocket
上代码

前端

观看页面

1. <script type="text/javascript">
   8 ~, C+ z# ~% z0 Y
2. var ws = new WebSocket('ws://192.168.0.150:9502');
   # [* |9 P5 s1 c# l8 F; s) R! x
3. 
   / D2 S- [+ Y  d0 z% e7 {, E6 F$ E
4. ws.onopen = function() {
   
5.     console.log("连接成功");
   
6. };
   1 d  W0 z  d+ B" O+ r, f. c5 `) [
7. ws.onmessage = function(e) {
   0 v: t: R- w5 d) m
8.    console.log(e);
   2 J: `6 }$ n& i9 {7 h& u; \" O' t& R
9. 
   
10.    var data = e.data;
    1 w) j8 R' `, I1 N% h
11.    document.getElementById('player').src=data;
    % r( |, H3 ~2 `7 Q- N
12. };
    2 P. o* i" @# i" ^
13. ws.onerror = function() {
    
14.     console.log("关闭连接");
    / [/ i% A7 y$ N* l
15. };
    ( [( g. m6 H! M+ \# j4 N/ b( `
16. </script>

复制代码

录像页面

' R8 N* u; K6 H+ F

最好用火狐测试。

1. <canvas id="output" style="display:none"></canvas>
   
2. 
   
3. 
   3 e! Y# p3 H* _: c( e( K" ~
4. 
   & H4 I2 R& r  J: }: B; Z& ~3 |
5. <script type="text/javascript" charset="utf-8">
   
6. 
   5 O' V  ]* A# g2 B1 }4 `% M5 r1 ]
7. 
   / Z6 r/ c; G0 x4 c, ^3 r
8.     var socket = new WebSocket('ws://192.168.0.150:9502');
   0 Z4 }' V9 J1 ]: a+ m+ B
9.     //socket.send("嗨我登陆了");
   - q' _" k+ G. K+ n  t( D& }+ K
10. 
    ; e3 O) j6 b8 j, u/ V
11.     var back = document.getElementById('output');
    
12.     var backcontext = back.getContext('2d');
    
13.     var video = document.getElementsByTagName('video')[0];
    
14.    
    7 I1 N, {. }! ~: K% f: z
15.     var success = function(stream){
    
16.         video.src = window.URL.createObjectURL(stream);
    % k: Q; e. s' q" J1 Z
17.     }
    
18. 
    
19.     socket.onopen = function(){
    % h$ ?& x& |7 V0 h# M
20.         draw();
    8 Y" r" P2 u: ?8 U8 Z9 b2 K
21.     }
    
22. 
    
23.     var draw = function(){
    , j- r" T2 r/ y* \2 j6 i& Y
24.         try{
    / R! `1 F/ d- N( T
25.             backcontext.drawImage(video,0,0, back.width, back.height);
    
26.         }catch(e){
    
27.             if (e.name == "NS_ERROR_NOT_AVAILABLE") {
    , z. o7 L- M5 e! o
28.                 return setTimeout(draw, 100);
    6 l+ j. i! R* p# ]
29.             } else {
    7 F6 y6 N0 m2 q6 g1 p
30.                 throw e;
    
31.             }
    ' F3 }6 s; }6 C6 j  g
32.         }
    5 P# X) K6 d! o& s0 k* H4 E
33.         if(video.src){
    7 q4 b) u' H% K
34.             socket.send(back.toDataURL("image/jpeg", 0.5));
    
35.         }
    
36.         setTimeout(draw, 100);
    
37.     }
    ' ?4 j6 R: o/ Y6 y* y
38.     navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
    
39.     navigator.mozGetUserMedia || navigator.msGetUserMedia;
    , J: y- b: P. Q! J1 u9 X! [
40.     navigator.getUserMedia({video:true, audio:false}, success, console.log);
    9 B  o2 m6 e  I1 n* r+ b0 J% X
41. </script>

复制代码

1. php
   4 S# }7 E2 g8 G- q: _  N
2. 
   
3. $server = new swoole_websocket_server("0.0.0.0", 9502);
   
4. 
   5 F; ~0 ~! g5 V' \0 O3 a& ?
5. $server->on('open', function (swoole_websocket_server $server, $request) {
   
6. 
   
7.     echo "新用户id:{$request->fd}加入了\n";
   0 I5 T4 y) C. `& E) e
8.    // echo "server: handshake success with fd{$request->fd}\n";
   5 A7 I9 u/ }# Q! U8 b
9. });
   ) ~5 m+ D) u6 W. X
10. 
    , ]4 q& V+ ~& d4 F" s$ Z
11. $server->on('message', function (swoole_websocket_server $server, $frame) {
    6 X; W$ @2 |: u6 ]% p. t" a
12. 
    
13.     //循环所有数据
    1 O! ]$ U7 F$ d. p5 i
14.     foreach($server->connections as $fd) {
    ; w$ V. S: F& L$ F4 z
15.         //返回数据
    / x5 H' R6 W, v1 D& r
16.         $server->push($fd, $frame->data);
    
17.     }
    0 j0 |" h# C2 E8 i; K2 k
18. 
    
19. });
    
20. 
    8 n5 `4 ]5 p5 ]. b- [
21. $server->on('close', function ($ser, $fd) {
    
22.     echo "用户id: {$fd} 退出\n";
    / w& v6 @( T* U1 r, M* o7 x* ^3 @
23. });
    ' e  Z4 U# d' Q7 T4 I
24. 
      c  b! A4 C! p  m
25. $server->start();

复制代码

, b# ~7 @) s5 [+ ~6 v4 B7 E


, Q, @- F6 M6 ~$ p! r" r


8 n! F5 j7 e) w: q

) @$ t0 r% f9 p5 B, H) ^
$ ?* U4 p$ y- V% l( W& Y0 s