javascript - 该脚本在我的计算机上工作,但当我将其上传到服务器时不起作用
问题描述
我正在使用来自 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>
单击播放器后,我希望能够从网络摄像头进行录制。但它只显示播放器,当我点击播放器时不记录。没有错误信息。
解决方案
这是我的猜测:在本地计算机上,您的来源是http://localhost。这是一个安全的上下文,因为它是本地的。当你将它上传到你的服务器时,它突然变成了http://yourdomain.com。这不是一个安全的上下文,因为它不是通过 https 加载的。尝试使用certbot获取 SSL 证书并启用它以获取安全上下文。您**需要*一个安全的上下文才能访问用户的相机
推荐阅读
- scala - 如何从 Scala 的配置中传递持续时间变量?
- python - 如何在pygame中调试?
- angular - 解析器获取数据后角度路由器无法导航
- python - 在记忆游戏中销毁按钮 - Python Tkinter
- javascript - 对此作出反应。不是函数
- android - 如何将 Activity(rootview,其他)放到 SurfaceTexture
- mongodb - 在本地设置 mongo 数据库
- javascript - Instanceof 'Class' 使用模拟对象返回 false
- bash - 在执行删除操作之前报告将被删除的文件 - bash
- node.js - 电报 - 出现 AUTH_KEY_UNREGISTERED 和 API_ID_INVALID 错误