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

QQ登录

只需一步,快速开始

 找回密码
 立即注册

QQ登录

只需一步,快速开始

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

[swoole] swoole 直播

[复制链接]
跳转到指定楼层
楼主
发表于 2020-3-31 19:41:34 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
主要使用 webstocket
' \$ c0 d: U0 z, o# J- w上代码
前端
观看页面
  1. <script type="text/javascript">
    - ^3 s. K. G6 v* |; f; H+ ?
  2. var ws = new WebSocket('ws://192.168.0.150:9502');
    & x# j6 J- O; y3 R
  3. 2 d3 O$ Y/ ~- T) x& O2 Y
  4. ws.onopen = function() {& t( c% |/ X' V1 L/ ~& b9 g
  5.     console.log("连接成功");
    9 m0 }" Y6 F) ^2 j1 u
  6. };: e" o6 M% O. D8 j1 }; k4 B
  7. ws.onmessage = function(e) {
    + l, ~( O* E* m* q6 V
  8.    console.log(e);
    5 }* c( o& R2 `( r( D2 [
  9. + i7 B7 A7 A2 H
  10.    var data = e.data;' _$ z# \+ |5 @2 [# f
  11.    document.getElementById('player').src=data;
    ( Q& A! w- i/ W( V5 H# h
  12. };
    ) h. C! u6 ^" y# v2 k# h
  13. ws.onerror = function() {
    2 ?# t: Z2 k& f+ i# g( O0 A
  14.     console.log("关闭连接");
    9 F! ?  \. W  F. O
  15. };
    6 r+ n& ?' y" Q3 [) C6 U1 _( B+ c9 [
  16. </script>
复制代码
录像页面
  u2 D' ^+ T6 ]+ ]
最好用火狐测试。
  1. <canvas id="output" style="display:none"></canvas># g/ `+ X1 I' f" ?) v: ^6 w
  2. ' y; i) a: m/ m& V! a  F4 B6 t
  3. 9 n1 s) C, Y& Z8 J9 S0 K& B* m

  4.   p$ ]  L# D$ `8 s
  5. <script type="text/javascript" charset="utf-8">
    + X5 P' u) {7 t

  6. 7 H& D" q  o& e: W5 i

  7.   }0 ]& x3 m5 X8 y5 M# `: w
  8.     var socket = new WebSocket('ws://192.168.0.150:9502');, w2 X) U% n2 ]
  9.     //socket.send("嗨我登陆了");
    ; k; @2 {; U, |& l$ R( D

  10. " R& g! i4 L* Q
  11.     var back = document.getElementById('output');8 [" @  d/ s7 }! K" O7 C* j
  12.     var backcontext = back.getContext('2d');
    $ Z! D& l8 m- H
  13.     var video = document.getElementsByTagName('video')[0];
    2 x' U) H/ A7 N8 u% v' G
  14.    
    ! Z0 S8 x4 E' u6 i
  15.     var success = function(stream){
    % {; L! k: o* S" j
  16.         video.src = window.URL.createObjectURL(stream);3 Z) S" u6 S' S$ p: V
  17.     }8 o" X8 j2 ^3 S* p1 L
  18. 1 \- I$ l- d: e+ B1 @
  19.     socket.onopen = function(){4 w. m& d2 E4 Y- U, ^- z+ U
  20.         draw();9 M9 \: ?- i- q6 O
  21.     }+ U9 s" E' b" u8 d4 W9 R

  22. : D7 P0 k$ d4 Q( d/ j! h$ T
  23.     var draw = function(){
    3 S, m" N# k% h( e. b7 M& }1 k% R
  24.         try{
    # x4 f$ |* w" Y6 t( r# q4 x
  25.             backcontext.drawImage(video,0,0, back.width, back.height);
    / m  o; a0 d9 P% e% y' |0 B
  26.         }catch(e){
    6 ]+ y" v7 h; h! }$ I2 T% [
  27.             if (e.name == "NS_ERROR_NOT_AVAILABLE") {& [1 {$ @& q6 |& e8 t  p) ?
  28.                 return setTimeout(draw, 100);' i( g6 P0 A8 G  H- P* s
  29.             } else {
    0 D8 E; B9 ^- x- k7 G
  30.                 throw e;
    9 @+ v* k9 Q$ S" M
  31.             }
    8 w7 h# i* Y% G+ _7 z8 i( Y
  32.         }1 I/ Z* g+ z  R, X) J
  33.         if(video.src){7 w( f9 N* v* p5 d  f0 w( ]/ J
  34.             socket.send(back.toDataURL("image/jpeg", 0.5));9 B# A" m% r# k" o# C& v- L
  35.         }
    0 x, Q8 n; @4 D# _- z! Z# s
  36.         setTimeout(draw, 100);# O+ q! J3 T. {6 c
  37.     }2 c& `- X+ e( F5 w( b2 ]* w( v
  38.     navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||+ I! ^9 c- M" G- i: j7 \
  39.     navigator.mozGetUserMedia || navigator.msGetUserMedia;1 d. l/ g2 N0 o1 g, k
  40.     navigator.getUserMedia({video:true, audio:false}, success, console.log);
    $ Q+ \0 K3 B9 a9 C# ]( f
  41. </script>
复制代码
  1. php0 m  I1 r$ f5 b
  2. , U$ l" R' q# x- x0 A. G3 n
  3. $server = new swoole_websocket_server("0.0.0.0", 9502);
    / w* _2 [& N1 Z

  4. # j: T2 R+ X: ]6 @. _* ?
  5. $server->on('open', function (swoole_websocket_server $server, $request) {
    & b& U$ h: b# @/ u3 L0 H  `; `

  6. ! D) ^  Y: |' B) y3 F' E8 w
  7.     echo "新用户id:{$request->fd}加入了\n";
    5 C" F5 a* @$ @* c) g4 t
  8.    // echo "server: handshake success with fd{$request->fd}\n";- v* d4 l# ~+ A- x
  9. });
    0 e: c/ B0 \  {
  10. 5 S3 C3 a* h- B: i3 t3 G
  11. $server->on('message', function (swoole_websocket_server $server, $frame) {
    6 [# u. X( T; L! n+ j3 l; }: N$ }
  12. + Q1 \6 m9 W- g8 p' r/ u; [2 a
  13.     //循环所有数据9 k" R8 x$ s$ J9 i/ C) _
  14.     foreach($server->connections as $fd) {# ]  A) c: }- `
  15.         //返回数据
    % }' w6 h0 j% V' h
  16.         $server->push($fd, $frame->data);
    " \0 `, e. z5 O1 f( i+ \
  17.     }7 b. u1 m8 H5 \/ I2 L. p
  18. & e5 b6 ?  n  n: U8 `; H  i
  19. });  S" u0 R9 _0 O7 s

  20. 6 Y" Y# U7 a3 a0 C! n2 Q' C
  21. $server->on('close', function ($ser, $fd) {1 D4 B; G5 j2 u( J
  22.     echo "用户id: {$fd} 退出\n";0 W$ x) @' J0 T+ D. S% i
  23. });+ _' X, i5 T: D1 b

  24. . ?: T) Z% o) r" }
  25. $server->start();
复制代码

4 ]" W. s/ d5 d6 L) p0 L& e) F

4 M1 ~+ i9 O" u2 D. }$ G! h6 F. ]: r# l8 ^, M! Q; T1 G

" d. ^. i: [  f2 o! @' q6 {; v0 c" u0 F
' F# Y9 Q3 j) B& A" E9 S
6 [. M0 ?* D9 N' G5 J( P
1 ~2 Z+ W% k. V

) Y4 T- |: U) T/ d# H
/ C5 H& v1 Y) a3 e. P% R6 F- i4 y6 Y( [3 }
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

GMT+8, 2026-3-16 17:17 , Processed in 0.055198 second(s), 19 queries .

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