Android WebRTC实现音视频对讲

慕课网课程webrtc入门学习后的总结

新建Android工程 并添加依赖

  • build.gradle
android {
 ... 
  compileOptions {
        sourceCompatibility = '1.8'
        targetCompatibility = '1.8'
    }
}
dependencies {
    implementation 'io.socket:socket.io-client:1.0.0'
    //webrtc库 ,可自己编译
    implementation 'org.webrtc:google-webrtc:1.0.+'
    //Android 6.0+ 动态权限申请库
    implementation 'pub.devrel:easypermissions:1.1.3'
}
  • AndroidManifest.xml 记得申请权限
 <uses-feature android:name="android.hardware.camera" />
    <uses-feature android:name="android.hardware.camera.autofocus" />
    <uses-feature
        android:glEsVersion="0x00020000"
        android:required="true" />

    <uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.permission.CHANGE_NETWORK_STATE" />
    <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
    <uses-permission android:name="android.permission.RECORD_AUDIO" />
    <uses-permission android:name="android.permission.BLUETOOTH" />
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="android.permission.READ_PHONE_STATE" />
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
  • Activity里面动态申请权限
String[] perms = {Manifest.permission.CAMERA, Manifest.permission.RECORD_AUDIO};
		if (!EasyPermissions.hasPermissions(this, perms)) {
			EasyPermissions.requestPermissions(this, "Need permissions for camera & microphone", 0, perms);
		}

@Override
	public void onRequestPermissionsResult(int requestCode, String[] permissions, int[] grantResults) {
		super.onRequestPermissionsResult(requestCode, permissions, grantResults);
		EasyPermissions.onRequestPermissionsResult(requestCode, permissions, grantResults, this);
	}

渲染视频的view

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

// 渲染本地视频
    <org.webrtc.SurfaceViewRenderer
        android:id="@+id/LocalSurfaceView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center" />
//渲染远程视频
    <org.webrtc.SurfaceViewRenderer
        android:id="@+id/RemoteSurfaceView"
        android:layout_width="120dp"
        android:layout_height="160dp"
        android:layout_gravity="top|end"
        android:layout_margin="16dp"/>
//日志打印
    <TextView
        android:id="@+id/LogcatView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:textColor="@android:color/white"
        android:layout_gravity="top|start" />

</FrameLayout>

初始化控件

private void initView() {
		mLogcatView = findViewById(R.id.LogcatView);
		mLocalSurfaceView = findViewById(R.id.LocalSurfaceView);
		mRemoteSurfaceView = findViewById(R.id.RemoteSurfaceView);
		mRootEglBase = EglBase.create();

		//本地视频流渲染初始化
		mLocalSurfaceView.init(mRootEglBase.getEglBaseContext(), null);
		mLocalSurfaceView.setScalingType(RendererCommon.ScalingType.
  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
要使用Vue和WebRTC实现音视频通话,您可以使用WebRTC API。以下是一些步骤: 1. 首先,您需要创建一个新的Vue项目,您可以使用Vue CLI来创建。 2. 接下来,您需要使用WebRTC API来实现音视频通话。在Vue中,您可以使用Vue插件来轻松地使用WebRTC API。例如,您可以使用vue-webrtc插件。 3. 您需要在Vue组件中使用vue-webrtc插件。您可以在组件的模板中放置一个video标签,该标签将用于显示视频流。使用vue-webrtc插件,您可以轻松地与其他用户进行音视频通话。 4. 在Vue组件中,您可以使用WebRTC API来处理音视频流。您可以使用getUserMedia()函数获取本地视频流,并使用RTCPeerConnection对象将视频流发送到远程用户。使用RTCPeerConnection对象,您可以建立点对点连接,并在WebRTC流之间进行通信。 5. 最后,您需要使用Vue的事件来处理音视频通话中的各种情况,例如在连接断开时显示错误消息等。 这是一个简单的示例代码,演示如何使用Vue和WebRTC API实现音视频通话: ``` <template> <div> <video ref="localVideo" autoplay></video> <video ref="remoteVideo" autoplay></video> </div> </template> <script> import VueWebRTC from 'vue-webrtc' export default { name: 'VideoChat', components: { VueWebRTC }, data () { return { localStream: null, remoteStream: null, peerConnection: null } }, mounted () { this.startLocalVideo() }, methods: { startLocalVideo () { navigator.getUserMedia({ video: true, audio: true }, (stream) => { this.localStream = stream this.$refs.localVideo.srcObject = stream this.setupPeerConnection() }, (error) => { console.error(error) }) }, setupPeerConnection () { this.peerConnection = new RTCPeerConnection() this.peerConnection.onicecandidate = (event) => { if (event.candidate) { // send candidate to remote user } } this.peerConnection.onaddstream = (event) => { this.remoteStream = event.stream this.$refs.remoteVideo.srcObject = event.stream } this.peerConnection.addStream(this.localStream) // create offer and send to remote user } } } </script> ```

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值