otmb/thetaview_sample.html

## thetaview_sample.html
<!doctype html>
<html>
<head>
<title>Camera Sample</title>
<style>
#viewer {
    width: 720px;
    height: 480px;
    position: relative;
    background-color: #000000;
}
.subview {
    width: 25%;
    height: 20%;
    position: absolute;
}
</style>
</head>
<body>
    <div id="viewer"><video id="mainView" style="width:720px" autoplay></video>
    <canvas id="subView1" class="subview" style="left: 0%"></canvas>
    <canvas id="subView2" class="subview" style="left: 25%"></canvas>
    <canvas id="subView3" class="subview" style="left: 50%"></canvas>
    <canvas id="subView4" class="subview" style="left: 75%"></canvas>
    </div>
</body>
<script src="three.min.js"></script>
<script src="thetaview.js"></script>

<script type="text/javascript">
class ThetaViewWrapper extends ThetaView {

    constructor(){
        super();
        this._canvasNum = 0;
        this._videoDOM;
        this._subCamera = [];
        this._subRenderer = [];
        this._subScene = [];
    }

    start(videoDOM) {
        super.start(videoDOM);
        this._videoDOM = videoDOM;
        // 魚眼モードを表示
        this._videoDOM.style.display = 'block';
    }

    _animate() {
        super._animate();

        for(var i=0; i < this._canvasNum; i++) {
            this._subCamera[i].rotation.y = i * 0.785;
            this._subRenderer[i].render(this._scene, this._subCamera[i]);
        }
    }

    _addSubView(canvas) {
        var i = this._canvasNum;
        const w = this._container.clientWidth;
        const h = this._container.clientHeight;
        this._subCamera[i] = new THREE.PerspectiveCamera(75, w / h, 1, 1100);
        this._subCamera[i].target = new THREE.Vector3(0, 0, 0);
        this._subRenderer[i] = new THREE.WebGLRenderer({"canvas": canvas});
        this._canvasNum++;
    }
}

let viewer = document.getElementById('viewer');
let thetaview = new ThetaViewWrapper();
let canvasList = [];
let localStream;
startVideo();

function startVideo() {

    navigator.mediaDevices.getUserMedia({video: true, audio: false})
    .then(function (stream) { // success
        localStream = stream;
        thetaview.setContainer(viewer);
        viewer.firstChild.src = window.URL.createObjectURL(localStream);
        thetaview.start(viewer.firstChild);

        // subview
        thetaview._addSubView(document.getElementById('subView1'));
        thetaview._addSubView(document.getElementById('subView2'));
        thetaview._addSubView(document.getElementById('subView3'));
        thetaview._addSubView(document.getElementById('subView4'));

    }).catch(function (error) { // error
        console.error('mediaDevice.getUserMedia() error:', error);
        return;
    });
}
</script>
</html>
	<!doctype html>
	<html>
	<head>
	<title>Camera Sample</title>
	<style>
	#viewer {
	width: 720px;
	height: 480px;
	position: relative;
	background-color: #000000;
	}
	.subview {
	width: 25%;
	height: 20%;
	position: absolute;
	}
	</style>
	</head>
	<body>
	<div id="viewer"><video id="mainView" style="width:720px" autoplay></video>
	<canvas id="subView1" class="subview" style="left: 0%"></canvas>
	<canvas id="subView2" class="subview" style="left: 25%"></canvas>
	<canvas id="subView3" class="subview" style="left: 50%"></canvas>
	<canvas id="subView4" class="subview" style="left: 75%"></canvas>
	</div>
	</body>
	<script src="three.min.js"></script>
	<script src="thetaview.js"></script>

	<script type="text/javascript">
	class ThetaViewWrapper extends ThetaView {

	constructor(){
	super();
	this._canvasNum = 0;
	this._videoDOM;
	this._subCamera = [];
	this._subRenderer = [];
	this._subScene = [];
	}

	start(videoDOM) {
	super.start(videoDOM);
	this._videoDOM = videoDOM;
	// 魚眼モードを表示
	this._videoDOM.style.display = 'block';
	}

	_animate() {
	super._animate();

	for(var i=0; i < this._canvasNum; i++) {
	this._subCamera[i].rotation.y = i * 0.785;
	this._subRenderer[i].render(this._scene, this._subCamera[i]);
	}
	}

	_addSubView(canvas) {
	var i = this._canvasNum;
	const w = this._container.clientWidth;
	const h = this._container.clientHeight;
	this._subCamera[i] = new THREE.PerspectiveCamera(75, w / h, 1, 1100);
	this._subCamera[i].target = new THREE.Vector3(0, 0, 0);
	this._subRenderer[i] = new THREE.WebGLRenderer({"canvas": canvas});
	this._canvasNum++;
	}
	}

	let viewer = document.getElementById('viewer');
	let thetaview = new ThetaViewWrapper();
	let canvasList = [];
	let localStream;
	startVideo();

	function startVideo() {

	navigator.mediaDevices.getUserMedia({video: true, audio: false})
	.then(function (stream) { // success
	localStream = stream;
	thetaview.setContainer(viewer);
	viewer.firstChild.src = window.URL.createObjectURL(localStream);
	thetaview.start(viewer.firstChild);

	// subview
	thetaview._addSubView(document.getElementById('subView1'));
	thetaview._addSubView(document.getElementById('subView2'));
	thetaview._addSubView(document.getElementById('subView3'));
	thetaview._addSubView(document.getElementById('subView4'));

	}).catch(function (error) { // error
	console.error('mediaDevice.getUserMedia() error:', error);
	return;
	});
	}
	</script>
	</html>