THREE.js的VideoTexture以及CanvasTexture在部分浏览器以及小程序webview中纯黑不起作用的解决办法

黑色是因为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 {}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/66674.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【redis】ubuntu18安装redis7

在Ubuntu 18下安装Redis7可以通过以下两种方法实现&#xff1a;手动编译安装和使用APT进行安装。 Ubuntu 18系统的环境和版本&#xff1a; $ cat /proc/version Linux version 4.15.0-213-generic (builddlcy02-amd64-079) (gcc version 7.5.0 (Ubuntu 7.5.0-3ubuntu1~18.04)…

Java实现迭代器模式

一、简介 1、定义 迭代器模式(Iterator Pattern)是一种面向集合对象而生的行为设计模式。对于集合对象而言&#xff0c;会涉及对集合的添加和删除操作&#xff0c;也要支持遍历集合元素的操作。可以把遍历操作放在集合对象中&#xff0c;但这样做&#xff0c;集合对象就承担太…

uniapp中h5使用地图

export function loadTMap(key) {return new Promise(function(resolve, reject) {window.init function() {// resolve(qq) //注意这里resolve(TMap) //注意这里}var script document.createElement("script");script.type "text/javascript";// scrip…

获取地图文档中的图层列表

大多数情况下,获取地图文档中的图层列表是地理处理脚本中的首要工作之一.获取图层列表后,脚本可以循环遍历每个图层并执行某些类型的处理.制图模块中的ListLayers()函数提供获取图层列表的功能.本节将学习如何获得地图文档中的图层列表. 操作方法: 1.在arcgis中打开地图文件 …

软件系统安全逆向分析-混淆对抗

1. 概述 在一般的软件中&#xff0c;我们逆向分析时候通常都不能直接看到软件的明文源代码&#xff0c;或多或少存在着混淆对抗的操作。下面&#xff0c;我会实践操作一个例子从无从下手到攻破目标。 花指令对抗虚函数表RC4 2. 实战-donntyousee 题目载体为具有漏洞的小型软…

#渗透测试#网络安全# 一文了解什么是跨域CROS!!!

免责声明 本教程仅为合法的教学目的而准备&#xff0c;严禁用于任何形式的违法犯罪活动及其他商业行为&#xff0c;在使用本教程前&#xff0c;您应确保该行为符合当地的法律法规&#xff0c;继续阅读即表示您需自行承担所有操作的后果&#xff0c;如有异议&#xff0c;请立即停…

【权限管理】Apache Shiro学习教程

Apache Shiro 是一个功能强大且灵活的安全框架&#xff0c;主要用于身份认证&#xff08;Authentication&#xff09;、授权&#xff08;Authorization&#xff09;、会话管理&#xff08;Session Management&#xff09;和加密&#xff08;Cryptography&#xff09;。它旨在为…

Spring事件发布与监听

Spring事件机制详解&#xff1a;事件发布与监听 在Spring框架中&#xff0c;事件机制基于发布-订阅模式&#xff0c;允许组件之间进行解耦。发布者发布事件&#xff0c;监听者订阅并响应这些事件。Spring事件机制的核心在于ApplicationEvent和ApplicationListener&#xff0c;…

ClickHouse vs StarRocks 选型对比

一、面向列存的 DBMS 新的选择 Hadoop 从诞生已经十三年了&#xff0c;Hadoop 的供应商争先恐后的为 Hadoop 贡献各种开源插件&#xff0c;发明各种的解决方案技术栈&#xff0c;一方面确实帮助很多用户解决了问题&#xff0c;但另一方面因为繁杂的技术栈与高昂的维护成本&…

Win11家庭版转专业版

Win11家庭版转专业版&#xff08;亲测有效&#xff09; 第一步 【断网】输入这个密钥&#xff1a; R8NJ8-9X7PV-C7RCR-F3J9X-KQBP6 第二步 点击下一步会自动重启 第三步 【联网】输入这个密钥&#xff1a; F3NWX-VFMFC-MHYYF-BCJ3K-QV66Y 注意 两次输入密钥的地方一致 …

TypeScript语言的网络编程

TypeScript语言的网络编程 引言 在现代软件开发中&#xff0c;网络编程是一个不可或缺的部分。随着互联网的快速发展&#xff0c;网络应用程序越来越普遍&#xff0c;涉及到从简单的个人网站到复杂的企业级应用。TypeScript作为一种强类型的JavaScript超集&#xff0c;近年来…

在高德地图上加载3DTilesLayer图层模型/天地瓦片

1. 引入必要的库 Three.js&#xff1a;一个用于创建和显示3D图形的JavaScript库。vuemap/three-layer&#xff1a;一个Vue插件&#xff0c;它允许你在高德地图中添加Three.js图层。vuemap/layer-3dtiles&#xff1a;一个用于处理3D Tiles格式数据的Vue插件&#xff0c;可以用来…

Linux 高级路由 —— 筑梦之路

Linux 高级路由详解 本文将基于您提供的 Linux 高级路由极简教程 文章&#xff0c;深入探讨 Linux 高级路由的概念、配置方法以及应用场景。 一、什么是 Linux 高级路由&#xff1f; Linux 高级路由是指利用 Linux 内核提供的强大网络功能&#xff0c;实现超越传统路由表和默…

IP 地址与蜜罐技术

基于IP的地址的蜜罐技术是一种主动防御策略&#xff0c;它能够通过在网络上布置的一些看似正常没问题的IP地址来吸引恶意者的注意&#xff0c;将恶意者引导到预先布置好的伪装的目标之中。 如何实现蜜罐技术 当恶意攻击者在网络中四处扫描&#xff0c;寻找可入侵的目标时&…

【Word_笔记】Word的修订模式内容改为颜色标记

需求如下&#xff1a;请把修改后的部分直接在原文标出来&#xff0c;不要采用修订模式 步骤1&#xff1a;打开需要转换的word后&#xff0c;同时按住alt和F11 进入&#xff08;Microsoft Visual Basic for Appliations&#xff09; 步骤2&#xff1a;插入 ---- 模块 步骤3&…

[0405].第05节:搭建Redis主从架构

Redis学习大纲 一、3主3从的集群配置&#xff1a; 1.1.集群规划 1.分片集群需要的节点数量较多&#xff0c;这里我们搭建一个最小的分片集群&#xff0c;包含3个master节点&#xff0c;每个master包含一个slave节点&#xff0c;结构如下&#xff1a; 2.每组是一主一从&#x…

科研绘图系列:R语言绘制分组箱线图(boxplot)

禁止商业或二改转载,仅供自学使用,侵权必究,如需截取部分内容请后台联系作者! 文章目录 介绍加载R包数据下载导入数据数据预处理画图输出系统信息介绍 科研绘图系列:R语言绘制分组箱线图(boxplot) 加载R包 library(ggpubr) library(ggplot2) library(tidyverse) # dev…

Hadoop - MapReduce编程

文章目录 前言一、创建mapreduce-demo项目1. 在idea上创建maven项目2. 导入hadoop相关依赖 二、MapReduce编程1. 相关介绍1.1 驱动类&#xff08;Driver Class&#xff09;1.1.1 驱动类的定义1.1.2 驱动类的功能1.1.3 驱动类的作用 1.2 Mapper1.2.1 Mapper 的定义1.2.2 Mapper …

原码的乘法运算>>>只有0,1

MQ : 乘数 X : 被乘数 ACC : 乘积高位 [当前位是1,加上被乘数; 当前位是 0,加上0] 例如: MQ的最低位是1,所以要加上被乘数(01101) >>>> 得出 01101 >>>>> ACC MQ 需要整体逻辑右移 (原本01101 01011 >>> 001101 0101) 现在的次低位是…

第四、五章图论和网络爬虫+网络搜索

第四章 图论和网络爬虫 4.1 构建网络爬虫工程重点 构建网络爬虫的重点 用BFS还是DFS 在不考虑时间的情况下&#xff0c;这两种不同的搜索方法都可以在相同的时间下爬下整个静态的互联网内容&#xff0c;但是在现实中肯定是需要考虑时间以及互联网动态变化的。所以重点应该是如…