JSを使ってローカルカメラ機能を呼び出す手順を詳しく解説
今回はJSでローカルカメラ関数を呼び出す手順を詳しく解説します。JSでローカルカメラ関数を呼び出す際の注意点を実際に見てみましょう。
今日は、js を使用してローカル カメラを呼び出す方法を学びました。実際、次のコード部分は Tomcat サーバーに接続し、Web ページで開きます。効果。 。ぜひ遊びに来てください！
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<style>
video {
border: 1px solid #ccc;
display: block;
margin: 0 0 20px 0;
float:left;
}
canvas {
margin-top: 20px;
border: 1px solid #ccc;
display: block;
}
</style>
</head>
<body>
<video width="640" height="480" id="myVideo"></video>
<canvas width="640" height="480" id="myCanvas"></canvas>
<button id="myButton">截图</button>
<button id="myButton2">预览</button>
<button id="myButton3">
<a download="video.png">另存为</a>
</button>
</body>
<script>
window.addEventListener('DOMContentLoaded',function(){
var cobj=document.getElementById('myCanvas').getContext('2d');
var vobj=document.getElementById('myVideo');
getUserMedia({video:true},function(stream){
vobj.src=stream;
vobj.play();
},function(){});
document.getElementById('myButton').addEventListener('click',function(){
cobj.drawImage(vobj,0,0,640,480);
document.getElementById('myButton3').children[0].href=cobj.canvas.toDataURL("image/png");
},false);
document.getElementById('myButton2').addEventListener('click',function(){
window.open(cobj.canvas.toDataURL("image/png"),'_blank');
},false);
},false);
function getUserMedia(obj,success,error){
if(navigator.getUserMedia){
getUserMedia=function(obj,success,error){
navigator.getUserMedia(obj,function(stream){
success(stream);
},error);
}
}else if(navigator.webkitGetUserMedia){
getUserMedia=function(obj,success,error){
navigator.webkitGetUserMedia(obj,function(stream){
var _URL=window.URL || window.webkitURL;
success(_URL.createObjectURL(stream));
},error);
}
}else if(navigator.mozGetUserMedia){
getUserMedia=function(obj,success,error){
navigator.mozGetUserMedia(obj,function(stream){
success(window.URL.createObjectURL(stream));
},error);
}
}else{
return false;
}
return getUserMedia(obj,success,error);
}
</script>
</html>この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。
推奨読書:
JS でオブジェクト プロパティによる json オブジェクト配列の並べ替えを実装する手順の詳細な説明
以上がJSを使ってローカルカメラ機能を呼び出す手順を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7509
15
1378
52
78
11
19
63
WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法
Dec 17, 2023 pm 02:54 PM
WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法 はじめに: 技術の継続的な発展により、音声認識技術は人工知能の分野の重要な部分になりました。 WebSocket と JavaScript をベースとしたオンライン音声認識システムは、低遅延、リアルタイム、クロスプラットフォームという特徴があり、広く使用されるソリューションとなっています。この記事では、WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法を紹介します。
Windows Hello のサポートされていないカメラの問題を解決する方法
Jan 05, 2024 pm 05:38 PM
Windows Shello を使用しているときに、対応しているカメラが見つからない場合は、使用しているカメラが顔認証に対応していない、カメラドライバーが正しくインストールされていないなどが原因として考えられますので、設定方法を見てみましょう。 Windowshello でサポートされているカメラ チュートリアルが見つかりません: 理由 1: カメラ ドライバーが正しくインストールされていません 1. 一般的に、Win10 システムはほとんどのカメラのドライバーを自動的にインストールできます。次のように、カメラを接続した後に通知が表示されます; 2.このとき、デバイスを開き、マネージャーでカメラドライバーがインストールされているかどうかを確認し、インストールされていない場合は手動で行う必要があります。 WIN+X、次にデバイス マネージャーを選択します; 3. デバイス マネージャー ウィンドウでカメラ オプションを展開すると、カメラ ドライバー モデルが表示されます。
WebSocket と JavaScript: リアルタイム監視システムを実装するための主要テクノロジー
Dec 17, 2023 pm 05:30 PM
WebSocketとJavaScript：リアルタイム監視システムを実現するためのキーテクノロジー はじめに： インターネット技術の急速な発展に伴い、リアルタイム監視システムは様々な分野で広く利用されています。リアルタイム監視を実現するための重要なテクノロジーの 1 つは、WebSocket と JavaScript の組み合わせです。この記事では、リアルタイム監視システムにおける WebSocket と JavaScript のアプリケーションを紹介し、コード例を示し、その実装原理を詳しく説明します。 1.WebSocketテクノロジー
Win11 カメラの問題の解決策: Win11 カメラが動作しない問題を解決する 4 つの方法
Jan 29, 2024 pm 12:03 PM
カメラはコンピュータを使用するときにビデオチャットを行うのに役立つツールですが、win11 システムを使用しているときにカメラが使用できないことに多くのユーザーが気づきました。ユーザーはトラブルシューティング ツールに移動して、カメラの操作許可を設定または確認できます。このサイトでは、Win11 カメラが使用できない問題に対する 4 つの解決策をユーザーに丁寧に紹介します。 Win11 カメラが動作しない場合の 4 つの解決策 解決策 1. 内蔵のトラブルシューティング ツールを使用する 1. + を押して設定を開き、システム タブの [トラブルシューティング] をクリックします。 Windows I4 の場合は、画面上の指示に従ってトラブルシューティング プロセスを完了し、推奨される変更を加えます。 5. 使用する
JavaScript と WebSocket を使用してリアルタイムのオンライン注文システムを実装する方法
Dec 17, 2023 pm 12:09 PM
JavaScript と WebSocket を使用してリアルタイム オンライン注文システムを実装する方法の紹介: インターネットの普及とテクノロジーの進歩に伴い、ますます多くのレストランがオンライン注文サービスを提供し始めています。リアルタイムのオンライン注文システムを実装するには、JavaScript と WebSocket テクノロジを使用できます。 WebSocket は、TCP プロトコルをベースとした全二重通信プロトコルで、クライアントとサーバー間のリアルタイム双方向通信を実現します。リアルタイムオンラインオーダーシステムにおいて、ユーザーが料理を選択して注文するとき
カメラの開き方. Win7 カメラの開き方を教えます。
Jan 11, 2024 pm 07:48 PM
「Win7システムではカメラのショートカットが見つからない。プログラムからしかカメラ機能を呼び出すことができない。裏話を知らない人は、カメラドライバーがインストールされていないと思うので、 Win7ユーザーの皆様がカメラを使用する際、大変ご迷惑をおかけしております。次に、エディターは Win7 カメラを開く方法に関するチュートリアルを提供します。ノートパソコンを使用しているユーザーは皆、ノートパソコンにカメラ機能が内蔵されていることを知っていますが、カメラを接続する必要があるデスクトップコンピュータとは異なり、ノートパソコンのwin7システムで直接カメラを開いて使用することができ、非常に便利です。ただし、一部のユーザーは通常、それを探索しようとせず、さまざまな方法を試しても失敗します。次に、エディターが Win7 カメラを開く方法を説明します。
ローカル音楽をソーダミュージックに追加する方法
Feb 23, 2024 pm 07:13 PM
ローカル音楽を Soda Music に追加する方法? Soda Music APP にお気に入りのローカル音楽を追加できますが、ほとんどの友達はローカル音楽の追加方法を知りません。次は、Soda Music にローカル音楽を追加する方法に関するグラフィック チュートリアルです。編集者、興味のある方はぜひ見に来てください！ソーダ ミュージックの使用に関するチュートリアル. ソーダ ミュージックにローカル音楽を追加する方法. 1. まずソーダ ミュージック APP を開き、メイン ページの下部にある [音楽] 機能エリアをクリックします; 2. 次に、再生ページに入り、 をクリックします右下隅の [3 つの点] アイコン; 3. 最後に、下の機能バーを展開し、[ダウンロード] ボタンを選択してローカル音楽に追加します。
win10テストカメラ
Feb 12, 2024 pm 08:45 PM
1. まずカメラの許可がオンになっているかどうかを確認します。 「wini」ショートカット キーを押すと設定ウィンドウが開き、プライバシー エントリをクリックして下のカメラを表示します。左側の列でカメラを見つけます。右側にはアクセスがオフになっていると表示されます。 「オープンに変更」をクリックします。 Cortana の検索ボックスに「カメラ」と入力し、コンピューターのカメラを開きます。右クリックしてスタート画面またはタスクバーにピン留めすることもできます。エディターにはカメラがインストールされていないため、このインターフェイスを表示できません。カメラがインストールされているのに表示されない場合は、ドライバーが欠落している可能性があります。カメラがインストールされていない場合、イメージング デバイスはデバイス マネージャーで見つかりません。この場合、ネットワーク カード デバイスをデモンストレーションとして使用できます。次の手順に従います。 [この PC] を右クリックし、[管理] を選択して、[デバイス マネージャー] を展開します。リストからネットを検索
