javascript - Azure 媒体服务直接从网络摄像头上传文件

Question

我查看了 Azure 媒体服务的文档，但找不到任何讨论使用网络摄像头从浏览器上传视频的文档或示例。

我已经在浏览器中使用 MediaRecorder api 来录制网络摄像头视频然后上传...但我想知道是否有比“MediaRecorder”更好的替代方案？

由于微软已经提供了一个媒体播放器来播放视频，我想知道微软是否可以以类似的方式有一个js库来在前端进行视频录制并相应上传？

编辑:我的目的不是从浏览器进行直播，而是将文件上传到 AMS 并稍后在 Azure 媒体播放器中播放。

Answer 1

编辑:最初回答这个问题时认为您的意思是现场...但我现在明白您的意思是点播录制文件。我将在下面留下直播部分。

按需:

对于点播场景，您还应该能够使用 Media Recorder API 将 Assets 保存到本地存储中。

有一些很好的例子可以将记录记录到存储中，但是主要的 API 文档在这里，并且有一些关于如何保存输出的指导。输出可以是 WebM 或 MP4，具体取决于浏览器功能。 https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Recording_API

获得本地文件后，将其导入 AMS 的步骤如下:

1. 创建 Assets
2. 从新 Assets 中获取容器名称(我们为您生成一个，或者您可以将容器名称传递到 Assets 创建调用中)
3. 使用 Azure Blob 存储 SDK 获取可写 SAS 定位器，以将文件上传到容器中。

有用的示例代码:

Example of creating an Asset with a specific Blob container name

Previous Stack thread on uploading from browser to blob storage container

Azure Storage Javascript client samples

// If one file has been selected in the HTML file input element
var file = document.getElementById('fileinput').files[0];

var customBlockSize = file.size > 1024 * 1024 * 32 ? 1024 * 1024 * 4 : 1024 * 512;
blobService.singleBlobPutThresholdInBytes = customBlockSize;

var finishedOrError = false;
var speedSummary = blobService.createBlockBlobFromBrowserFile('mycontainer', file.name, file, {blockSize : customBlockSize}, function(error, result, response) {
    finishedOrError = true;
    if (error) {
        // Upload blob failed
    } else {
        // Upload successfully
    }
});
refreshProgress();

我的免责声明...

我自己根本没有尝试过上述场景。只是找到合适的资源供您检查。希望有帮助!但是，下面的场景是我现场完成的，它确实有效..

现场场景:

这很棘手，因为媒体服务仅支持 RTMP 摄取。

Media Recorder API 只是在浏览器中记录 webM 或 MP4 内容的“片段”。然后，您必须将这些媒体 block 推送到能够将该内容作为 RTMP/S 发送到 AMS 的某个位置。否则不许走。

这里有一个来自 Mux 的很好的示例项目，名为 Wocket，它演示了如何构建一个解决方案，从 MediaRecorder API 获取内容并将其发送到任何 RTMP 服务器，但它必须通过 WebSocket 连接来运行 FFMPEG 的中间层 Docker 容器。 FFMPEG 进程从媒体记录器接收 webM 或 MP4 block 并将其转发到媒体服务。

https://github.com/MuxLabs/wocket

我最近在 Azure 中构建了一个使用它的演示，它令人惊讶地工作......但不是真正的生产就绪解决方案 - 例如在 iOS 上有很多问题。另外，我必须将 Canvas 绘图移出 requestAnimationFrame 计时器，并使用工作计时器(node.js npm 打包程序)将 Canvas 绘图移至 Web Worker。这样我至少可以从不同的浏览器选项卡切换焦点或隐藏浏览器，而不会停止网络摄像头。通常，浏览器中的 setInterval 或 setTimeout 之类的计时器会在现代浏览器中休眠或受到限制，以节省电量和 CPU。

在查看 Wocket 项目后，如果您想了解更多详细信息，请告诉我。