ak-video
Version:
A library for playing RTSP&RTMP streams using WebRTC and MSE
174 lines (137 loc) • 5.03 kB
Markdown
# ak-video
ak-video 是一个基于 go2RTC 的前端接入组件库，通过 WebRTC 和 MSE 技术支持在 Web 页面中播放 RTSP、RTMP 流。它为 Web 应用提供了简便的流媒体播放解决方案，支持所有现代浏览器（除了 Apple Safari）。
## 特性
- 通过 WebRTC 或 MSE 播放 RTSP RTMP流。
- 除了 Apple Safari，其他所有现代浏览器都支持。
- 支持从RTSP、RTMP、USB摄像头、HTTP、ONVIF等多种来源协议传输。
- 支持通过FFmpeg进行转码，支持H265等视频编解码格式。
- 通过原生 JavaScript、Vue 2 和 Vue 3 组件化支持，轻松集成到 Web 项目中。
## 安装
```bash
npm install ak-video
```
## 使用方法
### 集成 `go2rtc` 服务
在集成 `ak-video` 库之前，请确保已经启动并配置好 [go2rtc](https://github.com/AlexxIT/go2rtc) 服务。`go2rtc` 是一个基于 WebRTC 的服务，用于通过 WebSocket 传输 RTSP 流到浏览器中。你可以按照 [go2rtc 的安装指南](https://github.com/AlexxIT/go2rtc) 启动服务。
确保服务正在运行并且能够处理来自客户端的连接。
可点击链接在go2RTC下载对应系统(go2rtc_win64.zip)安装包,点击运行即可 https://github.com/AlexxIT/go2rtc/releases
### 原生 JavaScript 示例
```html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AK Video Player</title>
<style>
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #000;
}
#video-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
}
ak-video {
width: 80%;
max-width: 640px;
}
</style>
</head>
<body>
<div id="video-container" class="video-container"></div>
<script type="module" src="../video-stream.js"></script>
<script type="module">
// 直接写死 RTSP 地址数组
const rtspArray = ["rtmp://liteavapp.qcloud.com/live/liteavdemoplayerstreamid"];
const videoContainer = document.getElementById('video-container');
rtspArray.forEach((rtspUrl, index) => {
const videoElement = document.createElement('ak-video');
videoElement.mode = 'webrtc,mse,hls';
videoElement.id = `liteavapp-${index}`;
videoElement.src = new URL(`api/ws?src=${encodeURIComponent(rtspUrl)}`, "http://127.0.0.1:1984"); // 请将第二个URL 替换为 go2rtc 服务地址
videoContainer.appendChild(videoElement);
});
</script>
</body>
</html>
```
### Vue 2 示例
#### 创建组件
```vue
<template>
<div>
<ak-video ref="videoRtcRef" :src="rtspUrl"></ak-video>
</div>
</template>
<script>
import 'ak-video';
export default {
data() {
return { rtspUrl: new URL(`api/ws?src=${encodeURIComponent('"rtmp://liteavapp.qcloud.com/live/liteavdemoplayerstreamid"')}`, "http://127.0.0.1:1984") }; // 请将第二个URL 替换为 go2rtc 服务地址
}
};
</script>
```
#### 在主应用中使用
```vue
<template>
<div id="app">
<VideoPlayer />
</div>
</template>
<script>
import VideoPlayer from './VideoPlayer.vue';
export default {
components: { VideoPlayer }
};
</script>
```
### Vue 3 示例
#### 创建组件
```vue
<template>
<div>
<ak-video ref="videoRtcRef" :src="rtspUrl"></ak-video>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import 'ak-video';
const videoRtcRef = ref(null);
const rtspUrl = new URL(`api/ws?src=${encodeURIComponent('"rtmp://liteavapp.qcloud.com/live/liteavdemoplayerstreamid"')}`, "http://127.0.0.1:1984"); // 请将第二个URL 替换为 go2rtc 服务地址
onMounted(() => {
console.log('Video RTC element is mounted');
});
</script>
```
#### 在主应用中使用
```vue
<template>
<div id="app">
<VideoPlayer />
</div>
</template>
<script setup>
import VideoPlayer from './VideoPlayer.vue';
</script>
```
## 注意事项
- **Go2RTC URL**：请将 `URL` 对象地址第二个参数 替换为实际的 Go2RTC服务器地址,通常为本地运行Go2RTC.exe后的1984端口。例如 `http://127.0.0.1:1984`。
- **兼容性**：该库支持除 Apple Safari 外的几乎所有现代浏览器。
- **服务配置**：在集成 `ak-video` 之前，确保 `go2rtc` 服务已正确启动并配置好。
- **跨域问题**: go2rtc运行根目录 修改go2rtc.yaml 配置
````
api:
origin: "*" # default "", allow CORS requests (only * supported)
````
## 示例代码
你可以查看 [https://github.com/AlexxIT/WebRTC](https://github.com/AlexxIT/go2rtc/tree/master) 获取更多示例。