swoole 直播

admin

主要使用 webstocket
上代码

前端

观看页面

1. <script type="text/javascript">
   
2. var ws = new WebSocket('ws://192.168.0.150:9502');
   & {- G/ F, ]$ N) q) d
3. 
   ( X* n7 e/ K! _- H( B
4. ws.onopen = function() {
   
5.     console.log("连接成功");
   
6. };
   1 j6 c! B2 y+ b
7. ws.onmessage = function(e) {
   
8.    console.log(e);
   2 ~4 |% o) X) Z  g( e2 [
9. 
   5 i4 S3 Y5 H  g1 H- N4 r
10.    var data = e.data;
    
11.    document.getElementById('player').src=data;
    
12. };
    / p8 m. W% s+ U! j/ e& q
13. ws.onerror = function() {
    . N6 l: G7 |* J7 Z2 v; \
14.     console.log("关闭连接");
    
15. };
    
16. </script>

复制代码

录像页面

最好用火狐测试。

1. <canvas id="output" style="display:none"></canvas>
   
2. 
   5 ~( X9 X! y  l6 Z: T* e
3. 
   / l3 k$ h; Q& [3 y8 ?# O* \/ b: }
4. 
   
5. <script type="text/javascript" charset="utf-8">
   
6. 
   # G& F  r. F" }. I
7. 
   3 q1 w! q" S) ?& J
8.     var socket = new WebSocket('ws://192.168.0.150:9502');
   
9.     //socket.send("嗨我登陆了");
   
10. 
    0 p, H! k, x, n9 g; }4 k, s* H
11.     var back = document.getElementById('output');
    8 U0 G% G& ~; F, P" ?1 L
12.     var backcontext = back.getContext('2d');
    3 y& _% e( K) g
13.     var video = document.getElementsByTagName('video')[0];
    * r) |9 k) O8 F5 M6 d2 ]; y
14.    
    9 H2 t4 E) Q% r& @* }4 p" @$ B
15.     var success = function(stream){
    + L: W& r" M& w/ k! k8 Z
16.         video.src = window.URL.createObjectURL(stream);
    
17.     }
    % L1 H5 R4 m+ l3 d  \* e
18. 
    - s" [1 q  D" D4 p6 v* ~' l
19.     socket.onopen = function(){
      ]- H3 Q+ i+ ^/ J1 J8 P6 ^# ?
20.         draw();
    
21.     }
    : X2 s5 Y* K( E6 a; {
22. 
    
23.     var draw = function(){
    ; `. e& T& C( ^7 {1 X# w. N% ?
24.         try{
    
25.             backcontext.drawImage(video,0,0, back.width, back.height);
    0 t0 B8 O. u0 U6 c3 ^
26.         }catch(e){
    
27.             if (e.name == "NS_ERROR_NOT_AVAILABLE") {
    : v! g! |0 q2 `8 F2 g
28.                 return setTimeout(draw, 100);
    
29.             } else {
    2 f% O) w6 C( y, @8 D- B
30.                 throw e;
    
31.             }
    
32.         }
    ' ]( ]2 M) {$ z8 E. c) g0 D6 o4 A, X
33.         if(video.src){
    , c/ A1 i2 L5 H! A, V
34.             socket.send(back.toDataURL("image/jpeg", 0.5));
    
35.         }
    4 P2 I: m8 @  n- p! ^
36.         setTimeout(draw, 100);
    ( |2 N) F" }1 I" x0 i% V
37.     }
    
38.     navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
    ' L4 f+ v. E. n) C. X5 i
39.     navigator.mozGetUserMedia || navigator.msGetUserMedia;
    
40.     navigator.getUserMedia({video:true, audio:false}, success, console.log);
    9 H! \$ ^* i1 ?+ [
41. </script>

复制代码

1. php
   
2. 
   , h( {% F: M; ~6 `- c$ y
3. $server = new swoole_websocket_server("0.0.0.0", 9502);
   
4. 
   
5. $server->on('open', function (swoole_websocket_server $server, $request) {
   - {  L" G) d+ g4 K  z6 x: n0 c1 ?2 Q3 Y9 K
6. 
   
7.     echo "新用户id:{$request->fd}加入了\n";
   
8.    // echo "server: handshake success with fd{$request->fd}\n";
   
9. });
   4 }: Y; m2 ]. \" e% k$ f
10. 
    
11. $server->on('message', function (swoole_websocket_server $server, $frame) {
    ( L9 D5 J( l; f" n
12. 
    
13.     //循环所有数据
    
14.     foreach($server->connections as $fd) {
    
15.         //返回数据
    
16.         $server->push($fd, $frame->data);
    6 F8 X$ W( q/ j. {
17.     }
    
18. 
    * Z6 r/ y& n6 ^7 `* f
19. });
    
20. 
    
21. $server->on('close', function ($ser, $fd) {
    7 k/ b6 b4 }/ n' Y
22.     echo "用户id: {$fd} 退出\n";
    1 Z. D* x  K6 i3 m+ D& W
23. });
    + ~0 X1 e5 o% H$ L4 w! U! [" D. D
24. 
    4 ~) H0 D/ a; t# i: n0 E' Q
25. $server->start();

复制代码

# _6 b. F5 G) c2 f
" _% {/ ?( C4 n& _% x% R/ r5 |8 y( B8 p
+ ^/ E) E6 P4 f
/ n5 J1 t( y, C( e+ z# w. `# M



5 K# a7 v: U( o9 s' x, U4 ^
6 D8 W: H4 m2 u) |$ j- ]; g# ]


& j1 x  ?) q+ o4 _+ s% C