koobas.hobune.stream
Need to send Secondary camera render from unity webgl to HTML5 canvas
I am trying to write a code to send data from Unity Webgl to HTML5 canvas. I wasnt to capture the camera renderTexture and send it to the HTML5 where I can show it on a canvas. Note: This camera is additional camera apart from the main camera. I want to use this video feed to be displayed on a canvas.
I have been struggling to get it right. I followed the instructions given in https://docs.unity3d.com/Manual/webgl-interactingwithbrowserscripting.html
But still I find it hard as there is a warning saying, "VM107926:1 WebGL: INVALID_OPERATION: bindTexture: object does not belong to this context" And it is not displaying anything.
Could you please help me find a solution.
jslib -
BindWebGLTexture: function (texture) {
console.log("start rendering second camera");
const canvas = document.querySelector("#secondCamera");
// Initialize the GL context
var GLctx = canvas.getContext("webgl");
console.log("rendering second camera");
//GLctx.bindTexture(GLctx.TEXTURE_2D, GL.textures[texture]);
GLctx.bindTexture(GLctx.TEXTURE_2D, GL.textures[texture]);
console.log("finished rendering second camera");
check2 = GL.textures[texture];
},
c# -
[DllImport("__Internal")]
private static extern void BindWebGLTexture(int texture);
Texture2D texture1 = getCameraTexture();
BindWebGLTexture((int)texture1.GetNativeTexturePtr());
Texture2D getCameraTexture()
{
return toTexture2D(CamTexture);
}
Texture2D toTexture2D(RenderTexture rTex)
{
Texture2D tex = new Texture2D(CamTexture.width, CamTexture.height, TextureFormat.RGB24, false);
RenderTexture.active = rTex;
tex.ReadPixels(new Rect(0, 0, rTex.width, rTex.height), 0, 0);
tex.Apply();
return tex;
}
Unity - 
CamTexture = new render texture;
HTML:
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Unity WebGL Player | New Unity Project (1)</title>
<link rel="shortcut icon" href="/static/assets/robotarm2/TemplateData/favicon.ico">
<link rel="stylesheet" href="/static/assets/robotarm2/TemplateData/style.css">
<script src="/static/assets/robotarm2/TemplateData/UnityProgress.js"></script>
<script src="/static/assets/robotarm2/Build/UnityLoader.js"></script>
<script>
//var unityInstance = UnityLoader.instantiate("unityContainer", "/static/assets/robotarm2/Build/Build.json", {onProgress: UnityProgress});
var unityInstance = UnityLoader.instantiate("unityContainer", "/static/assets/robotarm2/Build/Build.json", {
Module: {
"webglContextAttributes": {"preserveDrawingBuffer": true},
}
});
</script>
</head>
<body>
<div class="webgl-content">
<div id="unityContainer" style="width: 960px; height: 600px"></div>
</div>
<canvas id="secondCamera" style="position:absolute;top:800px" width="100px" height="100px"></canvas>
</body>
</html>
I dont get any errors but still I am not able to understand whats wrong or if I am missing something.
Please help me to solve this challenge.
