v-1.0.0

netease-im · Apr 28, 2018 · 2eab8fa · 2eab8fa
1 parent ebbce2e
commit 2eab8fa
Show file tree

Hide file tree

Showing 49 changed files with 1,445 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -1,2 +1,52 @@
-# weapp-netcall
-网易云信视频DEMO小程序
+#介绍
+网易云信视频DEMO小程序版本（以下简称视频小程序DEMO）是一套结合网易云信直播点播能力，基于微信小程序平台原生开发的视频直播点播小程序。为开发者演示直播推流、直播播放、点播播放等能力。
+
+视频小程序DEMO可扫描以下二维码体验：
+
+![](https://yx-web.nos-hz.163yun.com/offical-site%2F3333.jpg)![](https://yx-web.nos-hz.163yun.com/offical-site%2F2222.jpg)
+
+
+视频小程序DEMO主要功能列表如下：
+
+|总览||
+| :------- | :----- |
+|功能	|描述|
+|功能入口	|直播推流，直播播放，点播播放，更多功能|
+|权限要求	|摄像头、录音、用户信息|
+
+
+|直播推流	||
+| :------- | :----- |
+|功能	|描述|
+|获取并填充推流地址	|点击添加，获取一个推流地址进行推流|
+|输入推流地址	|支持文本框粘贴输入推流URL|
+|二维码扫描获取推流地址	|支持二维码扫描获取推流地址|
+|开始/停止推流	||
+|美颜	||
+|清晰度选择	||
+|摄像头切换	||
+|摄像头开启/关闭	||
+|声音开启/关闭	||
+|扫码获取拉流地址	||
+
+
+|直播播放	||
+| :------- | :----- |
+|功能	|描述|
+|粘贴拉流地址	|支持rtmp flv协议拉流，提供文本框供粘贴|
+|扫码填充拉流地址	|支持通过扫描二维码填充拉流地址|
+|开始/停止播放	||
+|支持系统音量调整	|支持通过改变系统音量调节播放声音|
+|横竖屏切换	||
+
+
+|点播播放	||
+| :------- | :----- |
+|粘贴播放地址	|支持mp4，flv，HLS格式播放，提供文本框供粘贴URL|
+|填充一个默认播放地址	|点击添加，填充一个默认播放地址，播放准备好的测试视频|
+|扫码填充播放地址	|支持通过扫描二维码填充播放地址|
+|开始/暂停播放	||
+|点播拖拽进度条	|手势拖拽seek到指定位置|
+|支持系统音量调整|支持通过改变系统音量调节播放声音|
+|横竖屏切换	||
+
diff --git a/app.js b/app.js
@@ -0,0 +1,4 @@
+App({
+  onLaunch: function () {},
+  globalData: {}
+})
diff --git a/app.json b/app.json
@@ -0,0 +1,25 @@
+{
+  "pages":[
+    "pages/index/index",
+    "pages/push/index",
+    "pages/pullQRCode/index",
+    "pages/pull/index",
+    "pages/video/index"
+  ],
+  "window":{
+    "navigationBarTitleText": "云信视频DEMO",
+    "navigationBarBackgroundColor": "#000",
+    "navigationBarTextStyle": "white",
+    "backgroundTextStyle": "light",
+    "backgroundColor": "#f4f4f4",
+    "enablePullDownRefresh": false,
+    "onReachBottomDistance": 0
+  },
+  "networkTimeout": {
+    "request": 10000,
+    "connectSocket": 10000,
+    "uploadFile": 10000,
+    "downloadFile": 10000
+  },
+  "debug": false
+}
diff --git a/app.wxss b/app.wxss
@@ -0,0 +1,84 @@
+body, page {
+  height: 100%;
+}
+.f-o-v {
+  overflow: visible;
+}
+.f-db {
+  display: block;
+}
+.f-disable {
+  opacity: 0.4;
+}
+.f-c-red {
+  color: red;
+}
+.coverImg {
+   position: absolute; 
+}
+.page-box {
+  width: 100%;
+  height: 100%;
+  background: #000; 
+  color: #fff;
+}
+.ipt-box {
+  position: relative; 
+  width: 100%;
+  height: 150rpx;
+  background: rgba(0, 0, 0, 0.4);
+}
+.ipt {
+  display: inline-block;
+  margin: 18rpx 0 18rpx 20rpx; 
+  width: 558rpx;
+  height: 64rpx;
+  color: #ffffff;
+  font-size: 28rpx;
+  background-color: rgba(0, 0, 0, 0.3); 
+  border-radius: 8rpx;
+  opacity: 0.6;
+}
+.placeholder {
+  opacity: 0.6;
+  font-size:28rpx; 
+  color:#fff; 
+}
+.btn {
+  position: absolute;
+  top: 18rpx;
+  display: inline-block;
+  width: 56rpx;
+  height: 56rpx;
+}
+.btn-1 {
+  right: 95rpx;
+}
+.btn-2 {
+  right: 20rpx;
+}
+.desc {
+  display: block;
+  padding: 0 0 0 20rpx;
+  font-size: 24rpx;
+  opacity: 0.6; 
+  line-height: 24rpx;
+}
+.video-box {
+   width: 100%; 
+}
+.video {
+  width: 100%;
+  height: 100%;
+}
+.action {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;  
+  height: 300rpx;
+  background: rgba(0, 0, 0, 0.4);
+  text-align: center;
+  font-size: 22rpx;
+}
diff --git a/pages/index/index.js b/pages/index/index.js
@@ -0,0 +1,10 @@
+Page({
+  onShareAppMessage: function () {
+    return {
+      title: '云信视频DEMO',
+      path: 'pages/index/index',
+      imageUrl: '/res/img/share.png'
+    }
+  }
+})
+
diff --git a/pages/index/index.json b/pages/index/index.json
@@ -0,0 +1,4 @@
+{
+  "navigationBarTitleText": "云信视频DEMO",
+  "disableScroll": true
+}
diff --git a/pages/index/index.wxml b/pages/index/index.wxml
@@ -0,0 +1,34 @@
+<view class="flex-wrp">
+  <navigator class="flex-item" url="/pages/push/index" hover-class="none">
+    <view class="btn-item btn-item-1">
+      <image class="item-img" src="/res/img/push_icon.png" background-size="cover"></image>
+      <text class="item-txt">直播推流</text> 
+    </view>
+  </navigator>
+  <navigator class="flex-item" url="/pages/pull/index" hover-class="none">
+    <view class="btn-item btn-item-2">
+      <image class="item-img" src="/res/img/pull_icon.png" background-size="cover"></image>
+      <text class="item-txt">直播播放</text>   
+    </view>
+  </navigator>
+  <navigator class="flex-item" url="/pages/video/index" hover-class="none">
+    <view class="btn-item btn-item-3">
+      <image class="item-img" src="/res/img/vod_icon.png" background-size="cover"></image>
+      <text class="item-txt">点播播放</text>   
+    </view>
+  </navigator>
+  <view class="flex-item">
+    <view class="btn-item btn-item-4">
+      <image class="item-img" src="/res/img/future_icon.png" background-size="cover"></image>
+      <text class="item-txt item-txt-des">敬请期待</text>   
+    </view>
+  </view>
+</view>
+<view class="intro">
+  <view>
+    <image class="intro-logo" src="/res/img/logo.png" background-size="cover"></image>
+  </view>
+  <view>
+    <text class="intro-desc">本程序展示音视频能力由网易云信提供技术支持</text>
+  </view>
+</view>
diff --git a/pages/index/index.wxss b/pages/index/index.wxss
@@ -0,0 +1,59 @@
+.flex-wrp {
+  display: flex;
+  width: 100%;
+  height: 680rpx;
+  flex-flow: row wrap;
+}
+.flex-item {
+  width: 50%;
+  height: 50%;
+}
+.btn-item {
+  margin-top: 40rpx;
+  margin-bottom: 40rpx;
+  padding-bottom: 30rpx;
+  background: #fff;
+  border: 0 solid #e3e3e3;
+  box-shadow: 0 2px 8px 0 rgba(218, 218, 218, 0.5);
+  border-radius: 8rpx;
+  text-align: center;
+  overflow: hidden;
+}
+.btn-item-1, .btn-item-3 {
+  margin-right: 20rpx;
+  margin-left: 40rpx;
+}
+.btn-item-2, .btn-item-4 {
+  margin-right: 40rpx;
+  margin-left: 20rpx;
+}
+.item-img {
+  display: block;
+  margin: 40rpx auto 32rpx;
+  width: 120rpx;
+  height: 120rpx;
+}
+.item-txt {
+  font-size: 24rpx;
+  line-height: 34rpx;
+  color: #333;
+}
+.item-txt-des {
+  color: #666;
+}
+.intro {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  height: 136rpx;
+  text-align: center;
+}
+.intro-logo {
+  width: 250rpx;
+  height: 42rpx;
+}
+.intro-desc {
+  font-size: 24rpx;
+  color: #999;
+}