cncml手绘网

标题: swoole 直播 [打印本页]

作者: admin    时间: 2020-3-31 19:41
标题: swoole 直播
主要使用 webstocket
9 X7 w$ P; l5 A3 l上代码
前端
观看页面
  1. <script type="text/javascript">
    ! W' v' l- ]9 x; Y) h: @7 P
  2. var ws = new WebSocket('ws://192.168.0.150:9502');/ {& ^# Y5 }7 _( o' o

  3. : {1 t3 U' S7 {/ O
  4. ws.onopen = function() {, r9 Q" A8 G. r4 C6 M  A: H7 m5 I- b9 k
  5.     console.log("连接成功");1 u0 M9 `" k- X3 j  L; M
  6. };
    9 H% @* N. U! X9 F5 q- ?
  7. ws.onmessage = function(e) {% i4 m& z8 }$ E* W4 n& h
  8.    console.log(e);. \" v/ @3 B1 h% c& M
  9. 9 f' d4 |1 Y4 A$ n8 @- o
  10.    var data = e.data;3 |6 }  C2 N2 R' K2 Z* s- B
  11.    document.getElementById('player').src=data;
    ; g; g" H; }8 f7 a0 o1 i! i
  12. };
    1 j, D% g7 T* u* `5 g
  13. ws.onerror = function() {
    : D& \' S+ ]$ Q0 w
  14.     console.log("关闭连接");. Z3 d3 \$ b2 e; [, a- u$ s
  15. };
    / Z5 d/ X3 A, r3 y) ?% O# ~& `* j
  16. </script>
复制代码
录像页面
4 L" y" l7 ~; A5 D9 j2 `
最好用火狐测试。
  1. <canvas id="output" style="display:none"></canvas>
    6 L2 U, j. A, e3 U4 Z

  2. ; m# s* d& x  |9 a" o- S
  3. : |' S6 q  B7 L  g. c# G% c

  4. $ X) n2 P. L, s7 ]) y4 |0 A1 ]
  5. <script type="text/javascript" charset="utf-8">
    . C* n) e) [, @4 ~6 j
  6. 3 I9 X+ @( c2 G5 G+ c. p! }

  7. 7 |4 ]: {& \  t% j, ~2 _9 [4 q; l* M
  8.     var socket = new WebSocket('ws://192.168.0.150:9502');5 e) y0 h+ g0 ^$ S
  9.     //socket.send("嗨我登陆了");8 `. U7 U' O7 o2 W( o- S0 ~/ r4 k
  10. / r5 p# k/ m4 C% i2 l
  11.     var back = document.getElementById('output');
    : p' ]0 b( B) a$ r: z. u
  12.     var backcontext = back.getContext('2d');& E+ }9 C8 G. ]/ s% ~! b
  13.     var video = document.getElementsByTagName('video')[0];
    & ?  H% }/ J: J3 t$ V9 i
  14.     # q0 z( z# c$ }
  15.     var success = function(stream){- C3 J/ G6 f; G9 ~* b+ A: g, D
  16.         video.src = window.URL.createObjectURL(stream);* C/ r9 q, h- d, z
  17.     }2 I+ }  w/ S. M
  18. - ?9 ?0 J7 s) U
  19.     socket.onopen = function(){. k& x* n$ ^4 b3 G
  20.         draw();
    5 K% \6 ^+ o; r1 s- `
  21.     }
    / j) C+ }+ t& A8 }9 O' |4 M
  22. + ~5 L- h4 u5 K/ G
  23.     var draw = function(){, m, R+ U1 S1 N  W5 U
  24.         try{
    , X0 X1 ^4 g7 s$ r5 r. m7 H
  25.             backcontext.drawImage(video,0,0, back.width, back.height);% N" k/ J/ f9 m( W8 i
  26.         }catch(e){
    , b+ F: C* z6 m1 M1 q
  27.             if (e.name == "NS_ERROR_NOT_AVAILABLE") {
    3 ~5 e2 x5 b! h
  28.                 return setTimeout(draw, 100);* D6 P2 a( I' g2 \
  29.             } else {7 f) q9 R" n# l8 m, Z; o; B' O
  30.                 throw e;' F2 |' c! g+ U4 V
  31.             }
    * b+ s% i3 t2 D: s, P
  32.         }! w1 ]+ u% T0 p
  33.         if(video.src){
    0 I% Y7 r- X4 v0 r$ U% n
  34.             socket.send(back.toDataURL("image/jpeg", 0.5));" ^7 q" L; R4 c4 w+ j
  35.         }& |' L" A: ~- l8 N- |$ ?2 j
  36.         setTimeout(draw, 100);3 B2 e2 V! }7 q% @# W: l
  37.     }
      l- S) b$ r4 }
  38.     navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||2 D  c# N& H5 U* r
  39.     navigator.mozGetUserMedia || navigator.msGetUserMedia;
    ; \9 P) ?7 d( Q+ Q: d) t% ?
  40.     navigator.getUserMedia({video:true, audio:false}, success, console.log);" M) o% ?! K5 H
  41. </script>
复制代码
  1. php
    & @! N) R1 L# I. _
  2. * T8 A0 h4 _0 N0 Q0 }+ i8 c* y( z, Z  f
  3. $server = new swoole_websocket_server("0.0.0.0", 9502);
    & {# |6 Q  f( ?2 L2 T2 Y! Q: K
  4. 4 k. ~, S/ v4 ?' B$ _
  5. $server->on('open', function (swoole_websocket_server $server, $request) {
    3 S$ r( u, i, M+ [0 P. m6 Q
  6. 2 ]. D, {8 O1 M$ E7 I* n
  7.     echo "新用户id:{$request->fd}加入了\n";
    % J. I# i; B( f
  8.    // echo "server: handshake success with fd{$request->fd}\n";
    ! k# N  m- H# Q
  9. });+ }. ]& h  m7 k$ m% m2 W
  10. 1 x+ Y) }+ J, p
  11. $server->on('message', function (swoole_websocket_server $server, $frame) {+ p" n& k: g! T/ X- w8 @6 Q
  12. 3 F8 o4 E: R4 v+ h
  13.     //循环所有数据# t# P7 ?" ]7 \
  14.     foreach($server->connections as $fd) {3 {* V4 G& J! Q8 F
  15.         //返回数据0 o* L, q8 I( q4 B
  16.         $server->push($fd, $frame->data);/ u# ?+ R) c9 p3 \
  17.     }
    + o9 l1 R. Y' e8 N# X7 B

  18. ; ]/ v- Q* @9 K3 X8 ?
  19. });  e* v1 i! v: W6 F2 h3 i: M  P: I

  20. : A- U6 r) r0 o7 @! Q2 Q( ]
  21. $server->on('close', function ($ser, $fd) {
    - N* w& [5 K- R, u8 N3 x( E
  22.     echo "用户id: {$fd} 退出\n";& O' i- h! s) H/ \: K
  23. });
    6 K8 f. N( {' t& o  v: S9 E

  24. $ {) D: c9 V; C, c. T" ~/ P7 }
  25. $server->start();
复制代码

; F5 d, T  Q9 P+ o5 `( u( C. |% {
8 t2 \3 L3 P/ s; \2 h0 {1 M  C$ @6 J* d1 U

6 r* A9 r0 B4 M9 _( L
3 X8 Q1 m8 y* G1 T0 X" L8 Z5 g+ G5 B

6 A# w  o5 B3 D+ g, g5 H, @2 x. W3 A+ d, F3 d) G6 U  Y& [

: ]5 [: |- A- ?- }% E
8 Z1 ^" ]2 t) T' D; _9 j9 N, c( }! d
2 Q& p: w, k3 j; A  m) `7 g





欢迎光临 cncml手绘网 (http://www.cncml.com/) Powered by Discuz! X3.2