我正在尝试开发一个小应用程序,其中我首先通过以下方式捕获屏幕aperture
包,然后尝试使用在屏幕上显示它video
tag.
我通过以下方式捕获屏幕:
import apertureConstructor from 'aperture';
const aperture = apertureConstructor();
const options = {
fps: 30
};
(async () => {
await aperture.startRecording(options);
setTimeout(async () => {
this.captureUrl = await aperture.stopRecording();
}, 3000)
})();
请忽略混乱。Aperture
包将捕获的视频写入磁盘,最终,我有这个文件的路径captureUrl
。它是这样的:
/var/folders/29/08gshk3n4mlbbcjnm1m5xyy40000gp/T/tmp-79999m0uOszQK0zaC.mp4
如果我输入以下内容,我可以验证该文件是否存在并且播放正常:file:///var/folders/29/08gshk3n4mlbbcjnm1m5xyy40000gp/T/tmp-79999m0uOszQK0zaC.mp4
到 Google Chrome 地址栏。
所以我尝试使用这个地址作为我的来源video
像这样的标签:
<video control autoplay>
<source src="/var/folders/29/08gshk3n4mlbbcjnm1m5xyy40000gp/T/tmp-8004145a2o4gugbVV.mp4" type="video/mp4">
</video>
它抱怨文件不存在(404):
GET http://localhost:9080/var/folders/29/08gshk3n4mlbbcjnm1m5xyy40000gp/T/tmp-8004145a2o4gugbVV.mp4 404 (Not Found)
是的,它确实试图去localhost:9080
因为在本例中它是我的开发服务器主机并且没有这样的文件。
所以我决定添加file://
...
<video controls autoplay>
<source src="file:///var/folders/29/08gshk3n4mlbbcjnm1m5xyy40000gp/T/tmp-8004145a2o4gugbVV.mp4" type="video/mp4">
</video>
这次它说:
Not allowed to load local resource: file:///var/folders/29/08gshk3n4mlbbcjnm1m5xyy40000gp/T/tmp-80041e3SlBZUNphLM.mp4
:/
我想知道我是否错过了一些使“file://”安全的东西或其他东西。
我还考虑过通过“fs”读取整个文件并对其进行 base64 处理,提供视频作为data:
但由于这个视频文件可能很大,我觉得我不应该这样做。
由于我是新手electron
我希望我错过了一些基本的东西。任何帮助表示赞赏。谢谢!