当前位置： 文江博客话题详情

使用Java和HTML获取媒体设备

发布于 2025-02-09 15:52:45 字数 4158 浏览 1 评论 0原文

我有一个检测到摄像机的网页模板，有人可以帮助我添加一个按钮从相机中捕获，并且该捕获显示了文本框中的图像数据URL，我尝试添加此图像，但不能将其集成到JS代码。 这是我尝试插入的内容。也许那是不正确的代码... :(

> <button id="click-photo">Take Photo</button> <div
> id="dataurl-container">
>     <canvas id="canvas" width="800%" height="600"></canvas>
>     <div id="dataurl-header">Image Data URL</div>
>     <textarea id="dataurl" readonly></textarea> </div>
> 
> JS -->
> 
> click_button.addEventListener('click', function() {
>     canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
>       let image_data_url = canvas.toDataURL('image/jpeg');
>     
>     dataurl.value = image_data_url;
>     dataurl_container.style.display = 'block';


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Camera selection</title>
  <style>
html,
body {
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
}

body {
  font-family: Helvetica, Arial, sans-serif;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

header {
  background: #f0293e;
  color: #fff;
  text-align: center;
}
main {
  background: #ffffff;
  min-height: 80vh;
  flex-grow: 1;
}

.controls {
  text-align: center;
  padding: 0.5em 0;
  background: #333e5a;
}

.controls {
  color: #fff;
}
.controls p {
  margin: 0;
}
.controls > div {
  margin-bottom: 0.5em;
}
.controls > div:last-child {
  margin-bottom: 0;
}

video {
  width: 100%;
  max-width: 600px;
  display: block;
  margin: 0 auto;
}

footer {
  background: #333e5a;
  color: #fff;
  text-align: center;
}

footer a {
  color: #fff;
}

    </style>

</head>

<body>

  <header>
    <h1>Camera test</h1>
  </header>

  <main>
    <div class="controls">
      <button id="button">Get camera</button>
      <select id="select">
        <option></option>
      </select>
    </div>
    <video id="video" autoplay playsinline></video>
  </main>



  <script>
const video = document.getElementById('video');
const button = document.getElementById('button');
const select = document.getElementById('select');
let click_button = document.querySelector("#click-photo");
let canvas = document.querySelector("#canvas");
let dataurl = document.querySelector("#dataurl");
let currentStream;


    
    

function stopMediaTracks(stream) {
  stream.getTracks().forEach(track => {
    track.stop();
  });
}


function gotDevices(mediaDevices) {
  select.innerHTML = '';
  select.appendChild(document.createElement('option'));
  let count = 1;
  mediaDevices.forEach(mediaDevice => {
    if (mediaDevice.kind === 'videoinput') {
      const option = document.createElement('option');
      option.value = mediaDevice.deviceId;
      const label = mediaDevice.label || `Camera ${count++}`;
      const textNode = document.createTextNode(label);
      option.appendChild(textNode);
      select.appendChild(option);
    }
  });
}



button.addEventListener('click', event => {
  if (typeof currentStream !== 'undefined') {
    stopMediaTracks(currentStream);
  }
  

  const videoConstraints = {};
  if (select.value === '') {
    videoConstraints.facingMode = 'environment';
  } else {
    videoConstraints.deviceId = { exact: select.value };
  }
  const constraints = {
    video: videoConstraints,
    audio: false
  };

  
  navigator.mediaDevices
    .getUserMedia(constraints)
    .then(stream => {
      currentStream = stream;
      video.srcObject = stream;
      return navigator.mediaDevices.enumerateDevices();
    })
    .then(gotDevices)
    .catch(error => {
      console.error(error);
    });
  
});

  




navigator.mediaDevices.enumerateDevices().then(gotDevices);


  </script>
</body>

</html>

原文

I have a web page template that detects cameras, could someone please help me add a button to take capture from the camera, and that capture shows the image data URL in the text box, I tried to add this but can't integrate that to JS code.
Here is what I tried to insert. Maybe that is the incorrect code... :(

> <button id="click-photo">Take Photo</button> <div
> id="dataurl-container">
>     <canvas id="canvas" width="800%" height="600"></canvas>
>     <div id="dataurl-header">Image Data URL</div>
>     <textarea id="dataurl" readonly></textarea> </div>
> 
> JS -->
> 
> click_button.addEventListener('click', function() {
>     canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
>       let image_data_url = canvas.toDataURL('image/jpeg');
>     
>     dataurl.value = image_data_url;
>     dataurl_container.style.display = 'block';


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Camera selection</title>
  <style>
html,
body {
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
}

body {
  font-family: Helvetica, Arial, sans-serif;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

header {
  background: #f0293e;
  color: #fff;
  text-align: center;
}
main {
  background: #ffffff;
  min-height: 80vh;
  flex-grow: 1;
}

.controls {
  text-align: center;
  padding: 0.5em 0;
  background: #333e5a;
}

.controls {
  color: #fff;
}
.controls p {
  margin: 0;
}
.controls > div {
  margin-bottom: 0.5em;
}
.controls > div:last-child {
  margin-bottom: 0;
}

video {
  width: 100%;
  max-width: 600px;
  display: block;
  margin: 0 auto;
}

footer {
  background: #333e5a;
  color: #fff;
  text-align: center;
}

footer a {
  color: #fff;
}

    </style>

</head>

<body>

  <header>
    <h1>Camera test</h1>
  </header>

  <main>
    <div class="controls">
      <button id="button">Get camera</button>
      <select id="select">
        <option></option>
      </select>
    </div>
    <video id="video" autoplay playsinline></video>
  </main>



  <script>
const video = document.getElementById('video');
const button = document.getElementById('button');
const select = document.getElementById('select');
let click_button = document.querySelector("#click-photo");
let canvas = document.querySelector("#canvas");
let dataurl = document.querySelector("#dataurl");
let currentStream;


    
    

function stopMediaTracks(stream) {
  stream.getTracks().forEach(track => {
    track.stop();
  });
}


function gotDevices(mediaDevices) {
  select.innerHTML = '';
  select.appendChild(document.createElement('option'));
  let count = 1;
  mediaDevices.forEach(mediaDevice => {
    if (mediaDevice.kind === 'videoinput') {
      const option = document.createElement('option');
      option.value = mediaDevice.deviceId;
      const label = mediaDevice.label || `Camera ${count++}`;
      const textNode = document.createTextNode(label);
      option.appendChild(textNode);
      select.appendChild(option);
    }
  });
}



button.addEventListener('click', event => {
  if (typeof currentStream !== 'undefined') {
    stopMediaTracks(currentStream);
  }
  

  const videoConstraints = {};
  if (select.value === '') {
    videoConstraints.facingMode = 'environment';
  } else {
    videoConstraints.deviceId = { exact: select.value };
  }
  const constraints = {
    video: videoConstraints,
    audio: false
  };

  
  navigator.mediaDevices
    .getUserMedia(constraints)
    .then(stream => {
      currentStream = stream;
      video.srcObject = stream;
      return navigator.mediaDevices.enumerateDevices();
    })
    .then(gotDevices)
    .catch(error => {
      console.error(error);
    });
  
});

  




navigator.mediaDevices.enumerateDevices().then(gotDevices);


  </script>
</body>

</html>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。
列表为空，暂无数据

关于作者

笙痞

暂无简介

文章
评论
28 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

櫻之舞

文章 0 评论 0

弥枳

文章 0 评论 0

m2429

文章 0 评论 0

寻找一个思念的角度

文章 0 评论 0

野却迷人

文章 0 评论 0

我怀念的。

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文