将threejs场景通过h264压缩发送出去
Posted qianbo_insist
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了将threejs场景通过h264压缩发送出去相关的知识，希望对你有一定的参考价值。
threejs
画出threejs场景后，是否可以共享3d场景呢，当然可以。threejs的场景一般也都在canvas里面，我们可以抓取canvas的图像甚至直接获取h264编码或者vp8等编码直接共享3d场景。
发送h264
2种方式来发送h264：
1 是直接在网页上抓取，通过websocket发送
2是网页通过图像传输到客户端，由客户端编码发送
2种方式各有好处。
1 通过网页canvas.captureStream(20); 来定时采样canvas的图像并且通过websocket发送，
2 本地启动一个客户端，通过图像也可以发送到客户端，然后由客户端解码重新编码成h264，合成本地话筒的声音，发送出去。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script>
document.addEventListener('DOMContentLoaded', () =>
document.querySelector('[data-action="goLive"]').addEventListener('click', (e) =>
//console.log(createRes);
let mediaRecorder;
let mediaStream;
var addr = "ws://127.0.0.1:3000/1001" ;
const ws = new WebSocket(addr);
ws.addEventListener('open', (e) =>
console.log('WebSocket Open', e);
mediaStream = document.querySelector('canvas').captureStream(20); // 10 FPS
mediaRecorder = new MediaRecorder(mediaStream,
mimeType: 'video/webm;codecs=h264',
videoBitsPerSecond : 500000
);
mediaRecorder.addEventListener('dataavailable', (e) =>
console.log(e.data);
ws.send(e.data);
);
mediaRecorder.addEventListener('stop', ws.close.bind(ws));
mediaRecorder.start(500); // Start recording, and dump data every second
);
ws.addEventListener('close', (e) =>
console.log('WebSocket Close', e);
mediaRecorder.stop();
);
);
);
</script>
</head>
<body>
<canvas width="640" height="360"></canvas>
<nav>
<button data-action="goLive">Go Live</button>
</nav>
</body>
</html>
以上是关于将threejs场景通过h264压缩发送出去的主要内容，如果未能解决你的问题，请参考以下文章