How to call camera code sharing on h5 page

<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">/*audio:true*//*音频/麦克风*/</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">/*设置video控件路径,实时显示摄像头的图像*/</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">/*Chrome*/</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">/*将拍摄的照片画到canvas中*/</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>

 

The above is the detailed content of How to call camera code sharing on h5 page. For more information, please follow other related articles on the PHP Chinese website!