cncml手绘网

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

---

作者: admin    时间: 2020-3-31 19:41
标题: swoole 直播

主要使用 webstocket
& \+ g2 ]* ]. H" Z& C) O1 c5 R上代码

前端

观看页面

1. <script type="text/javascript">
   % {- a" s7 y2 I4 O+ [
2. var ws = new WebSocket('ws://192.168.0.150:9502');
   5 v3 t2 x/ H. J/ {! N- d" C! V
3. 
   
4. ws.onopen = function() {
   # p5 `9 Z$ j7 r2 a3 c- A
5.     console.log("连接成功");
   
6. };
     }4 L1 ]$ [/ j  r
7. ws.onmessage = function(e) {
   2 j; x4 h& ?4 J3 G6 }- x' G. F
8.    console.log(e);
   & H2 y6 ^1 D7 V8 C. \. B! x
9. 
   6 Z3 D5 [; S% o9 h( ~4 B8 I% ~
10.    var data = e.data;
    
11.    document.getElementById('player').src=data;
    
12. };
    
13. ws.onerror = function() {
    : y9 I; ?- Q2 T
14.     console.log("关闭连接");
    
15. };
    + W' A0 E7 c5 n0 f6 D5 I( c: A
16. </script>

复制代码

录像页面

. l$ z8 z% ~8 J$ t

最好用火狐测试。

1. <canvas id="output" style="display:none"></canvas>
   * C& ^0 x  c5 L
2. 
   
3. 
   : p$ A- f% _, d9 _' p* x( P
4. 
   
5. <script type="text/javascript" charset="utf-8">
   0 U) m, U* b9 ^, b( v! d
6. 
   4 Z' N+ U1 J' z- M% V0 z
7. 
   
8.     var socket = new WebSocket('ws://192.168.0.150:9502');
   
9.     //socket.send("嗨我登陆了");
   / p& }9 H# W2 b6 c$ H6 U% ^
10. 
    + g( [& M- w$ f% c$ B
11.     var back = document.getElementById('output');
    
12.     var backcontext = back.getContext('2d');
    3 V; m# [2 ~1 K( i
13.     var video = document.getElementsByTagName('video')[0];
    3 w1 H, d* Q7 R6 ~' A7 C
14.    
    
15.     var success = function(stream){
      [" N+ Q  _9 Z& J# `* }- T
16.         video.src = window.URL.createObjectURL(stream);
    
17.     }
    " o" A3 r% R: `
18. 
    
19.     socket.onopen = function(){
    
20.         draw();
    3 e5 |9 w" x) ^  g9 v, T
21.     }
    6 Z4 B' }: L) ]* ^$ p; \4 U
22. 
    
23.     var draw = function(){
    
24.         try{
    
25.             backcontext.drawImage(video,0,0, back.width, back.height);
    ) R: K4 h: Q; \
26.         }catch(e){
    % B  C" F. |+ W+ Y
27.             if (e.name == "NS_ERROR_NOT_AVAILABLE") {
    , H  g4 ?2 k6 A0 J% m' ]' J( h
28.                 return setTimeout(draw, 100);
    - a+ w) j0 w4 p0 d% n& a
29.             } else {
    0 N! R, ?! Q8 ?
30.                 throw e;
    
31.             }
    
32.         }
    3 v! A3 O9 p, K
33.         if(video.src){
    % F: P& R  [# T' p1 }1 I. x
34.             socket.send(back.toDataURL("image/jpeg", 0.5));
    
35.         }
    * K1 W- }2 g0 i! z9 d: d, Z: h
36.         setTimeout(draw, 100);
    
37.     }
    
38.     navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
    
39.     navigator.mozGetUserMedia || navigator.msGetUserMedia;
    
40.     navigator.getUserMedia({video:true, audio:false}, success, console.log);
    ) t9 O: ^- ~6 Q0 I1 N/ g4 N5 }
41. </script>

复制代码

1. php
   . y' a4 f* d: G3 D
2. 
   
3. $server = new swoole_websocket_server("0.0.0.0", 9502);
   . c: i0 U1 B- O, e; |! X
4. 
   ( f+ k: @2 ^! U: Q( S6 s
5. $server->on('open', function (swoole_websocket_server $server, $request) {
   & |& E1 r  N5 q  x( q* W" r  f/ W3 F" P
6. 
   
7.     echo "新用户id:{$request->fd}加入了\n";
   
8.    // echo "server: handshake success with fd{$request->fd}\n";
   
9. });
   
10. 
    & u* s9 v+ H$ q$ |
11. $server->on('message', function (swoole_websocket_server $server, $frame) {
    
12. 
    5 i* o" O5 B9 r. i$ `9 B) L
13.     //循环所有数据
    
14.     foreach($server->connections as $fd) {
      M: W  f6 W$ |$ {+ b  w
15.         //返回数据
    
16.         $server->push($fd, $frame->data);
    
17.     }
    
18. 
      }" k* _4 m, }  m
19. });
    
20. 
    4 H4 P) q! K' w$ {; ~9 N, Q
21. $server->on('close', function ($ser, $fd) {
    ; L1 j# A) C4 v( Z9 a$ {
22.     echo "用户id: {$fd} 退出\n";
    , r2 {& J1 S2 {/ h5 a% a
23. });
    : E* H: e3 t2 M( B! y
24. 
    
25. $server->start();

复制代码

' B& R7 m, }( Q' t




7 X: x+ f1 W( X- y

7 G: E8 G/ w3 s( \- d( O

---

欢迎光临 cncml手绘网 (http://cncml.com/)

Powered by Discuz! X3.2