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

QQ登录

只需一步,快速开始

 找回密码
 立即注册

QQ登录

只需一步,快速开始

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

[swoole] swoole 直播

[复制链接]
跳转到指定楼层
楼主
发表于 2020-3-31 19:41:34 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
主要使用 webstocket
; g% y7 G% V6 ?3 I* q7 n, \( ~上代码
前端
观看页面
  1. <script type="text/javascript">2 O# ^* @, r$ H) H) R
  2. var ws = new WebSocket('ws://192.168.0.150:9502');
    : r: p2 Y' ^( j0 {$ w* m
  3. 9 A2 Z, ~2 Z  }8 }4 @% J
  4. ws.onopen = function() {
    0 v+ {) y- a+ {* C! S$ t1 W
  5.     console.log("连接成功");! j6 I; c/ z( {/ s
  6. };
    - K* k+ s$ Y/ q6 q) }+ o- k8 b7 Q2 a
  7. ws.onmessage = function(e) {1 s0 e0 w# A/ I4 p! T
  8.    console.log(e);
    0 l+ k9 c1 j! Z8 p
  9. & k0 N5 c$ @- E& v; L
  10.    var data = e.data;
    & H5 d6 l2 p/ k$ t$ Y: ]2 }
  11.    document.getElementById('player').src=data;
    2 ]6 s# q" i9 ~( u+ r+ }& U/ t& [7 E
  12. };
    . [3 Z. s. Z0 ~: D8 k! ~3 b- P+ ?
  13. ws.onerror = function() {
    & ]! g' c3 u8 p  x8 M: _) E
  14.     console.log("关闭连接");
    $ B5 }4 D% l! x. o+ j- ^+ o/ X) d
  15. };; y; B7 z6 D9 Y' o' N$ A
  16. </script>
复制代码
录像页面
% _& j8 [4 i6 ?# e, i
最好用火狐测试。
  1. <canvas id="output" style="display:none"></canvas>, x% F* f: p2 D" v- z# Y2 N+ X2 D# u

  2. $ o2 ?3 }9 g) _0 r5 }- H
  3. 2 J) ~. T9 J" k# t4 Y7 {9 C' @4 R

  4. ( z' }+ j, |9 Y; b. i9 e9 Y7 t9 }
  5. <script type="text/javascript" charset="utf-8">7 A( @' m* n% R

  6. * U% n! \1 J& Y

  7. 9 @  D' `5 Q& X3 B
  8.     var socket = new WebSocket('ws://192.168.0.150:9502');5 u) v: H* h2 N4 _! H0 e. O4 U
  9.     //socket.send("嗨我登陆了");
    6 F% z3 W# `3 |& b$ I( p! r& |
  10. # m/ H- L( m0 z  D8 l: j
  11.     var back = document.getElementById('output');1 Q% Z8 G4 v1 H
  12.     var backcontext = back.getContext('2d');
    2 s+ H6 Y7 y. F. t/ p+ }5 t
  13.     var video = document.getElementsByTagName('video')[0];
    & R% A) V1 q1 G; ]* [' Q+ T8 r
  14.     * l. k; Z& N# _( g3 f! N
  15.     var success = function(stream){
      [+ `" \  M- E3 j  W
  16.         video.src = window.URL.createObjectURL(stream);( k- a1 P9 t3 _9 s
  17.     }
    3 Z) D  ?3 H  {2 `5 O* J" s
  18. 6 X) P  \2 q$ M0 R) _" W; e; u- c
  19.     socket.onopen = function(){. c9 r( n5 w; K  g( Y& l3 j
  20.         draw();
    , t, g( Y2 m* a& W+ F: E
  21.     }( K$ E& a* |: K% m5 j

  22. ! j' ]: T  A3 ^; ]. y% B: S. e' `
  23.     var draw = function(){; A+ g3 h5 L/ p" ?- g# O0 @6 K  ~' ~
  24.         try{
    4 e; ]2 a. U  H3 j3 f. X
  25.             backcontext.drawImage(video,0,0, back.width, back.height);
    - R7 l; Z* Z4 |
  26.         }catch(e){
    ; J' ]8 T, V! q$ a2 w" I
  27.             if (e.name == "NS_ERROR_NOT_AVAILABLE") {
    & f$ V9 F) y$ A/ p* n4 t& {
  28.                 return setTimeout(draw, 100);7 J  v& a0 A, l0 D6 N1 @
  29.             } else {
    6 e: N! Z1 x4 |! Y; F$ |8 Z
  30.                 throw e;
    ! i" F; \: S0 Q- O0 {
  31.             }
    4 ^2 a  l3 m/ D. W; d
  32.         }$ }7 Q% c. F6 k
  33.         if(video.src){
    8 I0 V- f& ^3 H
  34.             socket.send(back.toDataURL("image/jpeg", 0.5));6 y8 [, m0 Z' g8 z
  35.         }& ?* K4 _: D( V$ j
  36.         setTimeout(draw, 100);
    ' F# X( C, u' }, d) Z1 [, O+ S; o/ I
  37.     }! q$ t% B% h$ U. H0 J
  38.     navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||! y1 p& S  D. V  F6 q/ M( X
  39.     navigator.mozGetUserMedia || navigator.msGetUserMedia;: F+ R& y, `! v
  40.     navigator.getUserMedia({video:true, audio:false}, success, console.log);
    ) o' R& c4 j8 G2 ^
  41. </script>
复制代码
  1. php1 L  x  D( A( R# c/ @
  2. 1 N# d' q5 ^4 I
  3. $server = new swoole_websocket_server("0.0.0.0", 9502);) ?6 Y: h" g, `. ^
  4. ' u" L& l5 @+ H4 u& S
  5. $server->on('open', function (swoole_websocket_server $server, $request) {6 X3 n' a1 A7 q8 C: S' R* @! a
  6. 6 p( L/ M# h9 ~% P
  7.     echo "新用户id:{$request->fd}加入了\n";
    ! t2 G2 P3 A8 {9 h
  8.    // echo "server: handshake success with fd{$request->fd}\n";
    & k8 S8 k7 h. G+ }9 s
  9. });8 O1 w: a8 V9 t, N
  10. $ I, ?6 F3 R! f+ }0 j4 Z2 x) A
  11. $server->on('message', function (swoole_websocket_server $server, $frame) {
    ( N% Z& @: }# q- d/ t6 o

  12. ! W1 R- Q3 L! ?
  13.     //循环所有数据
    " x9 p3 ?0 L7 Q6 y
  14.     foreach($server->connections as $fd) {. y, o0 c' s% g0 ?  O
  15.         //返回数据
    ' z1 l0 i, h+ G# @
  16.         $server->push($fd, $frame->data);. ~: ?5 ?" @/ J  d) _# s% @
  17.     }* T( g& O# @% |
  18. 8 X; E5 U) o% P1 `2 Q. I
  19. });# ?0 X) X# O1 p3 M

  20. * R, k: C5 a; T+ ~! V
  21. $server->on('close', function ($ser, $fd) {& M( Z6 Q7 f+ t, b" A- l1 Y8 J
  22.     echo "用户id: {$fd} 退出\n";4 N) T8 }6 x1 a. g) \
  23. });
    # x2 @+ _9 {- z6 l; |0 Q6 l& u
  24. 4 P  `' B& B, |  J. x
  25. $server->start();
复制代码

2 ]" y: Y# D2 h1 U' J/ T$ w4 N! [. f" s+ [3 _

; u! {5 k4 u+ p9 q' n: e( A) t+ a  G" [( ^0 t1 h+ n9 ]
: X& N' D/ c, o5 H

+ ^0 \. [1 ~/ \. b
8 P! ^- o1 f7 {. ^4 @& |( d- ~. Z: |- }# n: q; ~4 h( u( w

% U" p2 m0 {# g$ `  ]# `5 X
* M4 Y0 |! m; |# [# e" u  F$ U+ Q) n; u# G

6 B% j  S! d# C5 N% `6 p. B/ n
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

GMT+8, 2026-6-19 23:58 , Processed in 0.058848 second(s), 20 queries .

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