Question

我正在尝试为测试网站创建简单的视频和音频流。我的目标是用PHP做到这一点。

如果改变任何东西，可能只会有1个流光。

我目前已经设置了几页。索引是流光打开其凸轮的位置。它还会将视频源发布到一个小脚本中，该脚本会将视频源保存到文件中。

第三页是人们观看流的地方。它从文件中获取源URL并将其加载到画布中。

在我尝试将视频加载到画布之前，一切正常。在流媒体的页面上，我也这样做，但只有当我从文件中抓取它时才会这样做。

当前代码：

index.php （流媒体页面）

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Voice Chat</title>
    </head>
    <body>
        <canvas id="c" height="100" width="100"></canvas>
        <video id="v" autoplay muted="muted" style="display:none"></video>

        <script src="../jquery.min.js"></script>
        <script>
            var name = prompt('Hi, what is your name?');
            var video = document.getElementById('v');
            navigator.getUserMedia =    navigator.getUserMedia ||
                                        navigator.webkitGetUserMedia ||
                                        navigator.mozGetUserMedia ||
                                        navigator.msGetUserMedia;
            if (navigator.getUserMedia) {
                navigator.getUserMedia({audio: true, video: true}, function(stream) {
                    video.src = window.URL.createObjectURL(stream);
                }, function(e) {
                    console.log('Nope!', e);
                });
            }

            document.addEventListener('DOMContentLoaded', function() {
                var canvas = document.getElementById('c');
                var context = canvas.getContext('2d');

                var cw = canvas.width;
                var ch = canvas.height;

                v.addEventListener('play', function() {
                    draw(this,context,cw,ch);
                }, false);
            }, false);

            function draw(v,c,w,h) {
                c.drawImage(v,0,0,w,h);
                $.post('stream.php', {src:v.src,user:name});
                setTimeout(draw,20,v,c,w,h);
            }
        </script>
    </body>
</html>

stream.php （将源代码保存到文件中）

<?php
    if (isset($_POST['src'])) {
        $src = $_POST['src'];
        $user = $_POST['user'];
        $fp = fopen('streams\\' . $user . '.txt','w');
        fwrite($fp, $src);
        fclose($fp);
    }
?>

watch.php

<?php
    if (!isset($_GET['u'])) {
        $files = scandir('streams\\');
        foreach($files as $file) {
            $user = substr($file, 0, strlen($file) - 4);
            echo '<a href="#" id="' . $user . '">' . $user . '</a><br />';
        }
        ?>
        <script>
            var els = document.querySelectorAll('a');
            NodeList.prototype.forEach = Array.prototype.forEach;
            els.forEach(function(v) {
                v.onclick = function() {
                    location.href = 'http://localhost' + location.pathname + '?u=' + v.id;
                }
            });
        </script>
        <?php
    } else {
        ?>
        <!doctype html>
        <html lang="en">
            <head>
                <meta charset="UTF-8">
                <title>Watch Stream</title>
            </head>
            <body>
                <canvas id="c"></canvas>
                <script src="../jquery.min.js"></script>
                <script>
                    var user = '<?=$_GET['u'];?>';
                    var canvas = document.getElementById('c');
                    var context = canvas.getContext('2d');

                    var cw = canvas.width;
                    var ch = canvas.height;

                    var video = document.createElement('video');
                    video.autoplay = 'autoplay';

                    function load() {
                        $.ajax({
                            url : 'streams\\' + user + '.txt',
                            cache : false,
                            success : function(src) {
                                video.src = src;
                                draw(video, context, cw, ch);
                            }
                        });
                    }

                    function draw(v,c,w,h) {
                        c.drawImage(v,0,0,w,h);
                        setTimeout(load,20);
                    }
                </script>
            </body>
        </html>
        <?php
    }
?>

是否有人能够告诉我我做错了什么？

直播视频流PHP

0 个答案: