小编Ree*_*ard的帖子

使用预签名 URL 从 PUT 到 S3 的 400 错误请求

我正在尝试将视频文件从 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)

javascript browser xmlhttprequest amazon-s3 aws-sdk

8
推荐指数
1
解决办法
1万
查看次数

组合和定位两个媒体流

我正在尝试制作类似于
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)

这仅显示网络摄像头。我希望能够将网络摄像头定位在屏幕录制的顶部。

html javascript webrtc web-mediarecorder mediastream

5
推荐指数
1
解决办法
872
查看次数