0

我想只使用 javascript、HTML5、css 构建一个网络视频聊天应用程序。目前我尝试在浏览器中运行但速度有点慢的应用程序。

我的基本逻辑是使用java脚本将文件写入外部文件从那里数据初始化为图像，使图像流看起来像视频

写入php文件代码

<script>
    var onFailSoHard = function (e) {
        console.log('Reeeejected!', e);
    };

    window.URL = window.URL || window.webkitURL;
    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
        navigator.mozGetUserMedia || navigator.msGetUserMedia;

    var video = document.querySelector('video');

    if (navigator.getUserMedia) {
        navigator.getUserMedia({
                audio: true,
                video: true
            }, function (stream) {
                video.src = window.URL.createObjectURL(stream);
            }, onFailSoHard);
    } else {
        video.src = 'somevideo.webm'; // fallback.
    }

    var canvas = document.querySelector('canvas');
    var ctx = canvas.getContext('2d');

    setInterval(function () {
            ctx.drawImage(video, 0, 0, video.width, video.height, 0, 0, canvas.width, canvas.height);
            var imgData = canvas.toDataURL();
            $.post('upload.php', {
                    data: (encodeURIComponent(imgData))
                });
        }, 0.01);
</script>

php代码写入外部文件

<?php
$data=rawurldecode ($_POST['data']);
file_put_contents('data.txt',$data);
?>

从外部文件读取

<?php
header('Content-type:image/png');
readfile('data.txt');
?>

显示图像图像，使其看起来像视频

<script>
    setInterval(function () {
            $.get('streamData.php', function (data) {
                    $('#live').attr('src', data);
                });
        }, 1000 / 80);
</script>

此代码正在运行，但问题是此代码“太慢了”，这在移动设备中变得越来越慢，请帮助我正常工作？

或者建议任何其他方式来构建更纤薄的基于浏览器的应用程序，该应用程序应该适用于所有设备（不使用 WEBRTC 的设备）。

4

2 回答 2

0

而不是 post/get 使用Websockets。使用 PHP 是可能的（例如安装http://socketo.me/），但绝对不是我想要的方式（我只是使用 Node.js）。

于 2013-05-27T10:22:12.303 回答
0

您应该使用 websockets，因为 GET/POST 对服务器来说很重且速度较慢，就像 Miszy 所说的您可以将 Node.js 与 socket.io 一起使用。您还可以使用 Python 或 Go 创建服务器。

于 2013-05-27T10:31:56.687 回答