Web页面RTC实现调取摄像头拍摄静态照片

最新推荐文章于 2025-06-19 13:27:22 发布

原创

最新推荐文章于 2025-06-19 13:27:22 发布 · 714 阅读

2 ·

CC 4.0 BY-SA版权

该博客介绍了一个使用WebRTC技术的网页应用，它能够调用用户的摄像头并在页面上显示实时视频流。用户可以点击拍照按钮获取当前摄像头画面的静态图片，但目前保存功能尚未实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这是项目的架构
capture.js

(function() {
	//拍摄照片的宽度和高度。我们将设置
	//宽度为此处定义的值，但高度为
	//根据输入流的纵横比计算。
  var width = 320;    //我们将把照片宽度调整为
  var height = 0;     //这将根据输入流计算

//| streaming指示我们当前是否正在进行流式处理
//摄像机的视频。显然，我们从错误开始。所以当我们还没有拍照的时候，肯定是没有流的，所以是错误开始
  
  var streaming = false;

//我们需要配置或控制的各种HTML元素。这些将由startup（）函数设置。

  var video = null;
  var canvas = null;
  var photo = null;
  var startbutton = null;

  function startup() {
    video = document.getElementById('video');
    canvas = document.getElementById('canvas');
    photo = document.getElementById('photo');
    startbutton = document.getElementById('startbutton');

    navigator.mediaDevices.getUserMedia({video: true, audio: false})
    .then(function(stream) {
      video.srcObject = stream;
      video.play();
    })
   /* .catch(function(err) {
      console.log("An error occurred: " + err);
    });*/