node js 生成视频链接(视频流)

video 直接视频文件
video 直接播放视频流文件
本地转化一下在播放视频文件
本地加载获取视频流文件
new MediaSource() 分段合成文件

参考:https://blog.csdn.net/liuyaqi1993/article/details/76560401

Readable Stream：可读流是对可消费的数据源进行的抽象，比如fs.createReadStream
Writable Stream：可写流是对流的目的地（destination）的抽象，destination运允许数据写入，比如fs.createWriteStream
Duplex Stream：双工流是同时实现了 Readable 和 Writable 接口的流，既能写又能读。比如TCP socket
Transform Stream：交换流本质上是一种Duplex流，可以将其看成输入Writable流，输出的是Readable流，也可以称之为“通过流”（through streams）。比如zlib streams。

视频流

<div class="a"><video id="video" controls preload="auto"></video></div><script>$(function() {var video = document.querySelector('#video');var mediaSource = new MediaSource();video.src = URL.createObjectURL(mediaSource);mediaSource.addEventListener('sourceopen', sourceOpen);function sourceOpen(e) {URL.revokeObjectURL(video.src);// 设置 媒体的编码类型var mime = 'video/webm; codecs="vorbis,vp8"';var mediaSource = e.target;var sourceBuffer = mediaSource.addSourceBuffer(mime);var videoUrl = 'http://localhost:9090/examples/mp4/video.webm';fetch(videoUrl).then(function(response) {console.log(response)return response.arrayBuffer();}).then(function(arrayBuffer) {sourceBuffer.addEventListener('updateend', function(e) {if (!sourceBuffer.updating && mediaSource.readyState === 'open') {mediaSource.endOfStream();// 在数据请求完成后，我们需要调用 endOfStream()。它会改变 MediaSource.readyState 为 ended 并且触发 sourceended 事件。video.play().then(function() {}).catch(function(err) {console.log(err)});}});sourceBuffer.appendBuffer(arrayBuffer);});}})
</script>

文件流

var http = require("http");
//文件处理
var fs = require("fs");
// req 路由监听空 res 上下文函数
var server = http.createServer((req, res) => {// 公共请求头res.writeHead(200, {// "Content-Type": "text/html;chaset=UTF-8","Content-Type": "image/png",//设置允许跨域的域名，*代表允许任意域名跨域"Access-Control-Allow-Origin": "*",});// 路由监控if (req.url == "/fang") {res.end("fang");} else if (req.url == "/yuan") {res.end("yuan");} else {// res.end("404");// res.end("<a href='/fang'>fang</a><br><a href='yuan'>yuan</a>");// fs.readFile(path,’binary’, function (err, file) { })的参数多了一个’binary’，以二进制流的方式读取。// res.write(file,’binary’); response也以二进制流的方式向浏览器输出。fs.readFile("./1.mp4", "binary", function (err, file) {if (err) {console.log(err);return;} else {res.write(file, "binary");res.end();}});}
});
server.listen(3000, "127.0.0.1", (res) => {console.log("http://127.0.0.1:3000/");
});

视频流

//文件处理
var fs = require("fs");
var express = require("express");
var router = express();//服务端
router.get("/video", function (req, res, next) {//   let head = { "Content-Type": "video/mp4" };  video.ogvlet head = { "Content-Type": "video/*" };//需要设置HTTP HEADres.writeHead(200, head);//使用pipefs.createReadStream("./1.mp4").pipe(res);
});
router.listen(3000);

分段流

//文件处理
var fs = require("fs");
var express = require("express");
var router = express();//服务端
router.get("/video", function (req, res, next) {let path = "./1.mp4";let stat = fs.statSync(path);let fileSize = stat.size;let range = req.headers.range;// fileSize 3332038if (range) {//有range头才使用206状态码let parts = range.replace(/bytes=/, "").split("-");let start = parseInt(parts[0], 10);let end = parts[1] ? parseInt(parts[1], 10) : start + 999999;// end 在最后取值为 fileSize - 1end = end > fileSize - 1 ? fileSize - 1 : end;let chunksize = end - start + 1;let file = fs.createReadStream(path, { start, end });let head = {"Content-Range": `bytes ${start}-${end}/${fileSize}`,"Accept-Ranges": "bytes","Content-Length": chunksize,"Content-Type": "video/mp4",};res.writeHead(206, head);file.pipe(res);} else {let head = {"Content-Length": fileSize,"Content-Type": "video/mp4",};res.writeHead(200, head);fs.createReadStream(path).pipe(res);}
});router.listen(3000);

前端

参考:https://editor.csdn.net/md/?articleId=121333572


<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><style>body {background: black;color: #CCCCCC;}#c2 {background-image: url('foo.png');background-repeat: no-repeat;}div {float: left;border: 1px solid #444444;padding: 10px;margin: 10px;background: #3B3B3B;}</style></head><body><div><video id="video" src="http://127.0.0.1:3000/video" controls="true" /></div><div><canvas id="c1" width="160" height="96" /><canvas id="c2" width="160" height="96" /></div><script src="index.js"></script><script>processor.doLoad()</script>
</body></html>

后台

router.get('/GetStream', function(req, res, next) {let filePath = 'public/videos/frag_bunny.mp4'res.set('Content-Type', 'application/octet-stream');fs.createReadStream(filePath).pipe(res)
})

解析视频流

export default {data() {return {mediaSource: null,sourceBuffer: null,mimeType: 'video/mp4;codecs="avc1.42E01E,mp4a.40.2"'}},mounted() {// MediaSource.isTypeSupported('video/webm;codecs="vorbis,vp8"');//是否支持webm // MediaSource.isTypeSupported('video/mp4;codecs="avc1.42E01E,mp4a.40.2"')//是否支持MP4 // MediaSource.isTypeSupported('video/mp2t;codes="avc1.42E01E,mp4a.40.2"')//是否支持ts// 首先判断一下对视频格式的支持度，MediaSource提供了isTypeSupported方法if ('MediaSource' in window && MediaSource.isTypeSupported(this.mimeType)) {this.createMediaSource()} else {this.$message({message: '您的浏览器不支持MediaSource', type: 'warning'})}},methods: {createMediaSource() {// 创建MediaSource对象，并使用URL.createObjectURL来创建指向MediaSource对象的URL供video播放this.mediaSource = new MediaSource()this.$refs.h5video.src = window.URL.createObjectURL(this.mediaSource)// 监听sourceopenthis.mediaSource.addEventListener('sourceopen', this.onSourceOpen)},onSourceOpen() {let self = this// 创建一个新的 SourceBuffer 对象，然后会将它追加到 MediaSource 的 SourceBuffers 列表中。this.sourceBuffer = this.mediaSource.addSourceBuffer(this.mimeType)// 监听buffer更新结束事件this.sourceBuffer.addEventListener('updateend', () => {// 停止streamself.mediaSource.endOfStream()// 开始播放self.$refs.h5video.play()})this.requestBuffer()},requestBuffer() {let self = this// 请求接口去拉流this.$http.get('GetStream', null, {responseType: 'arraybuffer'}).then(resp => {// 拉到的流塞进sourceBuffer里。self.sourceBuffer.appendBuffer(resp)})}}
}

php 生成网络视频

https://blog.csdn.net/weixin_34409822/article/details/91966486?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522159782227719725219908200%2522%252C%2522scm%2522%253A%252220140713.130102334…%2522%257D&request_id=159782227719725219908200&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2_alltop_click~default-4-91966486.pc_ecpm_v3_pc_rank_v3&utm_term=blob&spm=1018.2118.3001.4187