0 如果是文件，那相当的简单
和untiy 一样，可以添加材质后，将image 直接给材质赋值上，其中abcd 是四个点，这四个点要经过计算
<video id="video" style="display:none" controls loop autoplay>
<source src="/static/video/zm.mp4" type="video/mp4">
</video>
//这个和unity 添加材质一样相当的简单
// 添加监控画面
var videoEl = document.getElementById('video')
var pArr = [a,b,c,d];
var instance =new Cesium.GeometryInstance({
geometry:new Cesium.WallGeometry({
positions:Cesium.Cartesian3.fromDegreesArrayHeights(pArr),
minimumHeights:[100,100],
})
});
var material = Cesium.Material.fromType("Image");
material.uniforms.image = videoEl;
var tileset = viewer.scene.primitives.add(new Cesium.Primitive({
id:'video',
geometryInstances:instance,
appearance: new Cesium.MaterialAppearance({
closed:false,
material:material,
}),
show:false,
}))
1 使用ffmepg nodejs 来转码
方案主要可基于ffmpeg的转码，使用 flv.js的 RTSP 播放方案（flv.js 是 Bilibili 开源的一款 HTML5 浏览器。依赖于 Media Source Extension 进行视频播放，视频通过 HTTP-FLV 或 WebSocket-FLV 协议传输，视频格式需要为 FLV 格式）。在视频融合的案例里面，一定要选择多路的websocket方案，因为http协议最多提供6路链接。
服务器端可以采用 express + express-ws 来进行编写， HTTP 请求发送到指定的地址时，启动 ffmpeg 串流程序，将 RTSP 流封装成 FLV 格式的视频流，推送到指定的 WebSocket 响应流中。
let app = express();
app.use(express.static(__dirname));
expressWebSocket(app, null, {
perMessageDeflate: true
});
app.ws("/rtsp", rtspRequestHandle)
app.listen(8888);
// 处理方法
function rtspRequestHandle(ws, req) {
const stream = webSocketStream(ws, {
binary: true,
browserBufferTimeout: 1000000
}, {
browserBufferTimeout: 1000000
});
let url = req.query.url;
try {
ffmpeg(url)
.addInputOption("-rtsp_transport", "tcp", "-buffer_size", "102400")
.on("start", function () {
console.log(url, "Stream started.");
})
.on("codecData", function () {
console.log(url, "Stream codecData.")
})
.on("error", function (err) {
console.log(url, "An error occured: ", err.message);
})
.on("end", function () {
console.log(url, "Stream end!");
})
.outputFormat("flv").videoCodec("copy").noAudio().pipe(stream);
} catch (error) {
console.log(error);
}
}
2 浏览器端采用flv.js进行播放：
这一部分在我的其他文章里可以看到
<video id="player" width="480" controls autoplay></video>
if (flvjs.isSupported()) {
let video = document.getElementById("player");
if (video) {
this.player = flvjs.createPlayer({
type: "flv",
isLive: true,
url: `ws://localhost:8888/rtsp?url=rtsp://127.0.0.1:8555/demo`
});
this.player.attachMediaElement(video);
this.player.load();
this.player.play();
}
}
方法改进
使用ffmpeg 来转码的方案并不专业，路数也有限，我公司提供真正专业的流媒体转码服务器
viewer.entities.add({
polygon: {
hierarchy: new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArray([......])),
classificationType: Cesium.ClassificationType.BOTH,
material: video
}
});
使用媒体服务器，可以提供上百路的监控视频融合，使用c++ 语言进行编写，使用矫正，投影变换等算法进行视频的拼接融合，同时也提供unity 和 UE 的视频融合插件，以及融合以后进行视频算法分析。
