微信小程序学习之路——媒体组件（二）
Camera
调用系统相机，该组件是原生组件，使用时请注意相关限制。扫码二维码功能需要将微信客户端升级到6.7.3并且需要用户授权，其属性如下：
| 属性名 | 类型 | 默认值 | 说明 | 最低版本 |
|---|---|---|---|---|
| mode | String | normal | 有效值为 normal, scanCode | 2.1.0 |
| device-position | String | back | 前置或后置，值为front, back | |
| flash | String | auto | 闪光灯，值为auto, on, off | |
| bindstop | EventHandle | 摄像头在非正常终止时触发，如退出后台等情况 | ||
| binderror | EventHandle | 用户不允许使用摄像头时触发 | ||
| bindscancode | EventHandle | 在扫码识别成功时触发，仅在 mode="scanCode" 时生效 | 2.1.0支持一维码，2.4.0支持二维码 |
示例代码如下：
预览
Page({
takePhoto(){
const ctx =wx.createCameraContext()
ctx.takePhoto({
quality:'high',
success:(res)=>{
this.setData({
src:res.tempImagePath
})
}
})
},
error(e){
console.log(e.detail)
}
})执行结果如下：
live-player
实时音视频播放。该组件是原生组件，使用时请注意相关限制。暂只针对国内主体如下类目的小程序开放，需要先通过类目审核，再在小程序管理后台，「开发」-「接口设置」中自助开通该组件权限。请参考微信官方相关文档：https://developers.weixin.qq.com/miniprogram/dev/component/live-player.html
示例代码如下：
Page({
onReady(res) {
this.ctx = wx.createLivePlayerContext('player')
},
statechange(e) {
console.log('live-player code:', e.detail.code)
},
error(e) {
console.error('live-player error:', e.detail.errMsg)
},
bindPlay() {
this.ctx.play({
success: res => {
console.log('play success')
},
fail: res => {
console.log('play fail')
}
})
},
bindPause() {
this.ctx.pause({
success: res => {
console.log('pause success')
},
fail: res => {
console.log('pause fail')
}
})
},
bindStop() {
this.ctx.stop({
success: res => {
console.log('stop success')
},
fail: res => {
console.log('stop fail')
}
})
},
bindResume() {
this.ctx.resume({
success: res => {
console.log('resume success')
},
fail: res => {
console.log('resume fail')
}
})
},
bindMute() {
this.ctx.mute({
success: res => {
console.log('mute success')
},
fail: res => {
console.log('mute fail')
}
})
}
}).page-body-button {
margin-bottom: 30rpx;
}
live-player {
width: 100%;
height: 225px;
}page {
background-color: #F8F8F8;
height: 100%;
font-size: 32rpx;
line-height: 1.6;
}
.page-body {
padding: 20rpx 0;
}
.btn-area{
margin-top: 60rpx;
box-sizing: border-box;
width: 100%;
padding: 0 30rpx;
}
执行结果如下：
由于视频流有问题，这里就无显示了，希望读者们自己去找一个可以用的视频源
live-pusher
实时音视频录制。该组件是原生组件，使用时请注意相关限制。需要用户授权 scope.camera、scope.record暂只针对国内主体如下类目的小程序开放，需要先通过类目审核，再在小程序管理后台，「开发」-「接口设置」中自助开通该组件权限。具体属性请查看微信官方相关文档：https://developers.weixin.qq.com/miniprogram/dev/component/live-pusher.html
下面展示一下示例代码：
Page({
onReady(res) {
this.ctx = wx.createLivePusherContext('pusher')
},
statechange(e) {
console.log('live-pusher code:', e.detail.code)
},
bindStart() {
this.ctx.start({
success: res => {
console.log('start success')
},
fail: res => {
console.log('start fail')
}
})
},
bindPause() {
this.ctx.pause({
success: res => {
console.log('pause success')
},
fail: res => {
console.log('pause fail')
}
})
},
bindStop() {
this.ctx.stop({
success: res => {
console.log('stop success')
},
fail: res => {
console.log('stop fail')
}
})
},
bindResume() {
this.ctx.resume({
success: res => {
console.log('resume success')
},
fail: res => {
console.log('resume fail')
}
})
},
bindSwitchCamera() {
this.ctx.switchCamera({
success: res => {
console.log('switchCamera success')
},
fail: res => {
console.log('switchCamera fail')
}
})
}
}).page-body-button {
margin-bottom: 30rpx;
}
live-pusher {
margin: 0 auto;
width: 300px;
height: 225px;
}page {
background-color: #F8F8F8;
height: 100%;
font-size: 32rpx;
line-height: 1.6;
}
.page-body {
padding: 20rpx 0;
}
.btn-area{
margin-top: 60rpx;
box-sizing: border-box;
width: 100%;
padding: 0 30rpx;
}
执行结果如下：
