H5 page call camera (simple version), h5 page call camera
<Input type = "button" value = "OpenVideo" id = "btnOpenVideo"/> <input type = "button" value = "TakePicture" id = "btnTakePicture"/> <input type = "button" value = "CloseVideo" id = "btnCloseVideo"/> <br/> <video style = "width: 500px; height: 500px; border: 1px solid #000000; "id =" videoTest "> </video> <canvas style =" width: 500px; height: 500px; border: 1px solid #000000; "id =" canvasTest "> </canvas> <script type =" text/javascript "> window. onload = function () {let btnOpenVideo = document. getElementById ('btnopenvideo'); let btnTakePicture = document. getElementById ('btntakepicture '); let btnCloseVideo = document. getElementById ('btnclosevideo'); let video = document. getElementById ('videotest'); let canvas = document. getElementById ('canonicalastest '). getContext ('2d '); btnOpenVideo. onclick = function () {window. navigator. getUserMedia ({video: true/* video/Camera */
/* Audio: true * // * audio/microphone */}, function (param) {video. src = window. URL. createObjectURL (param);/* set the video control path to display the camera image in real time */btnCloseVideo. onclick = function () {/* Turn off the camera */if (param. getTracks ()/* Chrome */param. getTracks () [0]. stop (); else param. stop () ;}; btnTakePicture. onclick = function () {/* Take a photo */canvas. drawImage (document. getElementById ('videotest'), 0, 0,500,500);/* draw the photo to the canvas */};}, function (err) {alert (err) ;};};</script>