Ricoh Theta S - 在javascript中实时预览

Question

我正在尝试使用HTTP请求创建一个与Ricoh Theta S相机对话的应用程序......它们符合Open Spherical Camera API Version 1.0 ... 这是他们的api参考

所以我试图实现他们说相机支持的实时预览 ......我在javascript中这样做,所以我尝试了每个可能的组合来获取他们说api调用返回的二进制数据...尝试了vanilla js,jquery,angular ......没有......这是请求的打印屏幕......虽然状态代码是200,但调试器显示为红色

响应是空的...所以我的问题是......有没有办法可以通过HTTP在javascript中使用发送对象的POST请求实现Motion JPEG(10 fps)？

谢谢,雷尔斯

Answer 1

您可以在这里尝试一些事情。许多服务器端技术（包括 .NET 和 Java）对于有效 JSON 的要求比 Javascript 严格得多。许多技术都改编自早期的技术，例如依赖于经过验证的 XML 的 SOAP，并将 JSON 视为一组类似的严格规则。

此外，您连接的 API 可能是由专业嵌入式相机固件工程师编写的，他们以前从未编写过网络代码。他们习惯了 C++ 和 Java，这比 JS 宽容得多。

首先，他们的 API 指定他们期望 HTTP 标头为：

Content-Type: application/json;charset=utf-8
Accept: application/json

但是，在您发送的屏幕截图中：

Content-Type: text/plain;charset=utf-8

这告诉服务器您发送的内容是文本，而不是 JSON。尽管他们只期望 JSON，但这会导致许多开箱即用的服务器端 JSON 实现失败。

接下来要尝试的是，许多实际上不是 Javascript 的 JSON 解析器向它们认为有效的 JSON添加了一些非常具体的规则。

您正在发送：

{name:camera._getLivePreview, parameters:{sessionId:SID_0001}}

这是有效的 JS，但按照严格的类似 XML 的规则，实际上并不是有效的 JSON，因为它们希望所有内容都被引用（唯一不引用的值类型是布尔值和数字）。

所以尝试：

{
    "name": "camera._getLivePreview", 
    "parameters": {
        "sessionId": "SID_0001"
    }
}

如果您查看他们的入门指南，他们会以这种方式格式化每个请求 - 引用属性并引用值。

确保获得更严格 JSON 的一种方法是构建请求 JS 对象，然后用于JSON.stringify设置请求正文，如下所示：

const content = {name:'camera._getLivePreview', parameters:{sessionId:'SID_0001'}};

const response = await fetch('.../osc/commands/execute', {
    method: 'POST', 
    body: JSON.stringify(content),
    headers:{ 'Content-Type': 'application/json' }
});

最后你得到的是一个视频流 - 对此的支持fetch是相当前沿的，并且基本上缺少XMLHttpRequest. 服务器将继续向您发送内容，并且您继续将其传送到可以渲染它的东西，如果您停止，您会看到该target_closed错误。

您需要不断迭代流：

// Get the fetch response as a stream 
const reader = await response.body.getReader();

// Async loop the stream
let chunk = await reader.read();
while (chunk && !chunk.done) {
    for (let index = 0; index < chunk.value.length; index++) {
         // parse the response in chunks       
    }
    chunk = await reader.read();
}

已经有很多 JS MJPEG 实现，这里有一个相当简单的实现