Q&A
まずは正しいHTMLに直しましょう。
前提・実現したいこと
自分の端末から遠くのカメラ映像を表示させたい。
発生している問題・エラーメッセージ
画面の装飾は出来たのですが、肝心な「遠くのカメラ映像を表示」する事が出来ません。
現在はデバイスについているカメラ映像を表示する様になっています。
webcameraは買ってあります。
下の写真の枠の中に入る様にお願いします。
該当のソースコード
写真のソースコード
HTML
1<html> 2<font size="8" color="#ff0000"> 3<p class="text_center">CLANE STAR ONLINE 4 <hr size="5"> 5<html lang="ja"> 6<head> 7 8<meta charset="utf-8"> 9<link rel="stylesheet" href="./style.css"> 10</head> 11<body> <form action="http://localhost/clane/online/home.html"method="post"> 12<input type="image" src="http://localhost/clane/online/image/home.jpg" alt=" "></p> 13<meta http-equiv="content-type" charset="utf-8"> 14<head> 15<body bgcolor="#4169e1"> 16<font size="8" color="#ff0000"> 17 18<title>CLANE STAR ONLINE</title> 19 20 21</body> 22</html> 23 24 25 26 <div id="videoPreview"> 27 <p> 28 <font size="3" color="000000"> 29 現在接続状況 30 <font size="3" color="ff0000"> 31 良好 32</div> 33 34 35 36 37 38<html> 39<head> 40 41 42 <style> 43 canvas, video{ 44 border: 1px solid gray; 45 } 46 </style> 47</head> 48<body> 49 50 51 52 <video id="camera" width="500" height="500"></video> 53 54 55 56<script> 57window.onload = () => { 58 const video = document.querySelector("#camera"); 59 const canvas = document.querySelector("#picture"); 60 const se = document.querySelector('#se'); 61 62 63 const constraints = { 64 audio: false, 65 video: { 66 width: 300, 67 height: 200, 68 facingMode: "user" 69 70 } 71 }; 72 73 74 navigator.mediaDevices.getUserMedia(constraints) 75 .then( (stream) => { 76 video.srcObject = stream; 77 video.onloadedmetadata = (e) => { 78 video.play(); 79 }; 80 }) 81 .catch( (err) => { 82 console.log(err.name + ": " + err.message); 83 }); 84 85 86 document.querySelector("#shutter").addEventListener("click", () => { 87 const ctx = canvas.getContext("2d"); 88 89 90 video.pause(); 91 se.play(); 92 setTimeout( () => { 93 video.play(); 94 }, 500); 95 96 ctx.drawImage(video, 0, 0, canvas.width, canvas.height); 97 }); 98}; 99</script> 100</body> 101</html>
HTML PHP ### 試したこと youtubeのライブ映像をHtmlの埋め込みコードを使い表示させてみました。 何回も埋め込みコードを入れるのは大変なので他に方法はないかとこちらで質問させていただきます。
僕はこのプログラムで上手く行きました。
問題点はどこですか？
質問に提示のコードはこれで一つのファイルですよね？
ツッコミどころが多すぎて私の手には負えません。
http://www.htmllint.net/html-lint/htmllint.html
一度チェックしてみては。
DATAタブに切り替え、現在のコードを張り付けて「チェック」してみてください。
> 「遠くのカメラ映像を表示」
「遠くのカメラ」というのがどういうものなのかよくわかりませんが
まずは「近くのカメラ映像を表示」から頑張ってみては？
(近く：同一LAN内とか・・・)
回答1件
0
自分の端末、がどこにあり、
遠くのカメラ、がどこにあるのか、
その経路はどうなっているのか、次第になります。
カメラができることしかできないので、
まずはカメラの仕様やスペックを確認。
自宅や職場などLAN側に置かれるカメラの場合、
インターネット側に公開するためにルーター上で
ポートフォワーディングとかDMZ指定とかいろいろあるし。
ルーターの問題を乗り越えたあとは、
カメラが対応できるHTMLやjsの記述を施せば公開できるかもしれないけど。
検討するにもなんら技術的な情報が見えてこないから、
実現できるようお祈り申し上げます。
投稿2020/02/10 08:46
退会済みユーザー
総合スコア0
あなたの回答
tips
プレビュー
