ak-video
v1.0.5
Published
A library for playing RTSP&RTMP streams using WebRTC and MSE
Readme
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 项目中。
安装
npm install ak-video使用方法
集成 go2rtc 服务
在集成 ak-video 库之前，请确保已经启动并配置好 go2rtc 服务。go2rtc 是一个基于 WebRTC 的服务，用于通过 WebSocket 传输 RTSP 流到浏览器中。你可以按照 go2rtc 的安装指南 启动服务。
确保服务正在运行并且能够处理来自客户端的连接。
可点击链接在go2RTC下载对应系统(go2rtc_win64.zip)安装包,点击运行即可 https://github.com/AlexxIT/go2rtc/releases
原生 JavaScript 示例
<!DOCTYPE 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 示例
创建组件
<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>在主应用中使用
<template>
<div id="app">
<VideoPlayer />
</div>
</template>
<script>
import VideoPlayer from './VideoPlayer.vue';
export default {
components: { VideoPlayer }
};
</script>Vue 3 示例
创建组件
<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>在主应用中使用
<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 获取更多示例。