iOS - Can't stream video from Parse Backend

隐身守侯 提交于 2019-11-30 17:03:27

问题


Recently I have created my own parse server hosted on heroku using mongoLab to store my data.

My problem is I am saving a video as a parse PFFile, however I can not seem to be able to stream it after saving it.

Here are my exact steps.

First, I save the video returned by UIImagePicker

//Get the video URL
let videoURL = info[UIImagePickerControllerMediaURL] as? NSURL

//Create PFFile with NSData from URL
let data = NSData(contentsOfURL: videoURL!)
videoFile = PFFile(data: data!, contentType: "video/mp4")

//Save PFFile first, then save the PFUser
PFUser.currentUser()?.setObject(videoFile!, forKey: "profileVideo")
            videoFile?.saveInBackgroundWithBlock({ (succeeded, error) -> Void in
                print("saved video")
                PFUser.currentUser()?.saveInBackgroundWithBlock({ (succeeded, error) -> Void in
                    if succeeded && error == nil {
                        print("user saved")

                        //Hide progress bar 
                        UIView.animateWithDuration(0.5, animations: { () -> Void in                   
                            self.progressBar.alpha = 0
                            }, completion: { (bool) -> Void in
                                self.progressBar.removeFromSuperview()
                        })

                    }else{

                        //Show error if the save failed
                        let message = error!.localizedDescription
                        let alert = UIAlertController(title: "Uploading profile picture error!", message: message, preferredStyle: UIAlertControllerStyle.Alert)
                        let dismiss = UIAlertAction(title: "OK", style: UIAlertActionStyle.Cancel, handler: nil)
                        alert.addAction(dismiss)
                        self.presentViewController(alert, animated: true, completion: nil)

                    }
                })
                }, progressBlock: { (progress) -> Void in
                    self.progressBar.setProgress(Float(progress)/100, animated: true)
            })

This all works well. The problem lies when I retrieve the PFFile and try to stream the video. Here is my code for that:

//Get URL from my current user
self.videoFile = PFUser.currentUser()?.objectForKey("profileVideo") as? PFFile
                        self.profileVideoURL = NSURL(string: (self.videoFile?.url)!)

//Create AVPlayerController
let playerController = AVPlayerViewController()

//Set AVPlayer URL to where the file is stored on the sever
let avPlayer = AVPlayer(URL: self.profileVideoURL)
playerController.player = avPlayer

//Present the playerController
self.presentViewController(playerController, animated: true, completion: { () -> Void in
 playerController.player?.play()
})

What ends up happening when I present the playerController is this:

Why is this happening when I try stream my video?

Any help is greatly appreciated!

UPDATE

I have recently tried playing a video saved from a different database using this line of code: let videoURL = NSURL(string: "https://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4")

This confirms that it is the format I am saving my PFFile in that is causing the error.

It must be this line causing the error as "video/mp4" is probably not the right format : videoFile = PFFile(data: data!, contentType: "video/mp4")

UPDATE 2

I have taken the direct link of my .mp4 file located on mongoLab and found I can play it in google chrome, but not on safari or my iPhone.

UPDATE 3

I have found that this was an issue with the parse api itself, and had nothing to do with the code as my code works perfectly when using the original parse backend (the one that is closing down) instead of my custom parse server. I currently have no solution however it should get fixed over time.


回答1:


this code works for me

let playerController = AVPlayerViewController()

      self.addChildViewController(playerController)
      self.view.addSubview(playerController.view)
      playerController.view.frame = self.view.frame

      file!.getDataInBackgroundWithBlock({
        (movieData: NSData?, error: NSError?) -> Void in
        if (error == nil) {

          let filemanager = NSFileManager.defaultManager()

          let documentsPath : AnyObject = NSSearchPathForDirectoriesInDomains(.DocumentDirectory,.UserDomainMask,true)[0]
          let destinationPath:NSString = documentsPath.stringByAppendingString("/file.mov")
          movieData!.writeToFile ( destinationPath as String, atomically:true)


          let playerItem = AVPlayerItem(asset: AVAsset(URL: NSURL(fileURLWithPath: destinationPath as String)))
          let player = AVPlayer(playerItem: playerItem)
          playerController.player = player
          player.play()
        } else {
          print ("error on getting movie data \(error?.localizedDescription)")
        }
      })



回答2:


parse-server doesn't seem to be supporting streaming in Safari/iOS and the solution is the enable it using express & GridStore as follows,

parse-server-example\node_modules\parse-server\lib\Routers\FilesRouter

    {
key: 'getHandler',
value: function getHandler(req, res, content) {
var config = new _Config2.default(req.params.appId);
var filesController = config.filesController;
var filename = req.params.filename;
var video = '.mp4'
var lastFourCharacters = video.substr(video.length - 4);
if (lastFourCharacters == '.mp4') {

  filesController.handleVideoStream(req, res, filename).then(function (data) {

    }).catch(function (err) {
      console.log('404FilesRouter');
        res.status(404);
        res.set('Content-Type', 'text/plain');
        res.end('File not found.');
    });
}else{
filesController.getFileData(config, filename).then(function (data) {
  res.status(200);
  res.end(data);
}).catch(function (err) {
    res.status(404);
    res.set('Content-Type', 'text/plain');
    res.end('File not found.');
  });
 }
}
} , ...

parse-server-example\node_modules\parse-server\lib\Controllers\FilesController

_createClass(FilesController, [{
key: 'getFileData',
value: function getFileData(config, filename) {
return this.adapter.getFileData(filename);
}
},{
key: 'handleVideoStream',
value: function handleVideoStream(req, res, filename) {
return this.adapter.handleVideoStream(req, res, filename);
}
}, ...

parse-server-example\node_modules\parse-server\lib\Adapters\Files\GridStoreAdapter

... , {
     key: 'handleVideoStream',
     value: function handleVideoStream(req, res, filename) {
     return this._connect().then(function (database) {
     return _mongodb.GridStore.exist(database, filename).then(function     () {
  var gridStore = new _mongodb.GridStore(database, filename, 'r');
  gridStore.open(function(err, GridFile) {
      if(!GridFile) {
          res.send(404,'Not Found');
          return;
        }
        console.log('filename');
        StreamGridFile(GridFile, req, res);
      });
      });
      })
      }
      }, ...

Bottom of GridStore Adapter

function StreamGridFile(GridFile, req, res) {
var buffer_size = 1024 * 1024;//1024Kb

if (req.get('Range') != null) { //was: if(req.headers['range'])
  // Range request, partialle stream the file
  console.log('Range Request');
  var parts = req.get('Range').replace(/bytes=/, "").split("-");
  var partialstart = parts[0];
  var partialend = parts[1];
  var start = partialstart ? parseInt(partialstart, 10) : 0;
  var end = partialend ? parseInt(partialend, 10) : GridFile.length - 1;
  var chunksize = (end - start) + 1;

  if(chunksize == 1){
    start = 0;
    partialend = false;
  }

  if(!partialend){
    if(((GridFile.length-1) - start) < (buffer_size) ){
        end = GridFile.length - 1;
    }else{
      end = start + (buffer_size);
    }
      chunksize = (end - start) + 1;
    }

    if(start == 0 && end == 2){
      chunksize = 1;
    }

res.writeHead(206, {
      'Cache-Control': 'no-cache',
    'Content-Range': 'bytes ' + start + '-' + end + '/' + GridFile.length,
    'Accept-Ranges': 'bytes',
    'Content-Length': chunksize,
    'Content-Type': 'video/mp4',
  });

  GridFile.seek(start, function () {
    // get GridFile stream

            var stream = GridFile.stream(true);
            var ended = false;
            var bufferIdx = 0;
            var bufferAvail = 0;
            var range = (end - start) + 1;
            var totalbyteswanted = (end - start) + 1;
            var totalbyteswritten = 0;
            // write to response
            stream.on('data', function (buff) {
            bufferAvail += buff.length;
            //Ok check if we have enough to cover our range
            if(bufferAvail < range) {
            //Not enough bytes to satisfy our full range
                if(bufferAvail > 0)
                {
                //Write full buffer
                  res.write(buff);
                  totalbyteswritten += buff.length;
                  range -= buff.length;
                  bufferIdx += buff.length;
                  bufferAvail -= buff.length;
                }
            }
            else{

            //Enough bytes to satisfy our full range!
                if(bufferAvail > 0) {
                  var buffer = buff.slice(0,range);
                  res.write(buffer);
                  totalbyteswritten += buffer.length;
                  bufferIdx += range;
                  bufferAvail -= range;
                }
            }

            if(totalbyteswritten >= totalbyteswanted) {
            //  totalbytes = 0;
              GridFile.close();
              res.end();
              this.destroy();
            }
            });
        });

  }else{

//  res.end(GridFile);
        // stream back whole file
      res.header('Cache-Control', 'no-cache');
      res.header('Connection', 'keep-alive');
      res.header("Accept-Ranges", "bytes");
      res.header('Content-Type', 'video/mp4');
      res.header('Content-Length', GridFile.length);
      var stream = GridFile.stream(true).pipe(res);
   }
  };

P.S The original answer is given by @Bragegs here - https://github.com/ParsePlatform/parse-server/issues/1440#issuecomment-212815625 . User @Stav1 has also mentioned it in this thread, but unfortunately he was downvoted ?




回答3:


For anyone that lands here still, in looking at the new Parse-Server-example update Parse-server now recognizes streaming; however, you should utilize the Parse iOS sdk method to retrieve the video. The server code is below in case you are rolling out a custom parse-server. I follow with a list of some of the streaming methods.

Server-code change found in:

parse-server-example\node_modules\parse-server\lib\Routers\FilesRouter

{
key: 'getHandler',
value: function getHandler(req, res) {
  var config = new _Config2.default(req.params.appId);
  var filesController = config.filesController;
  var filename = req.params.filename;
  var contentType = _mime2.default.lookup(filename);
  if (isFileStreamable(req, filesController)) {
    filesController.getFileStream(config, filename).then(function (stream) {
      handleFileStream(stream, req, res, contentType);
    }).catch(function () {
      res.status(404);
      res.set('Content-Type', 'text/plain');
      res.end('File not found.');
    });
  } else {
    filesController.getFileData(config, filename).then(function (data) {
      res.status(200);
      res.set('Content-Type', contentType);
      res.set('Content-Length', data.length);
      res.end(data);
    }).catch(function () {
      res.status(404);
      res.set('Content-Type', 'text/plain');
      res.end('File not found.');
    });
  }
}},

Method example for streaming with iOS parse sdk(swift):

vidObject.video.getDataStreamInBackground(block: <#T##PFDataStreamResultBlock?##PFDataStreamResultBlock?##(InputStream?, Error?) -> Void#>)



回答4:


I have a local mongodb with parse-server and needed this to make it work:

Parse-server stream video to IOS from PFFile.url

Don't know if it is the same with non-local databases though.



来源:https://stackoverflow.com/questions/35235340/ios-cant-stream-video-from-parse-backend

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!