[英]How do I send video with Node to a client JavaScript blob and then display it?
I want to send a video file to the client and display the video with .createObjectURL(). 我想将视频文件发送到客户端并使用.createObjectURL()显示视频。
Node server.js: 节点server.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);
Client blobvideo.js: 客户端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);
});
In this code, the video is sent all in one piece, and the video doesn't play. 在此代码中,视频全部一起发送,视频无法播放。 My questions:
我的问题:
How can I fix this to play the video? 如何解决此问题才能播放视频?
How can I change it to stream the file rather than wait for the entire video to download? 如何更改它以流式传输文件而不是等待整个视频下载?
Edit for Clarification 编辑澄清
I want to use Blob
and .createObjectURL()
on the client because I am trying to build a peer-to-peer video implementation of the WebRTC RTCPeerConnection, so that static video data can be sent from the client to another client without sending it through the server. 我想在客户端上使用
Blob
和.createObjectURL()
,因为我正在尝试构建WebRTC RTCPeerConnection的对等视频实现,以便静态视频数据可以从客户端发送到另一个客户端而不通过它发送服务器。
我只是将video.mp4作为静态资源提供,并将视频元素的src
设置为该视频的URL。
This is pure nodejs javascript which streams video/audio without outside library dependencies and requires NO client code ... launch it using : 这是纯粹的nodejs javascript,可以在没有外部库依赖的情况下传输视频/音频,并且不需要客户端代码...使用以下命令启动它:
node this_code.js
then point your client browser at 然后将您的客户端浏览器指向
http://localhost:8888
Huge benefit is the browser client video rendering UI widgets just work - (ability to jump to some random media location, etc.) 巨大的好处是浏览器客户端视频呈现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 + "/");
enjoy, 请享用,
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.