CODEWITHSUNDEEP
angularjsapimime-typesvideogular
Flobesst
Flobesst

Reputation: 1340

Stream application/octet-stream mime type with Videogular

I've made an API with NodeJS + Express, which is supposed to send a video stream when we call the /videos/stream/{id} route. Here is the code:

    router.get('/stream/:id', function(req, res) {

      fs.readFile(app.get('path') + '/videos/' + req.params.id + '/video.mp4', function (err,data) {
        if (err) { ... }
        res.writeHead(200, {
            'Content-type' : 'application/octet-stream',
            'Content-Length' : data.length
        });
        res.end(data);
    });
});

This code is working because when I put the whole URI in my browser, I can either open the stream with VLC or save it.

The problem is that I can't see the video stream with the Videogular framework. When I copy/paste the "How to start" code into my AngularJS app, like this:

sources: [
    {src: $sce.trustAsResourceUrl("http://static.videogular.com/assets/videos/videogular.mp4"), type: "video/mp4"},
    {src: $sce.trustAsResourceUrl("http://static.videogular.com/assets/videos/videogular.webm"), type: "video/webm"},
    {src: $sce.trustAsResourceUrl("http://static.videogular.com/assets/videos/videogular.ogg"), type: "video/ogg"}
],

This works, I can see the video into the player, but when I replace the URI with my API's one:

sources: [
    {src: $sce.trustAsResourceUrl("http://localhost:3000/api/videos/stream/556747d8f657a9b81c7f3543"), type: "application/octet-stream"}
],

The player remains black and no video is playing, I don't know why.

Upvotes: 2

Views: 3290

Answers (1)

Flobesst
Flobesst

Reputation: 1340

I found the solution, but this is very specific to the way my API works. When a video is uploaded on the API, it is automatically converted to MP4.

So this is my config:

    $scope.config = {
      sources: [
        {src: $sce.trustAsResourceUrl("http://localhost:3000/api/videos/stream/" + data.video._id), type: "video/mp4"}
      ],
      tracks: [{ ... }],
      theme: "bower_components/videogular-themes-default/videogular.css",
      plugins: {
        poster: "http://www.videogular.com/assets/images/videogular.png"
      }
    };

Note the type : "video/mp4" instead of type : "application/octet-stream" because my API converts everything to MP4.

This code is perfectly working when the video uploaded is an MP4. Otherwise, when a non-MP4 video is uploaded and converted on the API, I'm not able to stream it into the Videogular's player.

TL;DR

My API is not converting videos properly, this is why Videogular can't stream some.

Upvotes: 1

Related Questions