首页 > 解决方案 > 该脚本在我的计算机上工作,但当我将其上传到服务器时不起作用

问题描述

我正在使用来自 GitHub 的示例代码在网页上录制视频 ( https://github.com/collab-project/videojs-record )。该网页完全可以在我的计算机上运行。但是当我使用 FTP 将文件上传到服务器时,网页会显示播放器,但当我单击播放器时不会记录。

我已尝试更改 FTP 上的权限以允许读取、写入和执行,但仍然无法正常工作。当我从浏览器中的“查看页面源代码”代码中单击 javascript 和 CSS 文件时,它们会打开。

    <!doctype html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>Audio/Video Example - Record Plugin for Video.js</title>

      <link href="video-js.min.css" rel="stylesheet">
      <link href="videojs.record.min.css" rel="stylesheet">
      <link href="examples.css" rel="stylesheet">

      <script src="video.min.js"></script>
      <script src="RecordRTC.js"></script>
      <script src="adapter.js"></script>

      <script src="videojs.record.min.js"></script>

      <script src="browser-workarounds.js"></script>

      <style>
      /* change player background color */
      #myVideo {
          background-color: #9ab87a;
      }
      </style>
    </head>
    <body>

    <video id="myVideo" playsinline class="video-js vjs-default-skin">
      <p class="vjs-no-js">
        To view this video please enable JavaScript, or consider upgrading to     
        a
        web browser that
        <a href="https://videojs.com/html5-video-support/" target="_blank">
      supports HTML5 video.
        </a>
      </p>
    </video>

    <script>
    var options = {
        controls: true,
        width: 320,
        height: 240,
        plugins: {
            record: {
                audio: true,
                video: true,
                maxLength: 10,
                debug: true
            }
        }
    };

    // apply some workarounds for certain browsers
    applyVideoWorkaround();

    var player = videojs('myVideo', options, function() {
        // print version information at startup
        var msg = 'Using video.js ' + videojs.VERSION +
            ' with videojs-record ' + videojs.getPluginVersion('record') +
            ' and recordrtc ' + RecordRTC.version;
        videojs.log(msg);
    });

    // error handling
    player.on('deviceError', function() {
        console.log('device error:', player.deviceErrorCode);
    });

    player.on('error', function(element, error) {
        console.error(error);
    });

    // user clicked the record button and started recording
    player.on('startRecord', function() {
        console.log('started recording!');
    });

    // user completed recording and stream is available
    player.on('finishRecord', function() {
        // the blob object contains the recorded data that
        // can be downloaded by the user, stored on server etc.
        console.log('finished recording: ', player.recordedData);
    });
    </script>

    </body>
    </html>

单击播放器后,我希望能够从网络摄像头进行录制。但它只显示播放器,当我点击播放器时不记录。没有错误信息。

标签: javascriptphp

解决方案


这是我的猜测:在本地计算机上,您的来源是http://localhost。这是一个安全的上下文,因为它是本地的。当你将它上传到你的服务器时,它突然变成了http://yourdomain.com。这不是一个安全的上下文,因为它不是通过 https 加载的。尝试使用certbot获取 SSL 证书并启用它以获取安全上下文。您**需要*一个安全的上下文才能访问用户的相机


推荐阅读