我如何用Node发送视频到客户端JavaScript blob,然后显示它
How do I send video with Node to a client JavaScript blob and then display it?
我想发送一个视频文件到客户端,并显示视频与。createobjecturl()。
节点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);
客户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);
});
在这段代码中,视频是完整发送的,视频不播放。我的问题:
我怎么能修复这个播放视频?
我怎么能改变它流文件,而不是等待整个视频下载?
编辑澄清
我想在客户端上使用Blob
和.createObjectURL()
,因为我正在尝试建立一个WebRTC RTCPeerConnection的点对点视频实现,以便静态视频数据可以从客户端发送到另一个客户端,而无需通过服务器发送。
这是纯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 + "/");
,
我将video.mp4作为静态资产,并将video元素的src
设置为该视频的URL
相关文章:
- Javascript/Jquery Blob not showing Chrome PDF
- 将Excel BLOB转换为javascript数组
- 删除javascript中的大Blob
- Javascript-将类型化数组保存为blob,并作为二进制数据读回
- Fin上传器直接上传到Azure Blob存储-在Javascript中获取文件uri
- 是否可以将音频存储为javascript/jQuery中的blob数据
- 等待用户在Javascript中完成blob的下载
- 如何用Javascript从Chrome iOS下载blob文件
- Blob 对象到 JavaScript 中的 base64
- 使用 JavaScript 计算 Blob 的哈希值
- Javascript下载一个URL-Azure Blob存储
- 如何将音频blob从javascript发送到python
- 使用Javascript创建Azure Blob
- Javascript将blob转换为字符串并返回
- 将JAX-RS与ajax和javascript's blob对象,不'不起作用
- 将Blob文本转换为Javascript中的数组/JSON对象
- 使用 Javascript 将大文件上传到 Azure Blob
- Javascript Array 作为 BLOB(MIME TEXT 而不是 IMAGE)保存到 mySQL 数据库中
- Blob javascript对象在internet explorer浏览器中更改文件名
- 显示来自Blob Javascript的视频