<meta
charset=
"UTF-8"
>
<meta
name=
"viewport"
content=
"width=device-width, initial-scale=1.0"
/>
<script
src=
"https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"
></script>
<title>
getUserMedia test
</title>
</head>
<video
id=
"video"
autoplay=
"true"
></video>
<script>
var
video
=
document
.
querySelector
(
"
#video
"
);
if
((
navigator
.
mediaDevices
&&
navigator
.
mediaDevices
.
getUserMedia
))
{
navigator
.
mediaDevices
.
getUserMedia
({
video
:
true
,
audio
:
false
.
then
(
function
(
stream
)
{
video
.
srcObject
=
stream
;
video
.
play
();
.
catch
(
function
(
err
)
{
console
.
log
(
"
你拒絕使用相機：
"
+
err
);
}
else
{
console
.
log
(
"
您的瀏覽器不支援影像功能
"
);
</script>
</body>
</html>
要注意的是相機與麥克風涉及隱私, 因此 Media Streaming API 只能在本機檔案或是透過 https 加密協定取得的網頁內運作, 如果在 http 未加密協定取得的網頁內,
navigator.mediaDevices
會是
undefined
, 就無法叫用
getUserMedia()
取用相機了。
以上的示範網頁雖然可以正常運作, 不過在 iOS 上卻會遇到相機畫面鎖死, 完全不會更新：
Built on
Forem
— the
open source
software that powers
DEV
and other inclusive communities.
Made with love and
Ruby on Rails
. DEV Community
©
2016 - 2024.
