您尚未登录,请登录后浏览更多内容! 登录 | 立即注册

QQ登录

只需一步,快速开始

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 12161|回复: 0
打印 上一主题 下一主题

[swoole] swoole 直播

[复制链接]
跳转到指定楼层
楼主
发表于 2020-3-31 19:41:34 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
主要使用 webstocket
, Z. g  X  _  |1 l+ g上代码
前端
观看页面
  1. <script type="text/javascript">
    8 \! ]2 C, H6 V4 T  m5 F$ @3 ^" G
  2. var ws = new WebSocket('ws://192.168.0.150:9502');- a2 ?1 s# [: M0 x2 _
  3. 5 Y$ E3 \. U1 y. \* O
  4. ws.onopen = function() {/ ]# |+ s, q/ S
  5.     console.log("连接成功");
    , }6 ^# v- _6 O- x
  6. };! }1 ?2 u2 J7 G7 P( y8 Q
  7. ws.onmessage = function(e) {
    * P5 ^* @" K; e4 p  o% z" ^& I
  8.    console.log(e);
    ) y  d, t3 e; `& l9 v4 j" S

  9. 2 B" C% V8 i" E- S3 d
  10.    var data = e.data;$ x5 D9 N5 M/ w! S
  11.    document.getElementById('player').src=data;
    & W/ `4 Q; S. C3 t4 w
  12. };
    " V! G3 i" ~% E: N& H
  13. ws.onerror = function() {
    % v6 X0 O: N# j$ k! i( D! y0 b4 B. ?
  14.     console.log("关闭连接");
    - M1 m2 i' f/ C( F
  15. };
    " g/ |& t* S( H" J7 G6 }4 e' {! v
  16. </script>
复制代码
录像页面

8 K' u; S# N" _
最好用火狐测试。
  1. <canvas id="output" style="display:none"></canvas>$ z# F7 }3 Q6 N- C4 a1 ]# h7 q
  2. 5 {2 B% Q( L$ T4 N  z$ D; a5 \- n
  3. 8 U. ^2 P3 G2 r1 X

  4. 0 B) B+ Y' Q3 e1 d3 g: u
  5. <script type="text/javascript" charset="utf-8">4 A: j% O4 d3 Z0 d! @! H

  6. $ J* f4 P2 h% L3 U. C5 S
  7. # z# G4 Q5 B1 C7 z4 [  D- j5 L
  8.     var socket = new WebSocket('ws://192.168.0.150:9502');9 C9 ^. X0 c0 [4 {* ?
  9.     //socket.send("嗨我登陆了");2 R7 B6 e$ w0 K/ v5 Q+ V

  10. ; P; g) u6 }. h6 m: K- N0 z
  11.     var back = document.getElementById('output');
    0 a2 }7 i- \. b, f& L
  12.     var backcontext = back.getContext('2d');
    2 C* C6 `9 q  v0 v
  13.     var video = document.getElementsByTagName('video')[0];
    - G8 u  q; P$ l" |$ {" i+ M3 ]  ~+ H
  14.    
    5 o) h5 h; g& Y- S  t6 C& M$ z$ ?
  15.     var success = function(stream){, @( A- b4 e; ?$ r1 q, G
  16.         video.src = window.URL.createObjectURL(stream);
    2 n% @/ ~" x' U: T5 Y2 K  U# _7 E% s
  17.     }
    " T6 r: @: C7 [6 F6 q1 D

  18. 7 y+ [" F. F% v/ N" T5 X( a4 L
  19.     socket.onopen = function(){
    8 `8 N0 r, Z3 c/ ^
  20.         draw();2 f7 R% b5 u& O) J4 I( n. z2 D
  21.     }/ N* D  A9 h% n/ |2 n( F5 \
  22. 9 _$ W6 W/ ]1 B, H5 f
  23.     var draw = function(){
    ! J3 o- L9 D) ^$ S+ e( f% t
  24.         try{  A  P& k+ x, `# ?; t& d4 [: c
  25.             backcontext.drawImage(video,0,0, back.width, back.height);
    ( T) H" r$ ]$ |0 u
  26.         }catch(e){* {, D# L' w* ?3 C
  27.             if (e.name == "NS_ERROR_NOT_AVAILABLE") {
    5 Y# U7 j% d: p
  28.                 return setTimeout(draw, 100);
    6 B3 V( _1 S% j- D  d1 |0 p# @' z& _
  29.             } else {
    " ~4 w' N( v8 y1 g
  30.                 throw e;3 `  B( H, J& }( n  N/ ]( z
  31.             }. n( ?$ M3 k# o
  32.         }9 e$ L7 m4 l' X  r' \3 u
  33.         if(video.src){
    + `& X( c0 B! K
  34.             socket.send(back.toDataURL("image/jpeg", 0.5));* R& A* W- F7 G7 O- ?
  35.         }
    ! `! w' |7 u- t; ]2 q
  36.         setTimeout(draw, 100);5 }4 N/ p& G+ n# R$ Y7 s
  37.     }, n3 [9 {9 j! e4 w# ~5 }$ ], Z
  38.     navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
    , G# n' P2 N0 m- ]4 C
  39.     navigator.mozGetUserMedia || navigator.msGetUserMedia;
    1 o- w# y6 @# s& j) j2 r/ m5 p2 i# N
  40.     navigator.getUserMedia({video:true, audio:false}, success, console.log);
    ; V, `, C) v( r8 [
  41. </script>
复制代码
  1. php
    ( x) j" b  Z8 C

  2. ) B3 Y) c9 F4 a2 f5 e
  3. $server = new swoole_websocket_server("0.0.0.0", 9502);
    ( M' Y  q) L2 \9 W. [0 B' O
  4. 3 c$ U5 J( p' ]' K% g4 x; A- w
  5. $server->on('open', function (swoole_websocket_server $server, $request) {  c% d+ `/ g* O( R/ P! w' j! l
  6. 0 r: ~  X' F. H& H8 _$ r
  7.     echo "新用户id:{$request->fd}加入了\n";! l8 \! M9 l( a
  8.    // echo "server: handshake success with fd{$request->fd}\n";
    * r9 A' c' r  e+ W( f$ Z+ v, l
  9. });$ ~, T. M2 O) f: x$ X

  10. / Z0 ?0 i+ A- Z0 m! @9 s7 N$ _
  11. $server->on('message', function (swoole_websocket_server $server, $frame) {. Y. t' q# j. n- Q
  12. $ }9 H' @) y0 _1 G
  13.     //循环所有数据6 t9 T( R4 f* _! v" M) l
  14.     foreach($server->connections as $fd) {
    0 I6 F4 k& ~3 b8 T
  15.         //返回数据
    7 y% _9 f$ b$ f$ r8 y( ]
  16.         $server->push($fd, $frame->data);9 A* @% O- Z/ L" |) d3 g8 ~
  17.     }. }; K1 Q, b- D* o: t5 U, x7 c

  18. 6 K% b; Z6 N  `' J1 o. a
  19. });5 f& p# `7 j9 [: P- I
  20. - E) A6 _, ^3 c: M5 W" K
  21. $server->on('close', function ($ser, $fd) {
    ; a, v) A0 x5 R* V  P
  22.     echo "用户id: {$fd} 退出\n";1 Z5 {8 }0 m/ a
  23. });+ K; Z+ {2 q! U
  24. % e1 b9 _7 b8 S' M+ ?
  25. $server->start();
复制代码

* n! L* k: M! v" a; u. j
7 C) s- u* q" X* {, |
# T. r4 u5 B; n& ?) @1 g2 [/ I, H+ }% U2 m% v+ [

4 f. C  n# o9 I: T* Z) q1 R( c
, s. L5 H- D( r% X7 i7 P1 z  {6 D. y  d& e% r% ]
9 J# q9 B; B' A% u  ?  ?

$ o' }! i0 t, j" W/ E9 e, ], Q0 t
, N# y6 R; v8 T( K# C$ N( o9 U+ W4 |$ E9 \8 O9 R$ |" z* g' [* a' N

8 m$ g% q8 l% z( Z5 O
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

GMT+8, 2024-12-31 05:47 , Processed in 0.119246 second(s), 22 queries .

Copyright © 2001-2024 Powered by cncml! X3.2. Theme By cncml!