h5頁面如何呼叫攝影機程式碼分享
html5
網路攝影機
呼叫
<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>登入後複製
#
以上是h5頁面如何呼叫攝影機程式碼分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
Windows 11 KB5054979中的新功能以及如何解決更新問題
4 週前
By DDD
如何修復KB5055523無法在Windows 11中安裝？
3 週前
By DDD
如何修復KB5055518無法在Windows 10中安裝？
3 週前
By DDD
R.E.P.O.的每個敵人和怪物的力量水平
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
藍王子：如何到達地下室
3 週前
By DDD
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
