Le streaming en direct pour la vente en ligne est actuellement très populaire. Pour les projets de streaming, comprendre la réception et l'émission de flux vidéo est essentiel. Avant que le plugin de streaming en direct des mini-programmes WeChat ne soit disponible, il fallait utiliser des services tiers. Aujourd'hui, face à un nouveau besoin de streaming, j'ai testé le module de streaming en direct des mini-programmes : le plugin officiel est très pratique, il suffit de l'activer et de l'intégrer dans le mini-programme, ce qui permet d'économiser considérablement les coûts par rapport aux solutions tierces. Bien sûr, chaque approche a ses avantages, et le plugin officiel présente certaines limites selon les scénarios d'utilisation, ce qui dépend des exigences du projet. Comment fonctionne concrètement le plugin des mini-programmes ?

《1》Tout d'abord, activez le service de streaming sur la plateforme publique WeChat

Zone de discussion du plugin de streaming en direct des mini-programmes

Vérification de la version du streaming en direct des mini-programmes

《2》Comment intégrer le composant de streaming ?

Méthode 1 : Intégration dans le package principle

"plugins": {
	"composant-streaming-direct": {
		// numéro de version
		"version": "1.1.2", 
		// appid du composant de streaming
		"provider": "wx2b03c6e691cd7370" 
	}
}

Méthode 2 : Intégration dans un sous-package

"sous-packages": [
	{
		"plugins": {
			"composant-streaming-direct": {
				"version": "1.1.1", 
				"provider": "wx2b03c6e691cd7370"
			}
		}
	}
]

《3》Comment accéder à la salle de streaming ?

a. Utiliser le composant navigator pour accéder à la salle de streaming

<navigator url="plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=8&custom_params={{parametresPersonnalises}}&open_share_ticket=1" class="image">Test du composant de streaming</navigator>

b. Utiliser la méthode de navigation programmatique navigateTo pour accéder à la salle de streaming

// indiquer l'ID de la salle spécifique, disponible via l'API [Obtenir la liste des salles de streaming]
let idSalle = [id de la salle de streaming] 
// les développeurs peuvent ajouter des paramètres personnalisés dans l'URL de la salle de streaming
// ces paramètres peuvent être récupérés ultérieurement dans le lien de partage et lors de la navigation vers la page de détails du produit
let parametresPersonnalises = encodeURIComponent(JSON.stringify({ chemin: 'pages/index/index', pid: 1 })) 
wx.navigateTo({
    url: `plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=${idSalle}&custom_params=${parametresPersonnalises}`
})

Note : Pendant le développement, vous pouvez créer une salle de streaming dans la plateforme de gestion pour obtenir un room_id pour les tests.

Avec ces trois étapes, vous avez intégré le plugin de streaming en direct des mini-programmes.

Interfaces du composant de streaming :

Ces interfaces de composant sont bien documentées. Voici comment récupérer les paramètres du lien lors de l'entrée depuis une carte de partage :

//app.js
let composantStreaming = requirePlugin('live-player-plugin')
onShow(options) {
	// l'intégration du composant nécessite de définir open_share_ticket=1"
	// ce paramètre n'est présent que lorsque l'on entre depuis une carte partagée dans un groupe WeChat
	console.log("shareTicket depuis un groupe WeChat=", options.shareTicket)
	// l'interface getShareParams n'est appelée que pour les scénarios d'entrée par carte de partage
	if (options.scene == 1007 || options.scene == 1008 || options.scene == 1044) {
		composantStreaming.getShareParams().then(res => {
			// identifiant de la salle de streaming
			console.log('room_id=', res.room_id)
			// openid de l'utilisateur
			console.log("openid de l'entrant=", res.openid)
			// openid du partageur, présent uniquement lors de l'entrée par carte de partage
			console.log("share_openid du partageur=", res.share_openid)
			// paramètres personnalisés du développeur transmis dans l'URL
			console.log("paramètres personnalisés du développeur=", res.custom_params)
		}).catch(err => {
			console.log('erreur get share params', err)
		})
	}
}

Lorsque les utilisateurs naviguent depuis la salle de streaming vers la page de détails d'un produit du mini-programme marchand ou cliquent sur l'icône d'accueil en haut à gauche pour retourner à la page d'accueil du mini-programme marchand, les informations suivantes peuvent être récupérées dans la fonction de cycle de vie onLoad(options) : identifiant de la salle, openid de l'utilisateur, share_openid du partageur (uniquement si l'utilisateur est entré dans la salle via une carte de partage), et paramètres personnalisés du développeur.

Interfaces côté serveur :

Interfaces de gestion des salles de streaming :

Interfaces de gestion des produits de stremaing :

Pour la plupart des besoins de développement spécifiques au streaming en direct des mini-programmes, le plugin officiel est suffisant. Il permet la réception et l'émission de flux vidéo, la gestion des produits, et réduit les coûts de développement.

Solution pour l'erreur "page inexistante" lors du partage du QR code de la salle de streaming :

https://developers.weixin.qq.com/miniprogram/dev/framework/liveplayer/other-abilities.html

Après avoir intégré le composant de streaming dans le mini-programme, vous devez publier le mini-programme au moins une fois, sinon le QR code de la salle de streaming ne sera pas valide. Concrètement, les utilisateurs qui scannent le QR code verront un message "page inexistante".

Une fois la salle de streaming créée dans l'interface d'administration du streaming en direct des mini-programmes, vous pouvez directement obtenir le QR code de partage sans développement supplémentaire.