如何将带有Node的视频发送到客户端JavaScript blob，然后显示它？

shstlldc 于 2022-11-22 发布在 Node.js

关注(0)|答案(2)|浏览(137)

我想向客户端发送一个视频文件，并使用.createObjectURL（）显示该视频。
节点服务器.js：

var fs = require("fs"),
http = require("http");

http.createServer(function (req, res) {

  if (req.url == "/") {
    res.writeHead(200, { "Content-Type": "text/html" });

    res.end('<video id="video" src="" autoplay controls loop width="200px" height="200px" muted></video>' +
      '<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>' +
      '<script src="blobvideo.js"></script>'); 
  }

  else if (req.url == "/blobvideo.js") {
    res.writeHead(200, { "Content-Type": "application/javascript" });
    fs.readFile('./blobvideo.js', function(err, data) {
      res.end(data.toString());
    });

  }

  else if (req.url == "/video") {
    fs.readFile('video.mp4', function(err, data) {
      res.end(data);
    });
  }
}).listen(3000);

客户端blobvideo.js：

$.ajax( "/video" ).done(function(data) {
  var ab = new ArrayBuffer(data.length);
  var view = new Uint8Array(ab);

  for(var i = 0; i < data.length; ++i) {
    view[i] = data[i];
  }

  blob = new Blob([ab], { type: "video/mp4" });
  document.getElementById("video").src = (window.URL || window.webkitURL).createObjectURL(blob);
});

在这段代码中，视频是完整发送的，并且不播放。我的问题：
1.如何修复此问题以播放视频？
1.我如何更改它以流文件，而不是等待整个视频下载？

编辑澄清

我希望在客户端上使用Blob和.createObjectURL()，因为我正在尝试构建WebRTC RTCPeerConnection的对等视频实现，以便可以将静态视频数据从客户端发送到另一个客户端，而无需通过服务器发送。

node.js

来源：https://stackoverflow.com/questions/32429708/how-do-i-send-video-with-node-to-a-client-javascript-blob-and-then-display-it

2条答案

按热度按时间

rkue9o1l1#

这是一个纯nodejs javascript，它不依赖于外部库而流传输视频/音频，并且不需要客户端代码...使用以下命令启动它：

node this_code.js

然后将您的客户端浏览器指向

http://localhost:8888

巨大的好处是浏览器客户端视频渲染UI小部件刚刚工作-（能够跳转到一些随机媒体位置等）

var http = require('http'),
    fs = require('fs'),
    util = require('util');

// put any audio or video file here
var path = "/path/to/audio/or/video/file/local/to/server/cool.mp4";

var port = 8888;
var host = "localhost";

http.createServer(function (req, res) {

  var stat = fs.statSync(path);
  var total = stat.size;

  if (req.headers.range) {

    // meaning client (browser) has moved the forward/back slider
    // which has sent this request back to this server logic ... cool

    var range = req.headers.range;
    var parts = range.replace(/bytes=/, "").split("-");
    var partialstart = parts[0];
    var partialend = parts[1];

    var start = parseInt(partialstart, 10);
    var end = partialend ? parseInt(partialend, 10) : total-1;
    var chunksize = (end-start)+1;
    console.log('RANGE: ' + start + ' - ' + end + ' = ' + chunksize);

    var file = fs.createReadStream(path, {start: start, end: end});
    res.writeHead(206, { 'Content-Range': 'bytes ' + start + '-' + end + '/' + total, 'Accept-Ranges': 'bytes', 'Content-Length': chunksize, 'Content-Type': 'video/mp4' });
    file.pipe(res);

  } else {

    console.log('ALL: ' + total);
    res.writeHead(200, { 'Content-Length': total, 'Content-Type': 'video/mp4' });
    fs.createReadStream(path).pipe(res);
  }
}).listen(port, host);

console.log("Server running at http://" + host + ":" + port + "/");

好好享受吧，

赞(0）回复(0）举报 2022-11-22

xytpbqjk2#

我只将video.mp4作为静态资产，并将video元素的src设置为该视频的URL。

赞(0）回复(0）举报 2022-11-22