swoole 直播

admin

主要使用 webstocket
' ~5 Z0 t/ p8 h5 c8 B3 Y: y0 p上代码

前端

观看页面

1. <script type="text/javascript">
   
2. var ws = new WebSocket('ws://192.168.0.150:9502');
   & L) _: u4 s; @: r/ s
3. 
   
4. ws.onopen = function() {
   3 K4 j& T) E/ ^8 N$ G- ?- q
5.     console.log("连接成功");
   3 |2 `  j5 ?: d" x* A: W$ q
6. };
     \+ U; ^- C7 O+ ^
7. ws.onmessage = function(e) {
   2 G# W: R8 L% W1 B
8.    console.log(e);
   # o7 ^* G& _/ M& k1 L
9. 
   
10.    var data = e.data;
    
11.    document.getElementById('player').src=data;
    
12. };
    1 c! w" W' q8 L* Z0 i0 t1 L7 x
13. ws.onerror = function() {
    $ n* U2 H! O; T8 w3 \3 s" _! t
14.     console.log("关闭连接");
    - o9 A! S4 Y8 i4 ?( ~  M
15. };
    6 U# Z( N- T1 Y! C6 V
16. </script>

复制代码

录像页面

最好用火狐测试。

1. <canvas id="output" style="display:none"></canvas>
   
2. 
   - V) K6 k# r) y* F3 Z  ~/ j) G. V3 R
3. 
   6 F+ S5 i& h1 b! `6 K: D
4. 
   
5. <script type="text/javascript" charset="utf-8">
   
6. 
   , i1 L. n: {( _' V- M: Q
7. 
   / t; u3 p# y( r+ r! q
8.     var socket = new WebSocket('ws://192.168.0.150:9502');
   / k. @8 ?1 C! b
9.     //socket.send("嗨我登陆了");
   
10. 
    
11.     var back = document.getElementById('output');
    " \( X2 e3 P! s& |( H9 D
12.     var backcontext = back.getContext('2d');
    
13.     var video = document.getElementsByTagName('video')[0];
    
14.    
    
15.     var success = function(stream){
    
16.         video.src = window.URL.createObjectURL(stream);
    
17.     }
    % g9 |9 m. E! a& e$ k3 Z/ U" Y. |+ R
18. 
    
19.     socket.onopen = function(){
    4 c0 V: K2 M6 Z$ o
20.         draw();
    2 Q+ S$ r3 f0 v& Z
21.     }
    
22. 
    " s( E. x* T! e( n& ?* X( e! N5 M
23.     var draw = function(){
    
24.         try{
    8 U; ]  i+ m" M
25.             backcontext.drawImage(video,0,0, back.width, back.height);
    
26.         }catch(e){
    6 A7 ]5 |5 g& q
27.             if (e.name == "NS_ERROR_NOT_AVAILABLE") {
    
28.                 return setTimeout(draw, 100);
    3 k% Q  |0 |) j% j
29.             } else {
    9 U" }5 h: w: I0 t5 z. K- L
30.                 throw e;
    
31.             }
    - @2 q1 l# E6 G4 G
32.         }
    
33.         if(video.src){
    ; S( E5 g0 [! v  g1 }% H/ \
34.             socket.send(back.toDataURL("image/jpeg", 0.5));
    % `$ N6 e$ H" a$ n) g; M
35.         }
    
36.         setTimeout(draw, 100);
    , @6 H1 R" {/ X4 i) @
37.     }
    
38.     navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
    
39.     navigator.mozGetUserMedia || navigator.msGetUserMedia;
    
40.     navigator.getUserMedia({video:true, audio:false}, success, console.log);
    6 Z- Y7 W% C% E4 I  {
41. </script>

复制代码

1. php
   
2. 
   ; G6 h8 Q4 F4 M! N; q
3. $server = new swoole_websocket_server("0.0.0.0", 9502);
   6 U! k1 X0 B9 x8 w* H  s- p+ ]" _3 i
4. 
   3 `7 j% [( W' V) I
5. $server->on('open', function (swoole_websocket_server $server, $request) {
   . ]+ t# F4 Y/ I7 R3 L# n
6. 
   
7.     echo "新用户id:{$request->fd}加入了\n";
   
8.    // echo "server: handshake success with fd{$request->fd}\n";
   5 L: O9 ^$ O6 \' O  D
9. });
   3 v7 |4 ^/ \( g( a& s1 y
10. 
    
11. $server->on('message', function (swoole_websocket_server $server, $frame) {
    
12. 
    
13.     //循环所有数据
    . W* v  |7 x# `. g8 E5 W
14.     foreach($server->connections as $fd) {
    4 D% p7 i# `# F
15.         //返回数据
    
16.         $server->push($fd, $frame->data);
    
17.     }
    
18. 
    0 D* m7 J' E% d" J
19. });
    8 ^) N# u  G, x9 ~) i
20. 
    
21. $server->on('close', function ($ser, $fd) {
    
22.     echo "用户id: {$fd} 退出\n";
    8 G7 m+ J6 ~7 }# W. B  C
23. });
    : Q0 t" C. V0 k. Q% ~- L$ `
24. 
    0 Z9 m3 Z6 \+ Y6 Y; ?$ c
25. $server->start();

复制代码

  r# V8 K$ G  W/ n3 x6 n, j: W7 }

1 z5 v/ J+ I. }8 i; T4 S

" \- N, ^* {# E( ~6 ]  p
5 [) S$ N& H8 ?$ i4 x* W
3 X% H: |: Z1 u

7 X$ H, }3 g: u: b. o; z' g* O! z


7 o% ^4 `0 u: J2 ]" j