Q&A
alert先では？
ただ、その動画はその端末やブラウザで再生可能な拡張子、形式なのでしょうか。
提示のコードだけではなんの動画を投入しようとしているのか不明ですね。
html上からスマホのカメラにアクセスするためのサンプルを作成しました。
実行するとカメラへのアクセス確認メッセージが表示され、「許可」を押すとvideoタグは表示されているのですが、
黒いままで何も表示されません。
以下のコードの、「video.play()」までは正常に実行されています。
他に確認すべき点があれば教えていただきたいと思います。
- 環境
スマホ：iPhone12
ブラウザ：safari,chrome
html
1<!doctype html> 2<html> 3 <body> 4 <video id="video"></video> 5 </body> 6 <script type="text/javascript"> 7 var constraints = { audio: true, video: { width: 1280, height: 720 ,facingMode:"user"} }; 8 9 navigator.mediaDevices.getUserMedia(constraints) 10 .then(function(mediaStream) { 11 var video = document.querySelector('video'); 12 video.srcObject = mediaStream; 13 video.onloadedmetadata = function(e) { 14 video.play(); 15 alert("start play") 16 }; 17 }) 18 .catch(function(err) { alert(err.name + ": " + err.message); }); 19 20 </script> 21</html>
動画ファイルを再生したいというより、カメラからの映像を同期したい、という感じです。
https://blog.katsubemakito.net/html5/camera1
こちらを参考にしまして、作成しました。
リンク先では
①videoタグ内にカメラ映像が写り続け
②シャッターボタンを押すと隣のCanvasにその瞬間の画像が書き込まれる
というものになっています。
私のソースはとりあえず①を実行するために抜粋したものですが、カメラ映像が表示されないんです。
リンク先に提示されているサンプルページを実行しても、Canvasに映像はキャプチャされるものの、
それまでの映像が表示されません。
videoタグとカメラのストリームは接続できているのに、肝心の映像データが流れてこないのかな」
という認識です。
回答1件
0
自己解決
実機がAndroidの場合はちゃんと動作しました。
iOS側の問題として調べたところ、「playsinline」属性が必要（？）
とのことで追記したら動きました。
HTML
1<video id="video" playsinline></video>コード
投稿2021/02/08 08:42
総合スコア2
あなたの回答
tips
プレビュー
