Angularjs 来自节点的角度$sce trustAsResourceUrl

Angularjs 来自节点的角度$sce trustAsResourceUrl,angularjs,node.js,videogular,Angularjs,Node.js,Videogular,我正在尝试制作一个流媒体服务,将文件内容(在本例中为视频)流到视频元素中 为此,我已经下载并安装了videogular,现在正在尝试设置它,但是我知道怎么做 根据videogular上的文档,要加载视频,您需要以下语法: sources: [ {src: $sce.trustAsResourceUrl(myMp4Resource), type: "video/mp4"} ] sources: [ {src: $sce.trustAsResourceUrl('http://loc

我正在尝试制作一个流媒体服务,将文件内容(在本例中为视频)流到视频元素中

为此,我已经下载并安装了
videogular
,现在正在尝试设置它,但是我知道怎么做

根据videogular上的文档,要加载视频,您需要以下语法:

sources: [
    {src: $sce.trustAsResourceUrl(myMp4Resource), type: "video/mp4"}
]
sources: [
    {src: $sce.trustAsResourceUrl('http://localhost:8105/loadvideo/1'), type: "video/mp4"}
]
router.route('/path/to/video.mp4')
.all(function(req, res){
    res.header('content-disposition', 'filename="video.mp4"')
    var stream = fs.createReadStream('./resources/video.mp4');
    stream.pipe(res);
    require('on-finished')(res, stream.abort.bind(stream));

    // or simply
    res.download(fs.readSync('/path'))
});
当你想在没有流媒体的情况下加载内容时,这很好

但假设您有一个节点服务器在端口8105上运行,并且您希望收集的文件的id为1,则结果可能如下所示:

sources: [
    {src: $sce.trustAsResourceUrl(myMp4Resource), type: "video/mp4"}
]
sources: [
    {src: $sce.trustAsResourceUrl('http://localhost:8105/loadvideo/1'), type: "video/mp4"}
]
router.route('/path/to/video.mp4')
.all(function(req, res){
    res.header('content-disposition', 'filename="video.mp4"')
    var stream = fs.createReadStream('./resources/video.mp4');
    stream.pipe(res);
    require('on-finished')(res, stream.abort.bind(stream));

    // or simply
    res.download(fs.readSync('/path'))
});
但是,在我尝试这样做时,它只会告诉我资源不是实际的资源

我的问题是,如何将视频内容(最好是使用videogular)流式传输,有人知道人们在哪些方面实现了这一点吗

服务器端代码

好的,所以我最初的想法(我知道这是对上面代码的一个更改)是创建一条路径:

    router.route('/retrieveFile')
    .post(function (request, response) {
        var path = '../' + request.body.data;
        var file = fs.createReadStream(path);
        file.pipe(response);
    });
然后通过管道传输文件的输出


然后使用此选项来流式处理文件

要使文件作为文件可用,您需要在进行管道处理之前设置适当的标题

要加载文件,您需要将此代码放在路由器中,以及使用
post
的位置,如果您没有充分的理由,我只需使用
get
all

如果客户端决定断开中流连接,您可能还希望能够结束传输

或者,您可能希望使用
res.download
而不是streams,在这种情况下,会自动处理相应的头和中断

因此,整个代码可能如下所示:

sources: [
    {src: $sce.trustAsResourceUrl(myMp4Resource), type: "video/mp4"}
]
sources: [
    {src: $sce.trustAsResourceUrl('http://localhost:8105/loadvideo/1'), type: "video/mp4"}
]
router.route('/path/to/video.mp4')
.all(function(req, res){
    res.header('content-disposition', 'filename="video.mp4"')
    var stream = fs.createReadStream('./resources/video.mp4');
    stream.pipe(res);
    require('on-finished')(res, stream.abort.bind(stream));

    // or simply
    res.download(fs.readSync('/path'))
});
然后您可以使用
http://localhost:8000/path/to/video.mp4
要直接将视频加载到浏览器中,如果可以,它将播放视频,或者只提供下载。或者您可以在
视频片段中使用此URL

sources: [ {src: $sce.trustAsResourceUrl('http://localhost:8000/path/to/video.mp4'), type: "video/mp4"} ]

如果你的硬盘上有视频文件,并且你想用它们的文件名为它们提供服务,你应该像其他资源一样使用它们

您可以添加路径前缀“/videos”,以将它们与常规资源区分开来

app.use('/videos', express.static('videos'));

然后一个视频文件
/videos/myvid.mp4

,指向你的浏览器实际下载视频?@laggingreflect作为一个例子,它应该收集视频并流式传输,但我不太确定从哪里开始,或者如果我做得正确,我似乎找不到任何例子,所以我有点扔在黑暗中,你可以创建一个简单的小提琴,这样我们就可以在上面工作,并看到什么不会发生。我添加了一些服务器端代码,请注意,我不太确定它是否能以这种方式工作,所以欢迎提出更好的想法。非常感谢您的回答。您能否告诉我如何从前端加载文件(以我的示例为例,您将如何调用流)?这看起来不错,但如何确保节点服务器被调用?假设节点服务器在端口8105上运行,那么在尝试查找源时不会请求它,因为默认端口是80?我知道我可能很愚蠢,但是触发路由的url路径('/retrieveFile')比如说我的文件路径是“user\u resources/module/5/video.mp4”?@MarcRasmussen是您计算机上实际文件所在的路径,还是您希望视频文件的URL路径?如果是前一种情况,请在
fs.readStream(path)
中替换该路径,但如果是后一种情况,请在路由器
.router('user\u resources/module/5/video.mp4')中替换该路径。所有(函数)
(实际上我刚刚意识到我在该代码中犯了一个错误,请参阅以更正)如果是前者,那是否意味着如果我希望为上传到我系统中的每个文件创建一个新的路由?