Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
yangkaifeng
uni-app
提交
74e7bdd4
U
uni-app
项目概览
yangkaifeng
/
uni-app
与 Fork 源项目一致
Fork自
DCloud / uni-app
通知
3
Star
1
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
1
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
U
uni-app
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
1
Issue
1
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
74e7bdd4
编写于
9月 10, 2019
作者:
d-u-a
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
docs: add live-pusher
上级
5b602976
变更
2
显示空白变更内容
内联
并排
Showing
2 changed file
with
201 addition
and
5 deletion
+201
-5
docs/api/media/live-pusher-context.md
docs/api/media/live-pusher-context.md
+88
-0
docs/component/live-pusher.md
docs/component/live-pusher.md
+113
-5
未找到文件。
docs/api/media/live-pusher-context.md
0 → 100644
浏览文件 @
74e7bdd4
### uni.createLivePusherContext(livePusherId, this)
创建 live-pusher 上下文 livePusherContext 对象。
**平台差异说明**
|App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|
|见下|x|√|x|x|x|
**参数说明**
设置live-pusher组件的推流地址,推流视频模式等。
属性|类型 |默认值|必填|说明 :--|:--|:--|:--|:--|
url|string| |是|推流地址,支持RTMP协议。
mode |string| |否|推流视频模式,可取值:SD(标清), HD(高清), FHD(超清)。
muted|Boolean|false|否|是否静音。
enable-camera|Boolean|true|否|开启摄像头。
auto-focus|Boolean|true|否|自动聚集。
beauty|Number|0|否|美颜,取值范围 0-9(iOS取值范围为1) ,0 表示关闭。
whiteness|Number|0|否|美白,取值范围 0-9(iOS取值范围为1) ,0 表示关闭。
**注意:**
-
app-nvue 平台 2.2.5(alpha)+ 支持 uni.createLivePusherContext(livePusherId, this)
-
app-nvue 平台 2.2.5(alpha)- 需要同时设置组件属性id和ref
``<live-pusher id="livepusher1" ref="livepusher1"></live-pusher>``
,或者直接使用 ref,例如
``this.$refs.livepusher1``
### API #### start(callback)
> 开始推流
##### callback 返回 Object 参数说明
属性|类型 |说明 :--|:--|:--|
type | String | "success" 表示成功, "fail" 表示失败 #### pause(callback) > 暂停推流
##### callback 返回 Object 参数说明 参数|类型 |说明 :--|:--|:--| type | String | "success" 表示成功, "fail" 表示失败
#### resume(callback) > 恢复推流
##### callback 返回 Object 参数说明 参数|类型 |说明 :--|:--|:--| type | String | "success" 表示成功, "fail" 表示失败
#### stop(callback) > 停止推流
##### callback 返回 Object 参数说明 参数|类型 |说明 :--|:--|:--| type | String | "success" 表示成功, "fail" 表示失败
#### switchCamera(callback) > 切换前后摄像头
##### callback 返回 Object 参数说明 参数|类型 |说明 :--|:--|:--| type | String | "success" 表示成功, "fail" 表示失败
#### snapshot(callback) > 快照
##### callback 返回 Object 参数说明
##### 成功时的回调 参数|类型 |说明 :--|:--|:--| type|string|"success" 表示成功, "fail" 表示失败
code|Number| 对应code码
message|object|{width:"快照图片宽度",height:"快照图片高度",tempImagePath:"快照图片路径"}。
##### 失败的回调 参数|类型 |说明 :--|:--|:--| type|string|"fail" 表示失败
code|Number|
message|object|
#### startPreview(callback) > 开启摄像头预览
##### callback 返回 Object 参数说明 参数|类型 |说明 :--|:--|:--| type | String | "success" 表示成功, "fail" 表示失败
#### stopPreview(callback) > 关闭摄像头预览
##### callback 返回 Object 参数说明 参数|类型 |说明 :--|:--|:--| type | String | "success" 表示成功, "fail" 表示失败
### 事件
#### statechange
> 状态变化事件 ##### 返回参数(detail)的详细说明 参数|类型|说明 :--|:--|:--|
code|Number|
message|string|
#### netstatus
> 网络状态通知事件 ##### 安卓 返回参数(detail)的详细说明 键名|说明 :--|:--|
videoBitrate | 当前视频编/码器输出的比特率,单位 kbps
audioBitrate | 当前音频编/码器输出的比特率,单位 kbps
videoFPS | 当前视频帧率
videoGOP | 当前视频 GOP,也就是每两个关键帧(I帧)间隔时长,单位 s
netSpeed | 当前的发送/接收速度
netJitter | 网络抖动情况,抖动越大,网络越不稳定
videoWidth | 视频画面的宽度
videoHeight | 视频画面的高度
##### iOS 返回参数(detail)的详细说明 参数|类型 |说明 :--|:--|:--|
code|Number| code码
message|string| 具体的网络状态信息
#### error > 渲染错误事件 ##### 返回参数(detail)的详细说明 参数|类型 |说明 :--|:--|:--|
errCode|Number|
errMsg|string|
docs/component/live-pusher.md
浏览文件 @
74e7bdd4
...
@@ -2,12 +2,120 @@
...
@@ -2,12 +2,120 @@
实时音视频录制,也称直播推流。
实时音视频录制,也称直播推流。
目前只有App和微信小程序支持。
-
微信小程序:
[
规范文档
](
https://developers.weixin.qq.com/miniprogram/dev/component/live-pusher.html
)
-
微信小程序:
[
规范文档
](
https://developers.weixin.qq.com/miniprogram/dev/component/live-pusher.html
)
-
App平台:nvue文件下也支持live-pusher组件,API与微信相同。如果是vue文件,则需要单独编写条件编译代码,使用plus.video.LivePusher,
[
业务指南
](
https://ask.dcloud.net.cn/article/13416
)
、
[
规范文档
](
http://www.html5plus.org/doc/zh_cn/video.html#plus.video.LivePusher
)
-
App平台:nvue文件下也支持live-pusher组件,API与微信相同。如果是vue文件,则需要单独编写条件编译代码,使用plus.video.LivePusher,
[
业务指南
](
https://ask.dcloud.net.cn/article/13416
)
、
[
规范文档
](
http://www.html5plus.org/doc/zh_cn/video.html#plus.video.LivePusher
)
**平台差异说明**
|App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|x|√|x|x|x|x|
**参数说明**
设置live-pusher组件的推流地址,推流视频模式等。
属性|类型 |默认值|必填|说明 :--|:--|:--|:--|:--|
url|string| |是|推流地址,支持RTMP协议。
mode |string| |否|推流视频模式,可取值:SD(标清), HD(高清), FHD(超清)。
muted|Boolean|false|否|是否静音。
enable-camera|Boolean|true|否|开启摄像头。
auto-focus|Boolean|true|否|自动聚集。
beauty|Number|0|否|美颜,取值范围 0-9(iOS取值范围为1) ,0 表示关闭。
whiteness|Number|0|否|美白,取值范围 0-9(iOS取值范围为1) ,0 表示关闭。
```
html
<template>
<view>
<live-pusher
id=
'livePusher1'
class=
"livePusher"
ref=
"livePusher"
url=
""
mode=
"SD"
:muted=
"true"
:enable-camera=
"true"
:auto-focus=
"true"
:beauty=
"1"
whiteness=
"2"
aspect=
"9:16"
postition=
"absolute"
@
statechange=
"statechange"
@
netstatus=
"netstatus"
@
error =
"error"
></live-pusher>
<button
class=
"btn"
@
click=
"start"
>
开始推流
</button>
<button
class=
"btn"
@
click=
"pause"
>
暂停推流
</button>
<button
class=
"btn"
@
click=
"resume"
>
resume
</button>
<button
class=
"btn"
@
click=
"stop"
>
停止推流
</button>
<button
class=
"btn"
@
click=
"snapshot"
>
快照
</button>
<button
class=
"btn"
@
click=
"startPreview"
>
开启摄像头预览
</button>
<button
class=
"btn"
@
click=
"stopPreview"
>
关闭摄像头预览
</button>
<button
class=
"btn"
@
click=
"switchCamera"
>
切换摄像头
</button>
</view>
</template>
```
```
javascript
<
script
>
export
default
{
onReady
()
{
this
.
context
=
uni
.
createLivePusherContext
(
"
livePusher1
"
,
this
);
},
methods
:
{
statechange
(
e
)
{
console
.
log
(
"
statechange:
"
+
JSON
.
stringify
(
e
));
},
netstatus
(
e
)
{
console
.
log
(
"
netstatus:
"
+
JSON
.
stringify
(
e
));
},
error
(
e
)
{
console
.
log
(
"
error:
"
+
JSON
.
stringify
(
e
));
},
start
:
function
()
{
this
.
context
.
start
((
a
)
=>
{
console
.
log
(
"
livePusher.start:
"
+
JSON
.
stringify
(
a
));
});
},
close
:
function
()
{
this
.
context
.
close
((
a
)
=>
{
console
.
log
(
"
livePusher.close:
"
+
JSON
.
stringify
(
a
));
});
},
snapshot
:
function
()
{
this
.
context
.
snapshot
((
e
)
=>
{
console
.
log
(
JSON
.
stringify
(
e
));
});
},
resume
:
function
()
{
this
.
context
.
resume
((
a
)
=>
{
console
.
log
(
"
livePusher.resume:
"
+
JSON
.
stringify
(
a
));
});
},
pause
:
function
()
{
this
.
context
.
pause
((
a
)
=>
{
console
.
log
(
"
livePusher.pause:
"
+
JSON
.
stringify
(
a
));
});
},
stop
:
function
()
{
this
.
context
.
stop
((
a
)
=>
{
console
.
log
(
JSON
.
stringify
(
a
));
});
},
switchCamera
:
function
()
{
this
.
context
.
switchCamera
((
a
)
=>
{
console
.
log
(
"
livePusher.switchCamera:
"
+
JSON
.
stringify
(
a
));
});
},
startPreview
:
function
()
{
this
.
context
.
startPreview
((
a
)
=>
{
console
.
log
(
"
livePusher.startPreview:
"
+
JSON
.
stringify
(
a
));
});
},
stopPreview
:
function
()
{
this
.
context
.
stopPreview
((
a
)
=>
{
console
.
log
(
"
livePusher.stopPreview:
"
+
JSON
.
stringify
(
a
));
});
}
}
}
<
/script>
```
相关api:
[
uni.createLivePusherContext
](
/api/media/live-pusher-context?id=createLivePusherContext
)
**注意**
**注意**
*
live-pusher 是原生组件,在小程序端层级高于前端组件,请勿在 scroll-view、swiper、picker-view、movable-view 中使用,需使用cover-view覆盖。在App端的nvue文件中,live-pusher没有这类限制。
*
live-pusher 是原生组件,在小程序端层级高于前端组件,请勿在 scroll-view、swiper、picker-view、movable-view 中使用,需使用cover-view覆盖。在App端的nvue文件中,live-pusher没有这类限制。
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录