Recently a project need points screen displays real-time video, don't know how to hai kang video links into the canvas object,

 
The class UILayout 
{
The static SetScreenNumber (num) {
UILayout. ScreenNumber=num; 
} 

The static GetScreenNumber () {
Return UILayout. ScreenNumber; 
} 

The static SetContainer (id) {
UILayout. Container=document. GetElementById (id); 
} 

The static GetContainer () {
Return UILayout. Container; 
} 

The static SetVideoWith (VideoWidth) {
UILayout. VideoWidth=VideoWidth; 
} 

The static GetVideoWith () {
Return UILayout. VideoWidth; 
} 

The static SetVideoHeight (VideoHeight) {
UILayout. VideoHeight=VideoHeight; 
} 

The static GetVideoHeight () {
Return UILayout. VideoHeight; 
} 

The static SetSelectVideoIndex (index) {
UILayout. SelectVideoIndex=index; 
} 

The static GetSelectVideoIndex () {
Return UILayout. SelectVideoIndex; 
} 

The static Init (id, screenNums) 
{
UILayout. SetContainer (id); 
UILayout. SetScreenNumber (screenNums); 
UILayout. SetVideoWith (352); 
UILayout. SetVideoHeight (288); 
UILayout. SetSelectVideoIndex (1); 
UILayout. CreateCanvas (); 
UILayout. LayoutScreens (screenNums); 
} 

The static CreateCanvas () {
For (var I=1; i <=32; I++) {
//show the canvas 
var canvas=document.createElement('canvas'); 
Canvas. Width=UILayout. GetVideoWith (); 
Canvas. Height=UILayout. GetVideoHeight (); 
Canvas. Style. Border="1 px solid black"; 
Canvas. Style. CssFloat="left"; 
This. The Container. Append (canvas); 

Var CTX=canvas. GetContext (' 2 d '); 
CTX. FillStyle="gray"; 
CTX. FillRect (1, 1, canvas width, canvas, height); 
} 
} 

The static ContainsScreen (num) {
Var screens=[1, 4, 6, 8, 9, 10,16,24,32]; 
For (var I=0; i If (screens [I]==num) {
return true; 
} 
} 
return false; 
} 

The static LayoutScreens (num) {
If (num==undefined) {
The console. The log (" LayoutScreens num is undefined "); 
} else if (! UILayout. ContainsScreen (num)) {
The console. The log (" LayoutScreens num is not in [1, 4, 6, 8,9,10,16,24,32] "); 
return; 
} else {
Enclosing ScreenNumber=num; 
} 

For (var I=1; i <=this. Container. ChildElementCount; I++) {
Var video=this. The Container. The.childnodes. Item (I); 
Video. The index=I; 
Video. Style. Margin="1 px"; 
Video. ParentContainer=this. The Container; 
Video. The onclick=function () {
UILayout. SelectVideoIndex=this. The index; 
Alert (UILayout. SelectVideoIndex); 
For (var I=1; i <=this. ParentContainer. ChildElementCount; I++) {
If (I===UILayout. SelectVideoIndex) {
This. Style. Border="1 px solid # 00 ff00"; 
} else {
Enclosing parentContainer..childnodes. Item (I). The style.css. Border="1 px solid black"; 
} 
} 
}; 

If (this. ScreenNumber & lt; I) {
Video. Style. The display="none"; 
} else {
Video. Style. The display="block"; 
} 

} 

Var width=parseInt (this) Container) style. The width, the replace (" px ", "")); 
Var height=parseInt (this. Container. Style. Height. The replace (" px ", "")); 
var count=0; 
For (var I=1; i <=this. Container. ChildElementCount; I++) {
Var video=this. The Container. The.childnodes. Item (I); 
If (this. ScreenNumber==1 & amp; & Video. The index==1) {
Video. Style. The width=(width - 5) + "px"; 
Video. Style. Height=(height - 5) + "px"; 
count++; 
} else if (this. ScreenNumber==4 & amp; & Video. The index & lt; {
=4)Video. Style. The width=(width/2-5) + "px"; 
Video. Style. Height=(height/2-5) + "px"; 
count++; 
} else if (this. ScreenNumber==6 & amp; & Video. The index & lt; {
=6)If (video index==1) {
Video. Style. The width=(width/3 * 2-6) + "px"; 
Video. Style. Height=(height/3 * 2-5) + "px"; 
} else {
Video. Style. The width=(width/3-5) + "px"; 
Video. Style. Height=(height/3-2) + "px"; 
} 
If (video index==6) 
{
Video. Style. CssFloat="right"; 
Video. Style. MarginRight="3 p"; 
} 
count++; 
} else if (this. ScreenNumber==8 & amp; & Video. The index & lt; {
=8)If (video index==1) {
Video. Style. The width=(width/4 * 3-4) + "px"; 
Video. Style. Height=(height/4 * 3 to 7) + "px"; 
} else {
Video. Style. The width=(width/4 to 5) + "px"; 
Video. Style. Height=(height/4-3) + "px"; 
} 
If (video index==8) 
{
Video. Style. CssFloat="right"; 
Video. Style. MarginRight="3 p"; 
} 
count++; 
} else if (this. ScreenNumber==9 & amp; & Video. The index & lt;=9) {
Video. Style. The width=(width/3-5) + "px"; 
Video. Style. Height=(height/3-5) + "px"; 
count++; 
} else if (this. ScreenNumber==10 & amp; & Video. The index & lt;=10) {
If (video index==1) {
Video. Style. The width=(width/5 * 4-5) + "px"; nullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnull