用 WebRTC 给自己拍张照

最新推荐文章于 2023-10-17 02:00:00 发布
VIP文章 最新推荐文章于 2023-10-17 02:00:00 发布
阅读量1.4k 收藏 1
点赞数
分类专栏： 杂谈 文章标签： webrtc 音视频 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MonsterException/article/details/123148995
版权

前言

哈喽，大家好，我是海怪。

最近一直在看 WebRTC 的用法，也学了一下音视频流的东西，今天就跟大家分享一个好玩的小实战吧——给自己拍照。

项目已上传至 Github，Repo
地址：https://github.com/haixiangyan/webrtc-take-photo

页面结构

首先，我们要拆分一下实现步骤：

  • 打开摄像头，获取视频流
  • 需要一个 <video> 来播放摄像头的画面
  • 点击按钮，生成画面，并展示在 <img> 里

因此，我们需要 <video>, <img> 以及 <button>。

<head>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  
<main>
  <video id="video">浏览器不支持 Video</video>

  <canvas id="canvas">
    <img id="photo" alt="拍照后的照片">
  </canvas>
</main>

<div class="actions">
  <button id="takePhotoButton" type="button" class="btn btn-primary">拍照</button>
  <button id="downloadButton" type=
最低0.47元/天 解锁文章
写代码的海怪
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
webcam:webrtc在网页上显示网络摄像头流，拍照并通过节点js存储图片
05-30
摄像头 控制本地网络摄像头的基本 WebRTC 例子 待定 用法 复制存储库 git 克隆 获取所有必需的包 安装 在本地运行应用程序 节点应用 浏览以查看它的“运行中” 'take picture' 将拍照并在网络摄像头流下方显示流值。 然后将图像数据发布到 /photo 并且图像将存储在 static/grabs 文件夹中。 然后存储的图像将与流抓取一起显示。 'start|stop' 将每秒拍摄一张照片。 “排序”定格动画风格。
WEBRTC 实现浏览器拍照
wade3po的博客
04-18 207
另外视频可以设置前置和后置摄像头，分辨率，video 是对象，user 是前置，environment 是后置，width/height 是分辨率，移动端可能还反着来，就是这个分辨率一直不知道是怎么可以设置全，因为拍照的框是固定的，所以很难设置的刚好，如果只是播放视频还好，通过判断分辨率然后用 css 控制 object-fit，是 cover 还是 contain，如果是 fill 就有肯能变形。欢迎关注订阅号 coding 个人笔记。
WebRTC系列(1)-手把手教你实现一个浏览器拍照室Demo
weixin_30414155的博客
11-13 198
1.WebRTC开发背景 　　由于业务需求，需要在项目中实现实时音视频通话功能，之前基于浏览器开发的Web项目要进行音视频通话，需要安装flash插件才能实现或者使用C/S客户端进行通信。随着互联网技术的驱动下，在很多场景下需要进行音视频通信，在生活中我们现在使用电话越来越少，使用微信和视频越来越多。在一些行业也需要进行音视频实时通信，如：在线教育，远程医疗，保险理赔等等。有了WebRTC，可以...
WebRTC基础实践 - 9. 拍照并传给对方
铁锚的CSDN博客
12-16 3704
本节内容 在本节课程中, 我们将学习以下内容: 拍照并通过canvas元素获取图像数据。 给对面发送图片。 本节的完整版代码位于 step-06 文件夹中。 工作原理 前面的小节中, 我们使用 RTCDataChannel 来传递文本消息。 本节课程, 将学习如何发送文件: 下面的示例发送的是通过 getUserMedia() 捕获的照片文件, 原理都是一样的。 核心内容包括: 建立数据通道...
[WebRTC 02]如何使用浏览器给自己拍照
猫小妖的专栏
07-27 510
一、基础概念 1.音视频播放器播放原理 按照一定的时间间隔连续地播放从音视频文件中解码后的视频帧，每个视频帧直接的时间间隔非常小，小到人眼无法分辨，视觉上将一帧帧连起来就变成了动画。 2.帧的分类 1）非编码帧：非编码帧（没有被编码或者被解码后的帧），从摄像头获取的本身就是非编码帧，每一帧就是一幅独立的图像。格式一般是YUV、RGB。 2）编码帧：经过编码器（H264/H265、VP8/...
Electrons实现Chrome使用WebRTC实现屏幕共享
07-08
使用Electron和Chrome的WebRTC实现屏幕共享，客户端与服务端使用socket.io连接。
WebRTCDemo:一些WebRTC示例
05-02
WebRTCDemo 一些WebRTC示例 演示版 UserMedia-简单的应用程序，可从设备捕获声音和视频 npm install static in browser : localhost:8080/media.html PhotoBooth-小型应用程序，可捕获视频流中的镜头 npm install ...
前端使用kurento实现rtsp流转webRtc播放
02-16
从RTSP到WebRTC 后端kurento-media-server实现rtsp流转webRtc播放
webrtc-cpp-sample:在C ++上使用WebRTC的示例程序
05-01
WebRTC C ++示例在C ++上使用WebRTC（DataChannel）的示例程序（README.en.md是此文件的英文翻译。） 使用C ++中的WebRTC DataChannel的示例代码。要求Mac OS X 的Ubuntu编译$ cd $ git clone --depth 1 ...
flutter使用webrtc技术实现共享桌面，视频
02-22
本文件可以直接下载在android studio上面运行，flutter的sdk请使用flutter_windows_1.24.0-10.2.pre-dev这个版本。
android-webrtc-demo:使用原生 Webrtc API 在 Android 上使用相机镜像
06-28
安卓 WebRTC 演示 这是一个示例，展示了如何在Android平台上使用Flint协议和WebRTC库来做相机镜像。 如何使用 下载源代码 使用Eclipse编译位于sender目录下的 Android sender 应用程序。 在应该有摄像头（一两个）的 Android 移动设备上运行它。 笔记： 有关更多详细信息，请参阅 。 特征 支持2个发件人 支持字体/后置摄像头镜像 支持视频/音频镜像（需要更改少量代码） 支持Flint远程模式，可以远程镜像安卓设备的摄像头。 参考
android获取摄像头预览--基于webrtc android
09-03
基于webrtc-android,获取预览数据并且进行显示的一个demo,基于博客文章: https://blog.csdn.net/zhangkai19890929/article/details/82344751
webrtc快速入门——使用 WebRTC 拍摄静止的照片
最新发布
e891377的专栏
10-17 336
然后，如果宽度和高度都是非零（意味着至少有潜在有效的图像数据），我们将画布的宽度和高度设置为与捕获帧的宽度和高度相匹配，然后调用。函数，其捕获当前显示的视频帧的作业将其转换为 PNG 文件，并将其显示在捕获的帧框中。之后，在视频流开始流动之前，有一段（希望简短）的时间段过去了。我们首先将整个脚本包装在匿名函数中，以避免使用全局变量，然后设置我们将要使用的各种变量。如果需要，你可以将允许的视频源限定为特定的设备或特定的一组设备。对象（描述了可用的设备）数组，可以从中选取一个你想要允许的设备，并将对应的。
如何用WebRTC实现拍照，并实现滤镜
irainsa的博客
04-07 256
在开始拍照之前我们先要学习一点知识，非编码帧、编码帧。
webrtc,人脸拍照小功能
记录一些工作日常和学习
02-05 308
学习webrtc-chapter2:get user media                       video,canvas{               border:1px solid gray;               width:400px;               height:400px;               border-radius:50%;
webrtc 全屏截图
阿豪
02-12 267
原文链接: webrtc 全屏截图 上一篇: ...
webrtc 关于H5 和 画布 调用本地摄像头拍照功能的实现
az44yao的专栏
06-22 876
1.代码的实现（html部分） <input type="button" title="开启摄像头" value="开启摄像头" onclick="getMedia();" /><br /> <video height="120px" autoplay="autoplay"></video><hr /> <input ty...
WebRTC源码分析3_jpeg编解码
好记性不如写博客！
12-26 1138
所属模块:webrtc_jpeg 1、接口路径：webrtc\trunk\src\common_video\jpeg\main\interface\jpeg.h 2、特点   底层调用三方库：jpeglib  支持的未压缩图像格式：I420 3、使用方法： 将jpeglib封装成 JpegDecoder和JpegEncoder 两个类使用 JpegEncoder目前只支持输出到文件（
WebRTC 入门 02 通过浏览器使用摄像头 I
yaming的专栏
03-25 3194
这一节开始，我们通过JavaScript API来开发简单的Web应用程序来学习WebRTC框架。WebRTC框架提供的API既可以用于实现简单的功能，比如一对一的视频、音频通话。也有足够的灵活性可以让有经验的开发人员实现各种复杂的功能。WebRTC为开发人员提供的API大体上可以分为三类： 本地和远端音频、视频的获取和管理： MediaStreamInterface 连
给一个python使用webrtc库的示例
04-19
这是一个使用webrtc库的Python示例代码： ``` import asyncio import logging import random import aiortc from aiortc import RTCPeerConnection, RTCSessionDescription from aiortc.contrib.signaling import ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

写代码的海怪

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值