swoole 直播

admin

主要使用 webstocket
上代码

前端

观看页面

1. <script type="text/javascript">
   
2. var ws = new WebSocket('ws://192.168.0.150:9502');
   ; `/ t0 }9 I/ n/ ~! P1 G& |
3. 
   
4. ws.onopen = function() {
   5 D, d; i" m5 y! T* c+ M7 }) @6 r
5.     console.log("连接成功");
   3 K# K- c2 L. \  a. L- Z7 t
6. };
   ( C# q4 c5 k) c. \: a6 q1 u" _% O
7. ws.onmessage = function(e) {
   5 O9 ]9 F( e3 I) Y
8.    console.log(e);
   4 i: p/ ~, p7 c2 v7 g
9. 
   & i1 O8 |5 X! G" n
10.    var data = e.data;
    8 {4 q7 i# P5 K' x9 S3 K
11.    document.getElementById('player').src=data;
    $ _7 K  n  r3 d
12. };
    
13. ws.onerror = function() {
    
14.     console.log("关闭连接");
    " y: Q: r* J+ b
15. };
    $ A2 Q( X% n, v! N) R" _
16. </script>

复制代码

录像页面

最好用火狐测试。

1. <canvas id="output" style="display:none"></canvas>
   - |" L) c& j( E9 j1 N" r
2. 
   - ^; ^7 g$ [; S  w8 r# `
3. 
   
4. 
   
5. <script type="text/javascript" charset="utf-8">
   , F/ S8 j# L/ V% K' h
6. 
   " x. V  W3 e3 f, ~1 c2 i& N, q2 L1 A
7. 
   ' D( z# \! D- e! ]' O! |" D
8.     var socket = new WebSocket('ws://192.168.0.150:9502');
   
9.     //socket.send("嗨我登陆了");
   4 o  e" b+ [% j$ ]5 z' R5 b$ \
10. 
    
11.     var back = document.getElementById('output');
    
12.     var backcontext = back.getContext('2d');
    3 }, w, \+ o" F# x
13.     var video = document.getElementsByTagName('video')[0];
    
14.    
    / y7 a7 S( y" T; D
15.     var success = function(stream){
    
16.         video.src = window.URL.createObjectURL(stream);
    8 l! m& W8 L  K( q
17.     }
    
18. 
    ; D$ \; j7 N+ b( T/ X; Z' M( p
19.     socket.onopen = function(){
    
20.         draw();
    
21.     }
    
22. 
    
23.     var draw = function(){
    3 E5 |. }' C' H; K" f1 \8 M5 _
24.         try{
      S& r3 ~+ m8 a( B* F5 a
25.             backcontext.drawImage(video,0,0, back.width, back.height);
    
26.         }catch(e){
    
27.             if (e.name == "NS_ERROR_NOT_AVAILABLE") {
    
28.                 return setTimeout(draw, 100);
    
29.             } else {
    
30.                 throw e;
    
31.             }
    
32.         }
    2 k3 a- s# Y8 B) `0 i8 q5 b  o
33.         if(video.src){
    
34.             socket.send(back.toDataURL("image/jpeg", 0.5));
    6 {+ b6 F4 o8 b/ x% V
35.         }
    # i6 W' E3 _+ k- n
36.         setTimeout(draw, 100);
    
37.     }
    
38.     navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
    
39.     navigator.mozGetUserMedia || navigator.msGetUserMedia;
    " P0 Q4 D1 T% R. F4 N* T( z
40.     navigator.getUserMedia({video:true, audio:false}, success, console.log);
    
41. </script>

复制代码

1. php
   3 M9 Q3 Z) F, {0 P% U- k" i* R
2. 
   7 p8 W! b* O" R( \
3. $server = new swoole_websocket_server("0.0.0.0", 9502);
   ! }; e, U0 W% x% p
4. 
   ; }  J. j9 O1 I. D) z. X+ K
5. $server->on('open', function (swoole_websocket_server $server, $request) {
   4 e, ~" n2 _! R0 i. S
6. 
   
7.     echo "新用户id:{$request->fd}加入了\n";
   
8.    // echo "server: handshake success with fd{$request->fd}\n";
   ; R2 _  l: f# \+ q* ~  M, t  Q# i
9. });
   # z+ ?+ F; o/ }
10. 
    1 c; e' u5 b* @) _( C4 t
11. $server->on('message', function (swoole_websocket_server $server, $frame) {
    
12. 
    
13.     //循环所有数据
    
14.     foreach($server->connections as $fd) {
    2 O. k! d3 U7 {! {  E
15.         //返回数据
    
16.         $server->push($fd, $frame->data);
    $ N- w7 O/ Y0 r8 I$ U; D0 p
17.     }
    
18. 
    " l. P( ^. l, k9 w; @
19. });
    
20. 
    
21. $server->on('close', function ($ser, $fd) {
    
22.     echo "用户id: {$fd} 退出\n";
    
23. });
    
24. 
    , j0 q. j# [5 H6 K7 W
25. $server->start();

复制代码

! a2 I4 [0 g( [* G5 X# W: \+ I3 c- R8 O



4 a+ R- b8 h1 f) V2 O# w4 L' w5 N2 V
# s7 ^! D# d# u