我正在尝试将视频文件从 JS 上传到 S3 存储桶,但现在收到 400 错误请求。我确信我已经正确设置了一切,但我可以做一些事情。
我在服务器上生成一个 URL,如下所示:
const client = new S3({
accessKeyId: 'id-ommited',
secretAccessKey: 'key-ommited',
region: 'eu-west-2',
useAccelerateEndpoint: true
});
const url = client.getSignedUrl('putObject', {
Bucket: 'screen-capture-uploads',
Key: 'video.webm',
Expires: 60 * 60,
ContentType: 'application/octet-stream'
});
Run Code Online (Sandbox Code Playgroud)
这个 URL 在我的前端似乎没问题,我将它传递给 XMLHttpRequest,如下所示
const xhr = new XMLHttpRequest();
xhr.open('PUT', body.url); // body.url being the presigned url
xhr.setRequestHeader('x-amz-acl', 'public-read');
xhr.setRequestHeader('Content-Type', 'application/octet-stream');
xhr.send(blob); // blob being the webm binary
Run Code Online (Sandbox Code Playgroud)
我正在使用 CORS 设置,只允许从任何地方进行 PUT
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>PUT</AllowedMethod>
<AllowedHeader>*</AllowedHeader> …
Run Code Online (Sandbox Code Playgroud) 我正在尝试制作类似于
https://recordscreen.io/ 的东西,
它将用户相机定位在屏幕录制上
我现在分别拥有两个流。
我试过将一个放在另一个上,但我希望它在单个视频元素中进行记录
我试图创建一个组合媒体流,其中包含来自其他两个流的轨道,但我根本无法定位它们
/**
* Edge has a slightly incorrect implementation of getDisplayMedia
* Typescript currently uses this so typing is incorrect
*/
const screenMediaStream = await (navigator.getDisplayMedia ?
navigator.getDisplayMedia(constraints) :
(navigator.mediaDevices as any).getDisplayMedia(constraints)
) as MediaStream;
const cameraMediaStream = await navigator.mediaDevices.getUserMedia({
audio: true,
video: { width: 150, height: 150 }
});
const combinedMediaStream = new MediaStream([...cameraMediaStream.getTracks(), ...screenMediaStream.getTracks()]);
screenVideoElement.srcObject = combinedMediaStream;
Run Code Online (Sandbox Code Playgroud)
这仅显示网络摄像头。我希望能够将网络摄像头定位在屏幕录制的顶部。