黑色是因为video没有自动播放导致的。
而且video必须设置muted（静音）属性，否则视频都无法播放；
如果不设置muted,也可以用设置x5-video-player-type="h5" 替代（意为兼容qq浏览器，解决在小程序中黑色的问题）
const coverVideoTarget = document.getElementById('coverVideo');function initThree(){scene = new THREE.Scene();// camera = new THREE.Camera();camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,10000);camera.matrixAutoUpdate = false;scene.add(camera);scene.add(new THREE.AmbientLight(0xffffff, 1.5));root = new THREE.Object3D();root.matrixAutoUpdate = false;scene.add(root);renderer = new THREE.WebGLRenderer({ canvas: canvas, alpha: true, antialias: true });renderer.setPixelRatio(window.devicePixelRatio);renderer.setSize(webglWidth, webglHeight);setVideo('./video/18912265449355602.mp4');// setModel();}function setVideo(videoUrl){console.log('setVideo')coverVideoTarget.src = videoUrl;const texture = new THREE.VideoTexture(coverVideoTarget);var mat = new THREE.MeshBasicMaterial({map: texture,transparent:true});const geo = new THREE.PlaneGeometry(400,240);// const geo = new THREE.PlaneGeometry(20,12);coverVideo = new THREE.Mesh(geo, mat);coverVideo.position.z = -50;coverVideo.position.x = 140;coverVideo.position.y = 200;root.add(coverVideo);}function setVideo2(videoUrl){console.log('setVideo2')coverVideoTarget.src = videoUrl;let vWidth = 400, vHeight = 240;coverVideoTarget.addEventListener('canplay', function () {vWidth = this.videoWidth;vHeight = this.videoHeight;});var canvas_process = document.createElement('canvas');// 未被加入body。用于绘制video帧图片并传入tracker识别使用var context_process = canvas_process.getContext('2d');const texture = new THREE.CanvasTexture(canvas_process);function update() {context_process.fillStyle = 'black';context_process.fillRect(0, 0, vWidth, vHeight);context_process.drawImage(coverVideoTarget, 0, 0, vWidth, vHeight);texture.needsUpdate = true;requestAnimationFrame(update);}update();var mat = new THREE.MeshBasicMaterial({map: texture,transparent:true});const geo = new THREE.PlaneGeometry(400,240);// const geo = new THREE.PlaneGeometry(20,12);coverVideo = new THREE.Mesh(geo, mat);coverVideo.position.z = -50;coverVideo.position.x = 140;coverVideo.position.y = 200;root.add(coverVideo);}function initNFT(marker, videoUrl) {// video宽高比 240 : 360if (typeof(NFTworker) !== 'undefined') {NFTworker.terminate();NFTworker = undefined;}// setVideo(videoUrl);NFTworker = new Worker('../js/imgTracker.worker.js');NFTworker.postMessage({ type: "initNFT", pw: trackImgWidth, ph: trackImgHeight, trackData: './../examples/Data/camera_para.dat', marker: marker });var resultTime = new Date().getTime(),noResultTime = 0;NFTworker.onmessage = function (ev) {var msg = ev.data;switch (msg.type) {case "nftInitSuccess": {var proj = JSON.parse(msg.proj);proj[0] *= ratioW;proj[4] *= ratioW;proj[8] *= ratioW;proj[12] *= ratioW;proj[1] *= ratioH;proj[5] *= ratioH;proj[9] *= ratioH;proj[13] *= ratioH;setMatrix(camera.projectionMatrix, proj);nftProcess();break;}case 'found': {// console.log('found')coverVideo && (coverVideo.visible = true);coverVideoTarget.play();setMatrix(root.matrix, JSON.parse(msg.matrixGL_RH));renderer.render(scene, camera);resultTime = new Date().getTime();nftProcess();break;}case 'noResult': {coverVideo && (coverVideo.visible = false);coverVideoTarget.pause();renderer.render(scene, camera);var noResultTime = new Date().getTime();if (noResultTime - resultTime > 3000) {console.log('go track');// trackProcess('track');nftProcess();} else {nftProcess();}break;}}};};
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>ALVA Image Tracker</title><meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=0.5, maximum-scale=1"><link rel="stylesheet" href="css/nft-style.css">
</head>
<style>#coverVideo{/* visibility: hidden; */position: fixed;/* left: 0px; */left: -1000000px;top:0px;z-index: 10000;width: 320px;height: 240px;background-color: pink;}
</style>
<body><div id="loading" ><span class="loading-text">Loading, please wait</span></div><div id="app"><videoloopautoplaymutedplaysinlineid="cameraVideo"></video><video id="coverVideo" loop controls webkit-playsinline="true" x-webkit-airplay="true"playsinline="true" x5-video-player-type="h5" preload="auto" src='./video/18912265449355602.mp4'></video><canvas id="canvas"></canvas></div><script src="../vconsole.min.js"></script><script src="js/third_party/three.js/three.js"></script><script src="js/third_party/three.js/GLTFLoader.js"></script><script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script><script src="threejs_worker.js"></script></body></html> var imgTracker;var cameraVideo = document.getElementById( 'cameraVideo' );if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {var hint = { audio: false, video: true };if( window.innerWidth < 800 ) { // 宽高比为2/3或者3/2var width = ( window.innerWidth < window.innerHeight ) ? 240 : 360;var height = ( window.innerWidth < window.innerHeight ) ? 360 : 240;width = width * window.devicePixelRatio;height = height * window.devicePixelRatio;hint = {audio: false,video: {facingMode: 'environment',// 调用后置摄像头width: { min: width, max: width }},};}navigator.mediaDevices.getUserMedia( hint ).then( function( stream ) {cameraVideo.srcObject = stream;cameraVideo.addEventListener( 'loadedmetadata', function() {cameraVideo.play();start(cameraVideo);} );} ).catch(err => {console.log('catch');});} else {}
![[0405].第05节：搭建Redis主从架构](https://i-blog.csdnimg.cn/blog_migrate/80136148c4194ffac36afd146a82e7a1.png)
