<span style=
"color: #0000ff"
><</span><span style=
"color: #800000"
>input </span><span style=
"color: #ff0000"
>type</span><span style=
"color: #0000ff"
>=
"button"
</span><span style=
"color: #ff0000"
> value</span><span style=
"color: #0000ff"
>=
"OpenVideo"
</span><span style=
"color: #ff0000"
> id</span><span style=
"color: #0000ff"
>=
"btnOpenVideo"
</span> <span style=
"color: #0000ff"
>/></span><span style=
"color: #0000ff"
><</span><span style=
"color: #800000"
>input </span><span style=
"color: #ff0000"
>type</span><span style=
"color: #0000ff"
>=
"button"
</span><span style=
"color: #ff0000"
> value</span><span style=
"color: #0000ff"
>=
"TakePicture"
</span><span style=
"color: #ff0000"
> id</span><span style=
"color: #0000ff"
>=
"btnTakePicture"
</span> <span style=
"color: #0000ff"
>/></span><span style=
"color: #0000ff"
><</span><span style=
"color: #800000"
>input </span><span style=
"color: #ff0000"
>type</span><span style=
"color: #0000ff"
>=
"button"
</span><span style=
"color: #ff0000"
> value</span><span style=
"color: #0000ff"
>=
"CloseVideo"
</span><span style=
"color: #ff0000"
> id</span><span style=
"color: #0000ff"
>=
"btnCloseVideo"
</span> <span style=
"color: #0000ff"
>/></span><span style=
"color: #0000ff"
><</span><span style=
"color: #800000"
>br </span><span style=
"color: #0000ff"
>/></span><span style=
"color: #0000ff"
><</span><span style=
"color: #800000"
>video </span><span style=
"color: #ff0000"
>style</span><span style=
"color: #0000ff"
>=
"width:500px;height:500px;border:1px solid #000000;"
</span><span style=
"color: #ff0000"
> id</span><span style=
"color: #0000ff"
>=
"videoTest"
</span><span style=
"color: #0000ff"
>></</span><span style=
"color: #800000"
>video</span><span style=
"color: #0000ff"
>></span><span style=
"color: #0000ff"
><</span><span style=
"color: #800000"
>canvas </span><span style=
"color: #ff0000"
>style</span><span style=
"color: #0000ff"
>=
"width:500px;height:500px;border:1px solid #000000;"
</span><span style=
"color: #ff0000"
> id</span><span style=
"color: #0000ff"
>=
"canvasTest"
</span><span style=
"color: #0000ff"
>></</span><span style=
"color: #800000"
>canvas</span><span style=
"color: #0000ff"
>></span><span style=
"color: #0000ff"
><</span><span style=
"color: #800000"
>script </span><span style=
"color: #ff0000"
>type</span><span style=
"color: #0000ff"
>=
"text/javascript"
</span><span style=
"color: #0000ff"
>></span><span style=
"background-color: #f5f5f5; color: #000000"
> window.onload </span><span style=
"background-color: #f5f5f5; color: #000000"
>=</span> <span style=
"background-color: #f5f5f5; color: #0000ff"
>
function
</span><span style=
"background-color: #f5f5f5; color: #000000"
> () {
let btnOpenVideo </span><span style=
"background-color: #f5f5f5; color: #000000"
>=</span><span style=
"background-color: #f5f5f5; color: #000000"
> document.getElementById(</span><span style=
"background-color: #f5f5f5; color: #000000"
>
'</span><span style="background-color: #f5f5f5; color: #000000">btnOpenVideo</span><span style="background-color: #f5f5f5; color: #000000">'
</span><span style=
"background-color: #f5f5f5; color: #000000"
>);
let btnTakePicture </span><span style=
"background-color: #f5f5f5; color: #000000"
>=</span><span style=
"background-color: #f5f5f5; color: #000000"
> document.getElementById(</span><span style=
"background-color: #f5f5f5; color: #000000"
>
'</span><span style="background-color: #f5f5f5; color: #000000">btnTakePicture</span><span style="background-color: #f5f5f5; color: #000000">'
</span><span style=
"background-color: #f5f5f5; color: #000000"
>);
let btnCloseVideo </span><span style=
"background-color: #f5f5f5; color: #000000"
>=</span><span style=
"background-color: #f5f5f5; color: #000000"
> document.getElementById(</span><span style=
"background-color: #f5f5f5; color: #000000"
>
'</span><span style="background-color: #f5f5f5; color: #000000">btnCloseVideo</span><span style="background-color: #f5f5f5; color: #000000">'
</span><span style=
"background-color: #f5f5f5; color: #000000"
>);
let video </span><span style=
"background-color: #f5f5f5; color: #000000"
>=</span><span style=
"background-color: #f5f5f5; color: #000000"
> document.getElementById(</span><span style=
"background-color: #f5f5f5; color: #000000"
>
'</span><span style="background-color: #f5f5f5; color: #000000">videoTest</span><span style="background-color: #f5f5f5; color: #000000">'
</span><span style=
"background-color: #f5f5f5; color: #000000"
>);
</span><span style=
"background-color: #f5f5f5; color: #000000"
><span style=
"color: #0000ff"
>let</span></span><span style=
"background-color: #f5f5f5; color: #000000"
> canvas </span><span style=
"background-color: #f5f5f5; color: #000000"
>=</span><span style=
"background-color: #f5f5f5; color: #000000"
> document.getElementById(</span><span style=
"background-color: #f5f5f5; color: #000000"
>
'</span><span style="background-color: #f5f5f5; color: #000000">canvasTest</span><span style="background-color: #f5f5f5; color: #000000">'
</span><span style=
"background-color: #f5f5f5; color: #000000"
>).getContext(</span><span style=
"background-color: #f5f5f5; color: #000000"
>
'</span><span style="background-color: #f5f5f5; color: #000000">2d</span><span style="background-color: #f5f5f5; color: #000000">'
</span><span style=
"background-color: #f5f5f5; color: #000000"
>);
btnOpenVideo.onclick </span><span style=
"background-color: #f5f5f5; color: #000000"
>=</span> <span style=
"background-color: #f5f5f5; color: #0000ff"
>
function
</span><span style=
"background-color: #f5f5f5; color: #000000"
> () {
window.navigator.getUserMedia({
video: </span><span style=
"background-color: #f5f5f5; color: #0000ff"
>true<span style=
"color: #008000"
>
</span><br> <span style=
"color: #008000"
>
</span></span><span style=
"background-color: #f5f5f5; color: #000000"
> }, </span><span style=
"background-color: #f5f5f5; color: #0000ff"
>
function
</span><span style=
"background-color: #f5f5f5; color: #000000"
> (param) {
video.src </span><span style=
"background-color: #f5f5f5; color: #000000"
>=</span><span style=
"background-color: #f5f5f5; color: #000000"
> window.URL.createObjectURL(param);<span style=
"color: #008000"
>
</span> btnCloseVideo.onclick </span><span style=
"background-color: #f5f5f5; color: #000000"
>=</span> <span style=
"background-color: #f5f5f5; color: #0000ff"
>
function
</span><span style=
"background-color: #f5f5f5; color: #000000"
> () {<span style=
"color: #008000"
>
</span> </span><span style=
"background-color: #f5f5f5; color: #0000ff"
>
if
</span><span style=
"background-color: #f5f5f5; color: #000000"
> (param.getTracks())<span style=
"color: #008000"
>
</span> param.getTracks()[</span><span style=
"background-color: #f5f5f5; color: #000000"
>0</span><span style=
"background-color: #f5f5f5; color: #000000"
>].stop();
</span><span style=
"background-color: #f5f5f5; color: #0000ff"
>
else
</span><span style=
"background-color: #f5f5f5; color: #000000"
> param.stop();
};
btnTakePicture.onclick </span><span style=
"background-color: #f5f5f5; color: #000000"
>=</span> <span style=
"background-color: #f5f5f5; color: #0000ff"
>
function
</span><span style=
"background-color: #f5f5f5; color: #000000"
> () {<span style=
"color: #008000"
>
</span> canvas.drawImage(document.getElementById(</span><span style=
"background-color: #f5f5f5; color: #000000"
>
'</span><span style="background-color: #f5f5f5; color: #000000">videoTest</span><span style="background-color: #f5f5f5; color: #000000">'
</span><span style=
"background-color: #f5f5f5; color: #000000"
>), </span><span style=
"background-color: #f5f5f5; color: #000000"
>0</span><span style=
"background-color: #f5f5f5; color: #000000"
>, </span><span style=
"background-color: #f5f5f5; color: #000000"
>0</span><span style=
"background-color: #f5f5f5; color: #000000"
>, </span><span style=
"background-color: #f5f5f5; color: #000000"
>500</span><span style=
"background-color: #f5f5f5; color: #000000"
>, </span><span style=
"background-color: #f5f5f5; color: #000000"
>500</span><span style=
"background-color: #f5f5f5; color: #000000"
>);<span style=
"color: #008000"
>
</span> };
}, </span><span style=
"background-color: #f5f5f5; color: #0000ff"
>
function
</span><span style=
"background-color: #f5f5f5; color: #000000"
> (err) {
alert(err);
});
};
};</span><span style=
"color: #0000ff"
></</span><span style=
"color: #800000"
>script</span><span style=
"color: #0000ff"
>></span>