タグ付けされた質問 「javascript」

私はDjangoでWebアプリケーションを開発しました。これは、トリガーされるとユーザーWebカメラを開いて顔を検出するOpevCVコードを含むビューメソッドを備えています。このアプリは私のローカルサーバーで正常に動作しますが、PythonAnywhereでホストした場合、PAホスティングではカメラが機能しないため、カメラが見つからないと表示されます。そのため、クライアントマシンを処理するJavaScriptを介してWebカメラを開き、そのホスティングをホストしているサーバーマシンにフィードを渡すようにと誰かから提案されました。しかし、私はPythonの新人なので、上記のタスクを実行する方法を理解できません。私はこのjsコードを見つけましたが、これを私のDjangoアプリに追加する方法と場所がわかりません。 JavaScriptでフィードを取得するためのコード var video = document.querySelector("#videoElement"); if (navigator.mediaDevices.getUserMedia) { navigator.mediaDevices.getUserMedia({video: true}).then(function(stream) { video.srcObject = stream; }).catch(function(err0r) { console.log("Something went wrong!"); }); } カメラを開いて顔を検出するための私のPythonコードは次のとおりです（ローカルサーバーで動作します） import cv2 cascade = cv2.CascadeClassifier('./haarcascade_frontalface_default.xml') cam = cv2.VideoCapture(0) while True: ret, frame = cam.read() frame = cv2.flip(frame, 1) if ret: gray = cv2.cvtColor(frame, cv2.COLOR_BGR2GRAY) faces = cascade.detectMultiScale(gray, …

8 javascript  django  python-3.x  opencv  pythonanywhere 

理論的な問題について少し述べたいと思います。 私が無限のスクロールを持っていて、ここで説明されているようなものを実装したとします：https : //medium.com/frontend-journeys/how-virtual-infinite-scrolling-works-239f7ee5aa58。特別なことは何もありません。それは、データのテーブル、たとえばNxNであると言えば十分です。ユーザーは、スプレッドシートのように、右下にスクロールでき、現在のビューとマイナスのデータのみを表示します。扱う。 ここで、次のような関数を使用して、そのビューでデータを「フェッチして表示」するのに約10ミリ秒かかるとしましょう。 get_data(start_col, end_col, start_row, end_row); これは、スクロールバーのどこかをクリックするか、必要なデータをレンダリングするために「わずかにスクロール」するときに即座に読み込まれます。ただし、すべての「未完了のフェッチイベント」について、必要なビューデータのレンダリングに2倍の時間がかかると仮定します（メモリ、GC、その他いくつかの理由により）。したがって、ゆっくりと意図的に左から右にスクロールすると、データのロードをトリガーする100以上のスクロールイベントが生成される可能性があります-最初は著しく遅延はありません。フェッチは10ミリ秒未満で発生しますが、すぐに20ミリ秒、次に40ミリ秒かかり、必要なデータをロードするために1秒以上かかるまで、かなりの遅延が発生します。さらに、デバウンス/遅延のようなものは使用できません。 どのような考慮事項を考慮に入れる必要があり、これを実現するためのサンプルアルゴリズムはどのように見えますか？これは、10000 x 10000のスプレッドシート（​​Excelはすべてのデータを一度に読み込むことができます）を想定した、データに対するユーザー操作の例です-https://gyazo.com/0772f941f43f9d14f884b7afeac9f414。

8 javascript  algorithm  performance  canvas  virtualscroll 

文字列内で最も長い単語を見つける方法を知っています。たとえば、このコードはここにあります。しかし、ここでの問題は、「bbbbbb」という単語が見つかったということです。彼が文字列の最初の最長の単語であるためです。その後、6文字で「ジャンプ」という単語も出てきました。私の質問は、この場合と「ジャンプした」という言葉をどのように見つけることができるかです。 更新：一意のリストが必要なので、各単語の1つのみ function longestWord(sentence) { sentence = sentence.split(' '); let theWord = sentence[0]; var longest = 0; for (let i = 0; i < sentence.length; i++) { if (sentence[i] != "") { if (sentence[i].length > theWord.length) { longest = sentence[i].length; theWord = sentence[i]; } } } return { length: longest, …

8 javascript  arrays  string 

ネストされたメニューとサブメニューを作成していますが、すべてが今のところ完了しています。指定されたIDに基づいてデフォルトでこの折りたたみ可能なメニューを開くようにする必要があります。 以下の完全に機能するコードスニペットを確認することもできます。 const loadMenu = () => Promise.resolve([{id:"1",name:"One",children:[{id:"1.1",name:"One - one",children:[{id:"1.1.1",name:"One - one - one"},{id:"1.1.2",name:"One - one - two"},{id:"1.1.3",name:"One - one - three"}]}]},{id:"2",name:"Two",children:[{id:"2.1",name:"Two - one"}]},{id:"3",name:"Three",children:[{id:"3.1",name:"Three - one",children:[{id:"3.1.1",name:"Three - one - one",children:[{id:"3.1.1.1",name:"Three - one - one - one",children:[{id:"3.1.1.1.1",name:"Three - one - one - one - one"}]}]}]}]},{id:"4",name:"Four"},{id:"5",name:"Five",children:[{id:"5.1",name:"Five - one"},{id:"5.2",name:"Five - two"},{id:"5.3",name:"Five - three"},{id:"5.4",name:"Five …

8 javascript  html  reactjs  accordion  reactstrap 

各テストの前にサイプレスでプログラムによるログインを試みています。私のトークンはlocalStorageに保持されます。私がそれを同期的に変更する場合、つまり、localStorage.setItem関与せずに行う単純cy.requestな動作は正常に機能します。ただし、http://localhost:3004/loginトークンを生成するために私の認証サーバー（以下）を使用したいと思います。 トークンはサーバーから正しくフェッチされますが、以下のコマンドを使用してcy.visit('/')「localhost：8080にアクセスできませんでした-このURLにhttpリクエストを送信しようとしましたが、リクエストが応答なしで失敗しました」（以下の完全なログ）。 私の知る限り、これはヘッドレス認証に認証サーバーを使用する場合の正しいアプローチです。私は何を取りこぼしたか？ commands.js Cypress.Commands.add('login', () => { cy.request({ method: 'POST', url: `http://localhost:3004/login`, body: { username: 'foo@bar.com', password: '123' } }).its('body').then((body) => { const vuexData = { user: { authenticationData: { token: body.token } } } window.localStorage.setItem('vuex', JSON.stringify(vuexData)) }) }) test.js describe('A test', () => { beforeEach(() => { cy.login() …

8 javascript  cypress 

Flutter Webアプリケーションを作成して、Seleniumに基づくWeb-UI-Testingフレームワークを活用しようとしています。残念ながら、特定のフラッターウィジェットを表すHTML要素を、そのIDまたは名前属性で識別できません。ウィジェットキーがHTMLドキュメントに存在しません。 テキストウィジェットのコンテンツを使用してウィジェットのテキスト部分を見つけ、テキストを含むウィジェットを表す親要素を見つけることができますが、これは画像やキャンバスなどでは失敗します。 HTMLタグスープにID /名前（またはその他の識別手段）を追加するために使用できるメカニズムはありますか？ JavaScriptを使用して、内部論理ウィジェットツリーをトラバースし、そこから（たとえば、場所とサイズによって）表現するHTML要素を結論付ける方法はありますか？

8 javascript  html  selenium  flutter  flutter-web 

expoアプリへのファイルの共有を処理する方法はありますか？app.jsonのドキュメントによると、を提供することintentFiltersは可能ですが、その後の処理については何も見つかりません。 イジェクトはオプションではありません。

8 javascript  android  react-native  expo 

数時間掘り下げた後、次の問題について誰かが助けてくれることを期待して、SOに関する質問をすることに決めました。 Webアプリケーションの1つとして、Reactサポートライブラリと一緒にOnsen UI jsフレームワークを使用しました 開発環境でアプリケーションをレンダリングしようとすると、すべてが正しく機能しているように見えますが、ステージング環境でそれを試みると、一部のコンポーネントの動作が異なります これまでに見つけたもの：ステージング環境では、一部のHTML属性がDOMに別様に設定されているようです： |----------------|---------------|--------------| | HTML attribute | DEV ENV | STAGING ENV | |----------------|---------------|--------------| | fixed-content | fixed-content | fixedcontent | |----------------|---------------|--------------| | active-index | active-index | index | |----------------|---------------|--------------| このため、OnsenフレームワークはHTML要素の属性を見つけることができず、以下に関係なく異なる動作をします。 私たちは同じブラウザーを使用しています（Chrome、Edge、Firefoxで確認） 両方の環境に同じJSコードがロードされています 環境間の違いは何ですか？ JSファイルは、開発マシンとステージング環境のS3にローカルに保存されます。 ステージング環境で暗号化された接続を使用します Accept-Encodingヘッダーはgzip, deflateローカルとgzip, deflate, brステージングにあります たぶん何か他に探す必要がありますか？ ここで何が起こっているのか誰か知っていますか？

8 javascript  html  reactjs  onsen-ui 

私のjest設定を自分のpackage.jsonから移動したいのですが、ここで提案されているように--configを使用しようとしていますが、エラーが発生しますargv.config.match is not a function package.json "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test --config jest.config.js", "eject": "react-scripts eject", }, cli hutber@hutber-mac:/var/www/management/node$ npm test -u > management-fresh@0.1.0 test /var/www/management/node > react-scripts test --config jest.config.js Usage: test.js [--config=<pathToConfigFile>] [TestPathPattern] argv.config.match is not a function npm ERR! Test failed. …

8 javascript  reactjs  testing  jestjs  create-react-app 

WebRTCの学習の練習として、ローカルWebカメラを表示し、Webカメラの遅延再生を並べて表示しようとしています。これを達成するために、記録されたblobをBufferSourceに渡し、対応するMediaSourceをビデオ要素のソースとして使用しようとしています。 // the ondataavailable callback for the MediaRecorder async function handleDataAvailable(event) { // console.log("handleDataAvailable", event); if (event.data && event.data.size > 0) { recordedBlobs.push(event.data); } if (recordedBlobs.length > 5) { if (recordedBlobs.length === 5) console.log("buffered enough for delayed playback"); if (!updatingBuffer) { updatingBuffer = true; const bufferedBlob = recordedBlobs.shift(); const bufferedAsArrayBuffer …

8 javascript  html  webrtc 

最後の値が常に非常に高いデータセットがあります。これにより、棒グラフで問題が発生します。他のほとんどすべての値は、それらの上にホバリングすることなく感じを得るのは困難です。 これがスクリーンショットです： これは私が達成しようとしていることです。 だから私の質問; これはvanilla Chart.js内で可能ですか、それともプラグインが必要ですか？そしてそうならば; 既存のプラグインはありますか、それとも自分で作成する必要がありますか？ 私はまた、最初の問題に対する別の解決策を用意しています。 私はインターネット全体でこのようなものを探しましたが、残念ながらあまり運がありませんでした。

8 javascript  charts  chart.js 

このiframe予約フォームでメールフィールドを選択しようとしています。最終的にはフィールドで別のことをしたいのですが、今のところテストとして、要素を選択してプレースホルダーを変更したいだけです。 このエラーが発生したため、正しく選択していません：Uncaught TypeError：HTMLButtonElement.changeCopyでnullのプロパティ 'placeholder'を設定できません ここで私のコードのライブバージョンを表示し、上部のボタンをクリックするとコンソールにエラーが表示されます。https：//finnpegler.github.io/cart_recover/ 以下のスニペットとしてコードも含めましたが、クロスオリジンフレームで行うと別のエラーがスローされます。 var iframe = document.getElementById("booking-widget-iframe"); var field = iframe.contentWindow.document.querySelector("booking[email]"); function changeCopy() { field.placeholder = "hello"; } document.getElementById("button").addEventListener("click", changeCopy) <!DOCTYPE html> <html lang="en"> <head> <title>Test site for Cart Recover Tool</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" media="screen" href="stylesheet.css" /> <link href="https://fonts.googleapis.com/css?family=Bree+Serif|Open+Sans&display=swap" rel="stylesheet"> <link rel="icon" href="favicon.ico"> <meta name="viewport" …

8 javascript  dom  iframe 

私使用していますが、コンポーネント遅延ロードとしてのWebPACKを使用してルータに反応バンドラ私がホームページにアクセスすると、/ 私はそれをネットワーク]タブで見ることができる bundle.jsロードされ、また、私は、サイドバーの対応コンポーネントで特定のアイテムをクリックしたときたとえば0.bundle.js、ファイル名が正常に読み込まれますが、検索バーからネストされたルート（例http://127.0.0.1:8080/forms/select）に直接移動すると、次のようなエラーが発生します。 GET http://127.0.0.1:8080/forms/bundle.jsnet :: ERR_ABORTED 404（見つかりません） このエラーは、bundle.jsがロードされていないことを示しています。つまり、他のチャンクをロードできません。 webpack.config.js const webpack = require('webpack'); module.exports = { entry: './src/index.js', module: { rules: [], }, resolve: { extensions: ['*', '.js', '.jsx'], }, output: { path: __dirname + '/dist', publicPath: '/', filename: 'bundle.js', }, plugins: [new webpack.HotModuleReplacementPlugin()], devtool: 'cheap-module-eval-source-map', devServer: { contentBase: …

8 javascript  reactjs  webpack  react-router  lazy-loading 

一番下に長方形のブロックが1つしかないタイムラインチャートの作成を検討しています。これはマスタースクラバーとして使用されます。 // current- http://jsfiddle.net/NYEaX/2427/ スクラブセクションの場所-ベースとなる長方形だけが必要です。現在のコードベースにどのような変更を加える必要がありますか だからもっとこう //私の最新-https://jsfiddle.net/2mvhjr7z/2/ $(document).ready(function() { var $this = $('.timelinechart'); var w = $this.data("width"); var h = $this.data("height"); //var data = $this.data("data"); var data = [ { "label": "person a", "icon": "4", "times": [ {"text": "Test 1", "starting_time": 1355752800000, "ending_time": 1355759900000}, {"text": "Test 2", "starting_time": 1355767900000, "ending_time": …

8 javascript  jquery  d3.js 

AntDメニューサイダーをタブパネルのように使用しようとしています。 コンテンツ内にコンポーネントを配置して、メニュー項目がクリックされたときにコンテンツパネルが関連するコンポーネントをレンダリングするようにします。 この構造を取得して、各メニュー項目のコンテンツとしてコンポーネントを取得するにはどうすればよいですか？ import React from 'react'; import { compose } from 'recompose'; import { Divider, Layout, Card, Tabs, Typography, Menu, Breadcrumb, Icon } from 'antd'; import { PasswordForgetForm } from '../Auth/Password/Forgot'; const { Title } = Typography const { TabPane } = Tabs; const { Header, Content, Footer, Sider …

8 javascript  reactjs  react-router-dom  antd