swoole 直播

admin

主要使用 webstocket
上代码

前端

观看页面

1. <script type="text/javascript">
   + ~0 `- v3 S7 R3 v+ O/ [
2. var ws = new WebSocket('ws://192.168.0.150:9502');
   ( `5 c, R: {, j' Q4 Q
3. 
   
4. ws.onopen = function() {
   
5.     console.log("连接成功");
   
6. };
   , S/ y# ~( Y9 P" h6 [7 K
7. ws.onmessage = function(e) {
   
8.    console.log(e);
     l1 l# P+ z: `. k; a
9. 
   ; m' l2 z! n' \6 @/ Z
10.    var data = e.data;
    ( X, }& A" y  _3 _/ N' s6 C
11.    document.getElementById('player').src=data;
    
12. };
    
13. ws.onerror = function() {
    
14.     console.log("关闭连接");
    ) P' ~2 Y5 M7 Z' B3 s- A& c
15. };
    
16. </script>

复制代码

录像页面

最好用火狐测试。

1. <canvas id="output" style="display:none"></canvas>
   2 I2 U" |( B$ l5 {
2. 
   
3. 
   
4. 
   9 _7 l$ K4 r7 `( i" ~$ j* O* j
5. <script type="text/javascript" charset="utf-8">
   
6. 
   " p8 y9 O& {- m
7. 
   0 t# A1 o$ y$ q1 g; Y
8.     var socket = new WebSocket('ws://192.168.0.150:9502');
   ; d( Z+ K5 I$ E' U% y# g: C+ t
9.     //socket.send("嗨我登陆了");
   " O: T( H+ ], Z4 T" |
10. 
    2 K6 u' Y6 y9 {6 r2 k- C0 y
11.     var back = document.getElementById('output');
    
12.     var backcontext = back.getContext('2d');
    
13.     var video = document.getElementsByTagName('video')[0];
    2 j. S) w( j) S' @
14.    
    : C8 ~$ A, ^2 T* ]+ a! O
15.     var success = function(stream){
    9 x) \! i5 J  S4 h
16.         video.src = window.URL.createObjectURL(stream);
    - e1 j2 v/ y% O) w
17.     }
    4 D0 ]$ O: c. a* w( T- ^
18. 
    & j( R+ C# W) x  m2 G
19.     socket.onopen = function(){
    
20.         draw();
    1 F. H5 O' e1 s' i: ]- ~6 N
21.     }
    
22. 
    ' F2 D& t3 ]' g0 E; X% y! C+ w, b/ `
23.     var draw = function(){
    
24.         try{
    ( w: o4 T+ Q# X) N! J3 W: X0 T
25.             backcontext.drawImage(video,0,0, back.width, back.height);
    * l( b! N& q# `) i
26.         }catch(e){
    : S6 ^! f! ~% b0 W
27.             if (e.name == "NS_ERROR_NOT_AVAILABLE") {
    4 L2 c, m5 j% w
28.                 return setTimeout(draw, 100);
    
29.             } else {
    0 Y# k  T6 b0 k# D" X! _
30.                 throw e;
    
31.             }
    . M& n- f2 S* N0 }- k- N% D, K: R
32.         }
    3 C2 d" O  W, a! {
33.         if(video.src){
    
34.             socket.send(back.toDataURL("image/jpeg", 0.5));
    - q3 l$ H  l3 v1 _; a
35.         }
    $ z+ _! T; l& a% b9 {
36.         setTimeout(draw, 100);
    3 D  i: {3 j& v' p( U, w/ D0 r
37.     }
    : s. f; P+ {: [' m4 a8 u/ Z( q7 x) r
38.     navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
    
39.     navigator.mozGetUserMedia || navigator.msGetUserMedia;
    : k( u' b7 e2 |/ T6 |# E, r% J
40.     navigator.getUserMedia({video:true, audio:false}, success, console.log);
    ; V2 I: r2 k& W) u9 `
41. </script>

复制代码

1. php
   5 k- [$ k7 w7 o* @+ u
2. 
   , |$ T) @& V! P/ J! x/ |4 F& @4 A
3. $server = new swoole_websocket_server("0.0.0.0", 9502);
   : T) f9 s$ C' N; Q7 E) l
4. 
   
5. $server->on('open', function (swoole_websocket_server $server, $request) {
   
6. 
   
7.     echo "新用户id:{$request->fd}加入了\n";
     o6 X/ i. N( s3 Y
8.    // echo "server: handshake success with fd{$request->fd}\n";
   # w3 }6 l, [: n" o" n3 j  K
9. });
   
10. 
    1 |1 l. y2 E: y& A  y, u6 P3 H
11. $server->on('message', function (swoole_websocket_server $server, $frame) {
    
12. 
    ' J% I& I+ |5 \2 A' ~/ J3 l
13.     //循环所有数据
    
14.     foreach($server->connections as $fd) {
    
15.         //返回数据
    7 z$ n" b2 I: S6 ]6 ~( o
16.         $server->push($fd, $frame->data);
    $ c' b: V. }$ f: I
17.     }
    
18. 
    
19. });
    1 O$ ^: t' e0 p' J2 J7 |0 Z
20. 
    , D* S! P% q6 a" h* H$ Y
21. $server->on('close', function ($ser, $fd) {
    
22.     echo "用户id: {$fd} 退出\n";
    
23. });
    , y4 p5 Q- j5 g
24. 
      m9 Q1 p/ o1 w! y: \
25. $server->start();

复制代码

; \0 r+ G) t1 e! Q( Z
( M6 j8 T5 j/ b


) [1 S, w! P+ F! G




( T7 M+ c5 H0 A" D/ K2 N/ s2 c