个人中心
gpt4 book ai didi

php - 使用 Ratchet 通过 websockets 使用 PHP 流式传输视频

转载 作者：行者123 更新时间：2023-12-04 16:13:47 26 4
gpt4 key购买 nike

关闭。这个问题需要更多focused .它目前不接受答案。












想改善这个问题吗？更新问题，使其仅关注一个问题 editing this post .

2年前关闭。




Improve this question




我正在研究 WebRTC 示例以将视频从客户端流式传输到服务器 https://webrtc.github.io/samples/

我在 Ratchet 中有一个文本聊天，工作正常，现在我需要实现一个视频流到网络套接字，有人可以帮忙吗？

index.php 聊天页面:

<body>
     <div id="app" class="container">

    <h3 class="text-center">Chat simples utilizando Websocket, Vue.JS e PHP</h3>    
    <div id="messages">
        <div class="col s12">
            <ul class="list-unstyled" v-cloak>
                <li v-for="message in messages">
                    <span class="date" v-if="message.date">[{{ message.date }}]</span>
                    <span class="name" v-if="message.user">{{ message.user }}:</span>
                    <span class="text" :style="{ color: message.color }">
                        {{ message.text }}
                    </span>
                </li>
            </ul>
        </div>
    </div>

    <div class="row">

        <div class="col-12 col-sm-3">
            <input type="text" class="form-control" placeholder="Usuário" v-model="user">
        </div>

        <div class="col-12 col-sm-9">
            <input type="text" class="form-control" placeholder="Mensagem" v-model="text"
                   @keyup.enter="sendMessage">
        </div>    
    </div>
    </div>

<!-- webrtc need to stream this  -->    
<div id="container">
    <h1><a href="//webrtc.github.io/samples/" title="WebRTC samples homepage">WebRTC samples</a>
        <span>getUserMedia</span></h1>
        <video id="gum-local" autoplay playsinline></video>
    <button id="showVideo">Open camera</button>    
    <div id="errorMsg"></div>    
    <p class="warning"><strong>Warning:</strong> if you're not using headphones, pressing play will cause feedback.</p>    
    <p>Display the video stream from <code>getUserMedia()</code> in a video element.</p>    
    <p>The <code>MediaStream</code> object <code>stream</code> passed to the <code>getUserMedia()</code> callback is in
        global scope, so you can inspect it from the console.</p>    
    <a href="https://github.com/webrtc/samples/tree/gh-pages/src/content/getusermedia/gum"
       title="View source for this page on GitHub" id="viewSource">View source on GitHub</a>
</div>
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
<script src="https://webrtc.github.io/samples/src/content/getusermedia/gum/js/main.js"></script>
  <link rel="stylesheet" href="https://webrtc.github.io/samples/src/css/main.css">
<!-- webrtc -->    
<script type="text/javascript" src="js/lib/vue.min.js"></script>
<script type="text/javascript" src="js/chat.js"></script>
</body>

chat.js Vue JS 聊天 
var app = new Vue({

    el: "#app",
        data: {
        user: 'user',
        text: null,
        messages: [],
        ws: null,
    },


    created: function() {

        this.connect();
    },


    methods: {
      connect: function(onOpen) {
      var self = this;
    self.ws = new WebSocket('ws://localhost:8080');
                self.ws.onopen = function() {
                self.addSuccessNotification('Conectado');
               if (onOpen) {
                    onOpen();
                }
            };

            self.ws.onerror = function() {
                self.addErrorNotification('Não foi possível conectar-se ao servidor');
            };

             self.ws.onmessage = function(e) {
                self.addMessage(JSON.parse(e.data));
            };

        },


        addMessage: function(data) {
            this.messages.push(data);
            this.scrollDown();
        },

           addSuccessNotification: function(text) {
            this.addMessage({color: 'green', text: text});
        },
        addErrorNotification: function(text) {
            this.addMessage({color: 'red', text: text});
        },

        sendMessage: function() {

            var self = this;

            if (!self.text || !self.user) {

                return;
            }


            if (self.ws.readyState !== self.ws.OPEN) {


                self.addErrorNotification('Problemas na conexão. Tentando reconectar...');

                self.connect(function() {
                    self.sendMessage();
                });


                return;
            }

              self.ws.send(JSON.stringify({
                user: self.user,
                text: self.text,
            }));

            self.text = null;

        },


        scrollDown: function() {
            var container = this.$el.querySelector('#messages');
            container.scrollTop = container.scrollHeight;
        },

    }

});

server.php 带有 Ratchet 的 Websocket 服务器: 
<?php

    use Ratchet\Http\HttpServer;
    use Ratchet\Server\IoServer;
    use Ratchet\WebSocket\WsServer;


    require 'vendor/autoload.php';
    require 'class/SimpleChat.php';


    $server = IoServer::factory(
        new HttpServer(
            new WsServer(
                new SimpleChat()
            )
        ),
        8080
    );

    $server->run();

如果有人有一个简单的解决方案，它可以用 php 或任何其他方法制作，而不是真正与我的文本聊天代码并排，但我更喜欢在它上面使用 Ratchet 而不是 node js。在此先感谢各位!

最佳答案

没有(好的)方法可以在 Javascript 中获取原始视频数据以通过 websockets 发送它。它也会否定视频压缩，除非您实现自己的编码器。在服务器端，像 PHP 这样的脚本语言也不适合处理此类数据。

这样做的方法是使用浏览器的 webRTC 功能发送 RTP 视频流。这意味着您建立了一个带有视频流的 RTCPeerConnection。您仍然需要一个用于设置的信令层。 Ratchet 可以填补这个角色。

假设您的视频聊天中的参与者一对多地传输他们的视频，由于客户端带宽限制，点对点连接可能是不可取的。在这种情况下，您将需要一个专门用于分发 RTP 数据的媒体服务器软件。有几种选择，网络搜索产生了这个略显陈旧的摘要:https://webrtc.ventures/2017/11/a-guide-to-webrtc-media-servers-open-source-options/

要回答您的实际问题:您必须将视频数据复制到 Canvas 上并从那里读取。 ( Get raw pixel data from HTML5 video ) 然后你有一个原始位图，你可以通过 websockets 发送，但你会查看每个视频帧的高度 x 宽度 x 颜色深度字节。对于真彩色高清视频，每帧 6 兆字节，30 帧每秒，即 178 兆字节。如果客户端没有 1.5 Gb 管道，则需要对视频进行实时编码，单线程 JavaScript 引擎是不够的。

关于php - 使用 Ratchet 通过 websockets 使用 PHP 流式传输视频，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57443482/

26 4 0
文章推荐： php - 无需 cli 即可运行 Ratchet php 服务器
文章推荐： Docker - 如何从私有(private)注册表中删除图像
文章推荐： python-3.x - 在 Python + Selenium + Firefox WebDriver 上配置代理
文章推荐： php - 在子域上运行 Ratchet 作为完整的自己的服务以提供自定义 WebSocket
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com