WebRTC之摄像头预览

2024-08-22 15:32
文章标签 摄像头 预览 webrtc

本文主要是介绍WebRTC之摄像头预览，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

在前面《WebRTC之服务器搭建》 我们已经搭建好了WebRTC所需的服务器环境，主要是三个服务器：
房间服务器、信令服务器以及TURN穿透服务器。

后续我们将学习如何使用WebRTC一步一步实现音视频通话。今天我们将学习如何使用WebRTC预览摄像头数据。

这里透个底，后面的学习过程中大部分的实践都是基于WebRTC的官方封装库，因此绝大部分的代码都是Java或者Kotlin，暂时不会涉及到JNI的相关代码，所以门槛还是非常低的。

Good good study，day day up. So easy…

引入依赖库

首先我们在Android Studio工程中引入WebRTC的依赖库:

 implementation 'org.webrtc:google-webrtc:1.0.+'

动态权限

首先肯定是需要CAMERA权限的，如果需要音频数据则还需要RECORD_AUDIO权限。

对于动态权限相信有Android开发基础的童鞋们都不陌生了，gitHub上也有很多相关的开源库，笔者在这里就不多做介绍了。

预览摄像头

WebRTC作为一个点对点通信完整的解决方案，对于摄像头数据的获取及预览都已经做好了完整封装，开发者直接调用相关的API即可，
并不需要开发者编写OpenGL纹理渲染等相关的逻辑代码。

如果童鞋们对如何使用OpenGL渲染摄像头数据感兴趣的话可以参考笔者之前的文章：《使用OpenGL预览CameraX摄像头数据》

使用WebRTC预览摄像头数据主要有以下几个步骤：

1、创建EglBase及SurfaceViewRenderer

其中EglBase一个重要的功能就是提供EGL的渲染上下文及EGL的版本兼容。

SurfaceViewRenderer则是一个继承于SurfaceView的渲染View，提供了OpenGL渲染图像数据的功能。

// 创建EglBase
rootEglBase = EglBase.create()
camera_preview.init(rootEglBase?.eglBaseContext, null)
//硬件加速
camera_preview.setEnableHardwareScaler(true)
camera_preview.setScalingType(RendererCommon.ScalingType.SCALE_ASPECT_FILL)

2、创建VideoCapturer

VideoCapturer主要作用则是提供摄像头数据，比如控制分辨率以及帧率等。

通过CameraEnumerator接口兼容Camera1和Camera2：

   // 创建VideoCapturerprivate fun createVideoCapture(): VideoCapturer? {return if (Camera2Enumerator.isSupported(this)) {createCameraCapture(Camera2Enumerator(this))} else {createCameraCapture(Camera1Enumerator(true))}}//  真正创建VideoCapturer的实现private fun createCameraCapture(enumerator: CameraEnumerator): VideoCapturer? {val deviceNames = enumerator.deviceNames// First, try to find front facing camerafor (deviceName in deviceNames) {if (enumerator.isFrontFacing(deviceName)) {val videoCapture: VideoCapturer? = enumerator.createCapturer(deviceName, null)if (videoCapture != null) {return videoCapture}}}for (deviceName in deviceNames) {if (!enumerator.isFrontFacing(deviceName)) {val videoCapture: VideoCapturer? = enumerator.createCapturer(deviceName, null)if (videoCapture != null) {return videoCapture}}}return null}

VideoCapturer创建完成之后需要使用SurfaceTextureHelper进行初始化，否则调用预览的时候会抛出未初始化的异常：

  // 初始化mSurfaceTextureHelper =SurfaceTextureHelper.create("CaptureThread", rootEglBase?.eglBaseContext)// 创建VideoSourceval videoSource = mPeerConnectionFactory!!.createVideoSource(false)mVideoCapture?.initialize(mSurfaceTextureHelper,applicationContext,videoSource.capturerObserver)/*** 创建PeerConnectionFactory*/private fun createPeerConnectionFactory(context: Context?): PeerConnectionFactory? {val encoderFactory: VideoEncoderFactoryval decoderFactory: VideoDecoderFactoryencoderFactory = DefaultVideoEncoderFactory(rootEglBase?.eglBaseContext,false /* enableIntelVp8Encoder */,true)decoderFactory = DefaultVideoDecoderFactory(rootEglBase?.eglBaseContext)PeerConnectionFactory.initialize(PeerConnectionFactory.InitializationOptions.builder(context).setEnableInternalTracer(true).createInitializationOptions())val builder = PeerConnectionFactory.builder().setVideoEncoderFactory(encoderFactory).setVideoDecoderFactory(decoderFactory)builder.setOptions(null)return builder.createPeerConnectionFactory()}

3、创建VideoTrack

VideoTrack是视频轨道，类似的还有AudioTrack音频轨道，它的作用将VideoCapturer获取到的视频数据结合VideoSource输出到SurfaceViewRenderer渲染显示。

val VIDEO_TRACK_ID = "1" //"ARDAMSv0"
// 创建VideoTrackmVideoTrack = mPeerConnectionFactory!!.createVideoTrack(VIDEO_TRACK_ID,videoSource)mVideoTrack?.setEnabled(true)// 绑定渲染ViewmVideoTrack?.addSink(camera_preview)

使用VideoCapturer开启渲染

在Activity的相关生命周期中开启预览即可：

   override fun onResume() {super.onResume()// 开启摄像头预览mVideoCapture?.startCapture(VIDEO_RESOLUTION_WIDTH,VIDEO_RESOLUTION_HEIGHT,VIDEO_FPS)}

完整代码

CapturePreviewActivity.kt:

package com.fly.webrtcandroidimport android.content.Context
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import org.webrtc.*/*** 摄像头预览*/
class CapturePreviewActivity : AppCompatActivity() {val VIDEO_TRACK_ID = "1" //"ARDAMSv0"private val VIDEO_RESOLUTION_WIDTH = 1280private val VIDEO_RESOLUTION_HEIGHT = 720private val VIDEO_FPS = 30//    绘制全局的上下文private var rootEglBase: EglBase? = nullprivate var mVideoTrack: VideoTrack? = nullprivate var mPeerConnectionFactory: PeerConnectionFactory? = null//纹理渲染private var mSurfaceTextureHelper: SurfaceTextureHelper? = nullprivate var mVideoCapture: VideoCapturer? = nullprivate val camera_preview by lazy {findViewById<SurfaceViewRenderer>(R.id.camera_preview)}override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)setContentView(R.layout.activity_capture_preview)rootEglBase = EglBase.create()camera_preview.init(rootEglBase?.eglBaseContext, null)//悬浮顶端camera_preview.setZOrderMediaOverlay(true)//硬件加速camera_preview.setEnableHardwareScaler(true)camera_preview.setScalingType(RendererCommon.ScalingType.SCALE_ASPECT_FILL)mPeerConnectionFactory = createPeerConnectionFactory(this)mVideoCapture = createVideoCapture()// 初始化mSurfaceTextureHelper =SurfaceTextureHelper.create("CaptureThread", rootEglBase?.eglBaseContext)// 创建VideoSourceval videoSource = mPeerConnectionFactory!!.createVideoSource(false)mVideoCapture?.initialize(mSurfaceTextureHelper,applicationContext,videoSource.capturerObserver)mVideoTrack = mPeerConnectionFactory!!.createVideoTrack(VIDEO_TRACK_ID,videoSource)mVideoTrack?.setEnabled(true)mVideoTrack?.addSink(camera_preview)}/*** 创建PeerConnectionFactory*/private fun createPeerConnectionFactory(context: Context?): PeerConnectionFactory? {val encoderFactory: VideoEncoderFactoryval decoderFactory: VideoDecoderFactoryencoderFactory = DefaultVideoEncoderFactory(rootEglBase?.eglBaseContext,false /* enableIntelVp8Encoder */,true)decoderFactory = DefaultVideoDecoderFactory(rootEglBase?.eglBaseContext)PeerConnectionFactory.initialize(PeerConnectionFactory.InitializationOptions.builder(context).setEnableInternalTracer(true).createInitializationOptions())val builder = PeerConnectionFactory.builder().setVideoEncoderFactory(encoderFactory).setVideoDecoderFactory(decoderFactory)builder.setOptions(null)return builder.createPeerConnectionFactory()}private fun createVideoCapture(): VideoCapturer? {return if (Camera2Enumerator.isSupported(this)) {createCameraCapture(Camera2Enumerator(this))} else {createCameraCapture(Camera1Enumerator(true))}}private fun createCameraCapture(enumerator: CameraEnumerator): VideoCapturer? {val deviceNames = enumerator.deviceNames// First, try to find front facing camerafor (deviceName in deviceNames) {if (enumerator.isFrontFacing(deviceName)) {val videoCapture: VideoCapturer? = enumerator.createCapturer(deviceName, null)if (videoCapture != null) {return videoCapture}}}for (deviceName in deviceNames) {if (!enumerator.isFrontFacing(deviceName)) {val videoCapture: VideoCapturer? = enumerator.createCapturer(deviceName, null)if (videoCapture != null) {return videoCapture}}}return null}override fun onResume() {super.onResume()// 开启摄像头预览mVideoCapture?.startCapture(VIDEO_RESOLUTION_WIDTH,VIDEO_RESOLUTION_HEIGHT,VIDEO_FPS)}}

布局文件activity_capture_preview.xml:

<?xml version="1.0" encoding="utf-8"?>
<org.webrtc.SurfaceViewRenderer xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"xmlns:tools="http://schemas.android.com/tools"android:id="@+id/camera_preview"android:layout_width="match_parent"android:layout_height="match_parent"tools:context=".CapturePreviewActivity"></org.webrtc.SurfaceViewRenderer>

关注我，一起进步，人生不止coding！！！

微信扫码关注

这篇关于WebRTC之摄像头预览的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1096670。

相关文章

java对接海康摄像头的完整步骤记录

java对接海康摄像头的完整步骤记录

《java对接海康摄像头的完整步骤记录》在Java中调用海康威视摄像头通常需要使用海康威视提供的SDK,下面这篇文章主要给大家介绍了关于java对接海康摄像头的完整步骤,文中通过代码介绍的非常详细,需... 目录一、开发环境准备二、实现Java调用设备接口（一）加载动态链接库（二）结构体、接口重定义1.类型
阅读更多...
C/C++和OpenCV实现调用摄像头

C/C++和OpenCV实现调用摄像头

《C/C++和OpenCV实现调用摄像头》本文主要介绍了C/C++和OpenCV实现调用摄像头,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一... 目录准备工作1. 打开摄像头2. 读取视频帧3. 显示视频帧4. 释放资源5. 获取和设置摄像头属性
阅读更多...
Android实现在线预览office文档的示例详解

Android实现在线预览office文档的示例详解

《Android实现在线预览office文档的示例详解》在移动端展示在线Office文档（如Word、Excel、PPT）是一项常见需求,这篇文章为大家重点介绍了两种方案的实现方法,希望对大家有一定的... 目录一、项目概述二、相关技术知识三、实现思路3.1 方案一：WebView + Office Onl
阅读更多...
Java实现文件图片的预览和下载功能

Java实现文件图片的预览和下载功能

《Java实现文件图片的预览和下载功能》这篇文章主要为大家详细介绍了如何使用Java实现文件图片的预览和下载功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... Java实现文件（图片）的预览和下载 @ApiOperation("访问文件") @GetMapping("
阅读更多...
Vue 调用摄像头扫描条码功能实现代码

Vue 调用摄像头扫描条码功能实现代码

《Vue调用摄像头扫描条码功能实现代码》本文介绍了如何使用Vue.js和jsQR库来实现调用摄像头并扫描条码的功能,通过安装依赖、获取摄像头视频流、解析条码等步骤,实现了从开始扫描到停止扫描的完整流... 目录实现步骤：代码实现1. 安装依赖2. vue 页面代码功能说明注意事项以下是一个基于 Vue.js
阅读更多...
如何通过海康威视设备网络SDK进行Java二次开发摄像头车牌识别详解

如何通过海康威视设备网络SDK进行Java二次开发摄像头车牌识别详解

《如何通过海康威视设备网络SDK进行Java二次开发摄像头车牌识别详解》：本文主要介绍如何通过海康威视设备网络SDK进行Java二次开发摄像头车牌识别的相关资料,描述了如何使用海康威视设备网络SD... 目录前言开发流程问题和解决方案dll库加载不到的问题老旧版本sdk不兼容的问题关键实现流程总结前言作为
阅读更多...
Android 10.0 mtk平板camera2横屏预览旋转90度横屏拍照图片旋转90度功能实现

Android 10.0 mtk平板camera2横屏预览旋转90度横屏拍照图片旋转90度功能实现

1.前言 在10.0的系统rom定制化开发中，在进行一些平板等默认横屏的设备开发的过程中，需要在进入camera2的 时候，默认预览图像也是需要横屏显示的，在上一篇已经实现了横屏预览功能，然后发现横屏预览后，拍照保存的图片 依然是竖屏的，所以说同样需要将图片也保存为横屏图标了，所以就需要看下mtk的camera2的相关横屏保存图片功能， 如何实现实现横屏保存图片功能 如图所示: 2.mtk
阅读更多...
雷动WEBRTC产品

雷动WEBRTC产品

http://www.rtcpower.com/html/leidongwebrtc.html ; 1.前言      WebRTC是一项在浏览器内部进行实时视频和音频通信的技术，是谷歌2010年以6820万美元收购Global IP Solutions公司而获得一项技术。WebRTC实现了基于网页的视频会议，标准是WHATWG 协议，目的是通过浏览器提供简单的javascript就可以
阅读更多...
Apple quietly slips WebRTC audio, video into Safari's WebKit spec

Apple quietly slips WebRTC audio, video into Safari's WebKit spec

转自：http://www.zdnet.com/article/apple-quietly-slips-webrtc-audio-video-into-safaris-webkit-spec/?from=timeline&isappinstalled=0 http://www.zdnet.com/article/apple-quietly-slips-webrtc-audio-video-
阅读更多...
WebRTC-nack机制详解

WebRTC-nack机制详解

1.NACK的含义 丢包重传(NACK)是抵抗网络错误的重要手段。NACK在接收端检测到数据丢包后，发送NACK报文到发送端；发送端根据NACK报文中的序列号，在发送缓冲区找到对应的数据包，重新发送到接收端。NACK需要发送端，发送缓冲区的支持。 WebRTC中支持音频和视频的NACK重传。我们这里只分析nack机制，不分析jitterbuffer或者neteq的更多实现。 2.WebRTC
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2